HTML - 3. 콘텐츠모델, 시멘틱마크업, 블록&인라인

공부일기/부스트코스 2020. 9. 13. 20:26

1. 콘텐츠 모델

Metadata: 콘텐츠의 style(표현), script(동작)을 설정 하거나 다른 문서와의 관계 등의 정보를 포함하는 요소. 태그 중 대부분이 <head> 태그 내에 들어가는 태그들이다.
Flow: 거의 대부분의 태그들. 문서 내에 자연스러운 흐름에 의해 배치되는 태그
Sectioning: 헤딩과 푸터의 범위를 결정 하는 요소. 아웃라인이 있다.
Heading: 섹션의 헤더를 정의하는 요소
Phrasing: 문서의 텍스트 혹은 텍스트를 꾸며주는 문단 내부 레벨로 마크업 하는 요소
Embedded: 이미지, 비디오, 플래시 등 외부 콘텐츠를 문서내에 표현하는 요소
Interactive: 사용자와 상호작용을 하는 요소. 대표적으로 폼 요소들

2. 시멘틱 마크업

시멘틱 마크업: 컴퓨터(브라우저)가 잘 이해할 수 있는 코드

앞서 배웠던 내용과 똑같다. 코드를 작성할 때 컴퓨터도 잘 이해할 수 있도록 시멘틱한 코드를 작성해야 한다.

3. HTML5 시멘틱 요소

HTML5에서 새로 생긴 Semantic 요소들

4. 블록 & 인라인

Blcok Level: 한 줄에 하나의 요소 표시. 부모요소의 영역을 가로로 채워서 표현됨. 양 옆으로 다른 요소가 배치되지 않게 박스를 생성함. div, h1-h6, p, ul, table 등
Inline Level: 한 줄에 여러개의 요소 표시. span, i, img, em, strong 등. 줄바꿈 되지 않고 양 옆으로 다른 요소가 배치될 수 있음. 인라인 레벨 요소인 <a>의 경우 자손으로 블록 베레의 요소가 들어올 수 있음.

나를 위한 개발일기 나를 위한 개발일기