Chap 1. 웹 개발 이해하기
HTML - 웹 구조를 짜는 마크업 언어
CSS - 웹에 스타일을 적용해줌
JS - 웹과 사용자 간의 상호작용
Chap 2. HTML 기초
div 과 span의 차이 :
- div - block 한 줄을 차지, span - line 콘텐츠만큼의 공간만 차지
ul,ol,li란?
- 목록을 작성할 때 사용함
- ul(순서가 없는 목록), ol(순서가 있는 목록)
- li는 단독으로 사용하지 않고 ul>li, ol>li 와 같이 사용
input
- default는 text 이외 button, radio, checkbox 등 다양한 type이 있다. label을 사용하여 content를 표현할 수 있다.
Chap 3. HTML 심화
시멘틱 요소
- semantic 의미있는
section,header,footer등이 시멘티 요소에 해당한다.div는 시멘티 요소와 거리가 멀다.
id, class
- id는 고유한 값,id는 사용할 일이 거의 없다.
- class는 반복되는 유형에 사용한다. class를 주로 사용
더 나아가기
script 태그의 위치가 중요한 이유
보통 script의 태그는 body의 끝에 위치시키는 것이 좋다고들 한다.왜일까?
이는 웹 브라우저의 동작 과정을 이해하면 쉽게 알 수 있다.만약 script는 head쪽에 위치할 경우 다음과 같이 동작한다.
html 파싱 > html 파싱 stop > js download & run js > 멈췄던 html 파싱
js는 파일의 용량이 크기 때문에 웹 사이트를 보는데 많은 시간이 걸린다.
그러나 body의 끝에 위치할 경우
html파싱 > js download & run js
와 같이 동작하기 떄문에
사용자가 html에 담긴 구조를 빠르게 볼 수 있다.하지만 이것도 장점만 있는 것은 아니다.
js 의존적인 사이트일 경우 단점으로도 작용된다는 것인데
이를 모두 해결하기 위한 방법으로head 태그 + defer 속성을 추가하는 것이 있다.
html 파싱 + js 병렬로 download > html 파싱완료 > run js
2일차를 진행하면서 HTML 이론을 리마인드할 수 있었다. 회고록을 작성하니 내가 무엇을 알고 무엇을 모르는지 명확하게 알 수 있었으며 모르는 것은 스스로 학습하며 큰 도움이 되었다.
오늘의 숙제: 자기소개페이지만들기 (O)
노션으로 갈아탐