공부일기/부스트코스

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

Youngbin Kim 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>의 경우 자손으로 블록 베레의 요소가 들어올 수 있음.