1. HTML&CSS 기초 - (3) 콘텐츠모델, 시멘틱마크업, 블록 & 인라인

※ 다음 강좌를 들으며 정리한 내용입니다.

www.edwith.org/boostcourse-ui/joinLectures/19142

[부스트코스] 웹 UI 개발 강좌소개 : edwith

 

1) 콘텐츠 모델

- HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다.

요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다. 

 

- 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며,

각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다.

 

- Content Models 의 7 분류

1. Metadata Content : 콘텐츠의 style(표현), script(동작)을 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소, 대부분이 head태그내에 들어가는 태그들
2. Flow Content : 문서에 사용되는 대부분의 요소
3. Sectioning Content : 헤딩과 푸터의 범위를 결정하는 요소, 아웃라인이 있음
4. Heading Content : 섹션의 헤더를 정의하는 요소
5. Phrasing Content : 문서의 텍스트이며 문단 내부 레벨로 마크업하는 요소
6. Embedded Content : 이미지, 비디오, 플래시 등 외부 콘텐츠를 문서내에 표현하는 요소
7. Interacitve Content : 사용자와 상호작용을 하는 요소

2) 시멘틱 마크업

- 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다.

 

- 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다. 구체적으로 설명하자면 마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고 문서를 표현할 때는 구조화를 잘 해주는 것입니다.

 

- 정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 됩니다.

 

ex) 같은 모습으로 표현되나 의미가 같지 않은 예시들

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

 

3) HTML5 시멘틱 요소

- HTML5에서 새로 생긴 Sematic 요소들입니다.

• <article>
• <aside>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <time>

4) 블록 & 인라인

- 블록 레벨 요소와 인라인 레벨 요소는 시각적으로 차이가 아주 명확하므로 지금도 두 가지로 많이 구분합니다.

 

- 블록 레벨 요소 : 한 줄에 하나의 요소 표시 (div, p ,h)

- 인라인 레벨 요소 : 한 줄에 여러개의 요소 표시 ( span, a)

 

- 기본적으로 인라인 레벨 요소가 블록 레벨 요소를 자손으로 가질 수 없다. 단, a는 예외

 

- 예외로 <h1> ~ <h6>(headings) 요소와 <p> 요소는 블록 레벨 요소지만, 내부 요소로 Phrasing Content만 허용합니다.