이번 포스팅은 부스트코스 콘텐츠 모델, 시멘틱마크업, 블록 & 인라인 파트를 포스팅합니다.
HTML요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있는데,
이런 규칙들을 그룹화 시킨 것이 콘텐츠 모델입니다.
1. Metadata 모델
Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다.
메타 태그, 타이틀 태그, 스타일 태그, 스크립트 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징입니다.
2. Flow 모델
Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.
Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.
3. Sectioning 모델
Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.
HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.
4. Heading 모델
h1, h2, h3, h4, h5, h6 등이 해당합니다.
5. Phrasing 모델
텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.
6. Embedded 모델
외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.
7. Interactive 모델
사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다
시멘틱 마크업 이란?
말 그대로, 의미론적인.
브라우저가 잘 이해 할 수 있는 코드입니다.
시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다.
어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까?
마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고 문서를 표현할 때는 구조화를 잘 해주는 것입니다
시멘틱 마크업을 잘해야 합니다.
HTML5 시멘틱 요소
▶ <main>
- 문서 내부의 핵심적인 Contents를 지칭할 때 사용.
- <body> 내의 주요 Contents를 나타냄.
▶ <article>
- 독립적으로 구분되거나 재사용 가능한 영역을 설정.
▶ <section>
- 문서의 일반적인 영역을 설정(↔ <article>은 독립성을 가지고 있는 영역이라는 의미).
- <section>은 일반적으로 영역을 나누는 용도로 활용됨. 또한 각 영역에는 어떠한 의미가 있기 때문에 제목을 포함.
- <div>와의 차이점. <div>는 의미를 가지지 않는 구역인 데 반해 <section>은 의미를 가지고 있기 때문에 제목이 포함됨.
- <article>의 경우 독립성이 유지되는 Contents. 제목을 가지고 있음.
▶ <aside>
- 문서에 별도 Contents를 지정함.
- 보통 배너, 광고 기타 링크 등의 사이드바(side bar)를 통한 핵심 Contents와는 관련이 없는 내용들에 해당.
블록 레벨 요소
한줄에 하나의 요소 표시
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다.
양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다.
인라인 레벨 요소
한줄에 여러개의 요소 표시
하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다.
라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다.
인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다.
즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다.
'개발 > Web Front-End' 카테고리의 다른 글
| [Web Fe] CSS정리하기 2 (0) | 2021.06.18 |
|---|---|
| [Web Fe] CSS 정리 하기 1 (+BootStrap) (0) | 2021.06.17 |
| [Web Fe] HTML 태그 (0) | 2021.06.16 |
| [Web Fe] HTML 이해하기. (0) | 2021.06.16 |
| [Web FE] 1. Web & Web Service 이해하기 (0) | 2021.01.28 |
