분류 전체보기
Grouping Content란? <div> 만 쓰는거 금지..!
✍Grouping Content : 무엇인가를 감쌀 때(그룹화 할 때) 사용하는 태그의 명칭 HTML 구조를 처음에 짤 때는 무조건 그룹핑할때는 ! 라는 생각으로 범벅을 시켜놨었다. 하지만 배울수록 이건 잘못되었다는걸 알았다.. (처음에 만든 코드들 보면,, 한숨만) Sementic Tags를 지킨다고 생각하면 될 것 같다. 쉽게 이야기하자면, 수십 수백 줄이 되는 코드를 보면서 어느 부분이 네비게이터인지 어느 부분이 본문인지 한 눈에 이해할 수 있게 해준 방법이라 생각한다. 🔎 Semantic Tags란? : '의미가 있는 태그'라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들이다. (자세한 내용은 아래 링크에서 확인할 수 있다.) https://www.w3schools.com/..
![[HTML] HTML Living Standard란?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbuxtFo%2FbtrxTOmTpS4%2FiMGpYFE35fixrlzQBQRIhk%2Fimg.jpg)
[HTML] HTML Living Standard란?
HTML5는 처음 개발 공부할때부터 들어왔고 로고로도 굉장히 익숙하다. 그런데 수업 중 HTML Living Standard를 HTML5라고 지칭하는게 옳지 않다고 하셔서 그 이유에 대해 정리해보았다. 🚩 HTML Living Standard란 ? 버전 숫자와는 상관없이 HTML 문법 등을 규정한 표준으로, 버전이라는 개념을 사용하지 않고 유동적으로 계속 업데이트한다는 의미이다. 현재 WHATWG에서 HTML5를 현존하는 LIving Standard로서 인정하고 있기 때문에 HTML5와 혼동하여 사용되기도 한다. WHATWG 에서도 확인할 수 있다. 1.2 Is this HTML5? The HTML Living Standard (sometimes informally called HTML5). The HT..
URL, IP, PORT 란?
url과 ip는 개발에 대해 하나도 몰랐을 때부터 종종 썼었다. 친구에게 url을 보내달라고하거나 인터넷을 하다보면 ip(길고 긴 숫자) 처럼 그렇게 낯선 단어들은 아니었다. 하지만 어떤건지 의미에 대해 자세하게 알아본적은 없어서 이번에 정리해보았다. ✍URL : 다른 파트들과, 몇몇의 의무와 선택사항들로 구성되어있는 웹 페이지를 찾기 위한 주소 https://www.sample.com:80/ http : 서버와 클라이언트가 인터넷 상에서 데이터를 주고받기 위한 프로토콜(protocol) 프로토콜은 컴퓨터 네트워크에서 데이터를 교환하거나 전송하기 위한 방법들로 보통 HTTP 프로토콜이나 HTTP 프로토콜의 보안 버전 HTTPS이다. 서버/클라이언트 모델로 클라이언트는 요청을, 서버는 응답을 해주는 구조이..
![[HMTL] emmet이란?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fk9pPg%2FbtrxVdTIgM1%2FaTlbiS4ic4gK3EqTY4evLk%2Fimg.jpg)
[HMTL] emmet이란?
✍ emmet : HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인 실습 h1 h1+h2 h1>p h${hello} hello h1>[*2 h1>p*5 h1#one h1.one .one #one (div>table>(tr>(td*2))*3)+(footer>p) lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam id nemo adipisci dolores corrupti? Ipsam explicabo commodi blanditiis expedita placeat quis ad quod nihil recusandae. Voluptates blanditiis optio pariatur odio. im..
![[VSC] 코드스니펫 html lang ko로 설정하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3N9F8%2FbtrxEFqLcWm%2FkkK2xA72gAZZVtlkJkBrZ1%2Fimg.png)
[VSC] 코드스니펫 html lang ko로 설정하기
VSC를 키고나면 가장 먼저 설정하는 기본구조가 있습니다. ! + tab을 눌러도 바로 되지만 그럴경우엔 기본언어가 en으로 되어있어서 매번 바꾸기 번거롭습니다. 그래서 변경해보려고합니다! 🚩 DOCTYPE html> ko로 설정하기 1. ctrl shift p 로 명령 팔레트를 엽니다. 2. >snippets 입력 후 enter 3. html.json 선택 후 아래 코드를 입력합니다. { // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet an..
![[VSC] VSC실행마다 사용중인 프로젝트 바로 열기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbuheTV%2FbtrxHXRK0hJ%2FsqI93TkoDcxmLfF3KLJVYk%2Fimg.png)
[VSC] VSC실행마다 사용중인 프로젝트 바로 열기
VSC를 킬 때마다 이전에 사용했던 프로젝트가 뜨는데 한 가지만 할 때는 참 유용하지만 여러 프로젝트를 사용중일 때는 너무 불편했습니다. 그래서 이번엔 VSC실행할 때 마다 원하는 폴더를 지정해서 기본으로 열게 하려고합니다! 1. 기본으로 설정할 폴더 선택 2. PowerShell에 입력하기 - SHIFT + 우클릭 ➡ code . 입력 (띄어쓰고 점까지 입력!) ➡ enter 하면 끝
![[VSC] 알아두면 좋을 단축키](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYAvkS%2FbtrxHuuTdaD%2FgfzLnIJg8ljBpw9ET0Zhk1%2Fimg.png)
[VSC] 알아두면 좋을 단축키
모든 단축키 : Ctrl + K + S Settings : Ctrl + , (오른쪽 상단에 Settings.json file open으로 좀 더 다양한 커스터마이징 가능) Sidebar : Ctrl + B Terminal : `Ctrl + Shift + `` (백틱, 틸트, 템플릿리터럴) Command palette : Ctrl + Shift + P, F1 동시 선택 : Ctrl + D (2번 입력, Ctrl + Shift + D와 같은 역할) 동시 수정 : Ctrl + Alt + 방향키(상, 하), Alt + Click, Alt + Shift + Drag, Alt + Shift + i Quick Open : Ctrl + P 문장의 양 끝 : Home / End 코드의 양 끝 : Ctrl + Home /..
![[CSS] 색상 컬러 사이트 :: HTML Color Codes, Adobe Color, Two Color Combinations](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdlVXjq%2FbtrxHvm2k1M%2FMfpACXOAANEQPr2mYoGa41%2Fimg.png)
[CSS] 색상 컬러 사이트 :: HTML Color Codes, Adobe Color, Two Color Combinations
화면을 꾸미다보면 기본으로 제공하고있는 컬러들이 많습니다. coral, darkgreen등 많지만 내가 원하는 색상을 정하기 위해서는 디테일한 조정이나 색조합을 먼저 보고싶을때 사용하면 좋은 사이트들입니다. 1. HTML Color Codes https://htmlcolorcodes.com HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com 원하는 컬러는 잠금 표시를 해 고정해 두며 다른컬러와의 조합을 해볼 수 있습니다. 2. Adobe..
TIL 1 :: <!DOCTYPE html>, float에 clear? overflow?
✍TIL (Today I Learn) / 키워드 : 오늘 배운 것 새로운 사람들을 마나고 시작한다는 것은 그만큼 내가 몰랐던 정보를 또 알 수 있는 기회라고 생각한다. OT에서 자기소개를 하던 중 어떤 팀에서 TIL을 하겠다는 이야기가 나와서 저게 어떤걸까 궁금해서 검색을 해봤다. 이미 블로그를 하는 개발자들은 많이들 했었고 하고 있으며 GitHub에 1일1커밋과 비슷한 것 같다. 차이라면 글과 코드로 오늘 배운 내용을 복습하는 방법의 차이가 아닐까싶다. 나는 TIL을 내가 오늘 배운내용을 되새기기 위해 기록하려고 쓸 것이다. 매일 꾸준히 좋은 내용의 글을 쓸 수 있다면 베스트겠지만 사실 하다보면 말도 안되는 내용을 쓰는 날도 있겠지만 최대한 꾸준히 이어가려고한다. 나름 블로그를 두 개 운영하면서 문장이..
멋쟁이사자처럼 :: 프론트엔드스쿨2기 합격 후기
안녕하세요. 제가 프론트엔드를 시작하게 된 이유와 프론트엔드스쿨 2기 합격 후기를 남겨보려고 합니다. 저는 개발 공부를 하면 할수록 프론트엔드를 할 때 더 다양한 고민을 한다는 것을 알게 되었습니다. 이 태그를 사용하는 게 맞을까? 다른 방법은 없을까? 이렇게 고민하는 시간이 설레면서 저는 프론트엔드를 해야겠다고 결심했습니다. 준비하는 과정에서 혼자 공부할 수도 있지만 마음처럼 잘 되지는 않을 거라는 우려가 있었습니다. 그러던 중 멋쟁이사자처럼의 프론트엔드스쿨을 알게 됐습니다! 지원하는 과정은 두 단계였습니다. 1차 자기소개서 2차 자기소개 영상 & 과제 자기소개서 - 지원동기, 경험, 학습 계획 및 목표 과제 - 로그인 페이지 만들기 (js는 선택) 이렇게 진행됐었는데 너무 듣고 싶은 과정이었고 주변에..