$$config title: 1일차, 웹 1 노트 keywords: - IT - 웹 $$ # 코드펜 기본세팅 유저 메뉴 - settings - Editor Preferences - `Syntax Highlighting` : 개인취향에 맞게 - Fonts - Code Font Family : `Hack` - Code Font Size : `14 - 16` - Editor Options - Autocomplete : `체크하기` # HTML, CSS, JS의 역할 1. html : 웹의 내용 2. CSS : 웹의 꾸밈 3. JS : 웹의 인터렉션 # HTML 태그 - HTML은 여러 태그들로 이루어져 잇다. - 태그의 문법 : `<시작태그명>내용` - 내용을 포함한 시작태그부터 종료태그까지를 하나의 `엘리먼트`라고 부른다. 예시 ```html

내용

``` ## 태그 div, section, nav, article을 관례적으로 사용함 ```html

``` # CSS ## CSS 문법 - `CSS 선택자 { 속성 : 속성값; }` - 세미콜론을 빼먹지 않도록 주의 예시 ```css div { color:red; } ``` ## 배경색, 너비, 높이의 CSS 속성 1. `background-color` : 배경색 2. `width` : 너비 - `div`와 같은 태그에 `width`를 주지 않을 시, 주어진 환경(크기)에 맞춰 최대한 유연하게 늘어남 3. `height` : 높이 - `height` 값을 부여하지 않을 시, 기본적으로 height는 `0`이다. # display 속성의 block과 inline-block의 차이 [개념 - display 속성 정리](https://codepen.io/jangka44/live/ZjbpPR) [실험 : 개념놀이터](https://codepen.io/jangka44/pen/GRrxyKK?editors=0100) ## 1. `display: block` - 너비 : 너비가 지정되어 있지 않으면, 너비가 창크기에 맞춰 최대한 늘어남. - 높이 : 높이가 지정되어 있지 않으면, 높이가 최소한으로 유연하게 줄어듦. - 배열방향 : 한줄에 무조건 한 엘리먼트 (세로로 배열) ## 2. `display: inline-block` - 너비 : 너비가 지정되어 있지 않으면, 너비가 최소한으로 유연하게 줄어듦. - 높이 : 높이가 지정되어 있지 않으면, 높이가 최소한으로 유연하게 줄어듦. - 배열방향 : 한줄에 최대한 여러개가 배열됨 (가로로 배열) ## 3. `display: none` - 화면에서 없어진다. - 숨겨짐이 아니라 없어진다 # 기타 ## 색상 조합 사이트 [color hunt](https://colorhunt.co/) ## HTML 주석처리 ```html ```