3. 콘텐츠모델, 시멘틱마크업, 블록
1) 콘텐츠 모델
- Metadata
- Flow
- Sectioning
- Heading
- Phrasing
- Embedded
- Interactive
METADATA
- 콘텐츠의 style(표현), script(동작)을 설정하거나, 다른 문서와의 관계 등의 정보를 포함하는 요소
- base, link, meta, noscript, script, style, title
- <head>에 포함됨
FLOW
- 문서에 사용되는 대부분의 요소
- a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1~h6, header, hgruop, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr
SECTIONING
- 헤딩과 푸터의 범위를 결정하는 요소. 아웃라인이 있음
- article, aside, nav, section
HEADING
- 섹션의 헤더를 정의하는 요소
- h1, h2, h3, h4, h5, h6
PHRASING
- 문서의 텍스트이며 문단 내부 레벨로 마크업하는 요소
- a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr
EMBEDDED
- 이미지, 비디오, 플래시 등 외부 콘텐츠를 문서 내에 표현하는 요소
- audio, canvas, embed, iframe, img, math, object, svg, video
INTERACTIVE
- 사용자와 상호작용을 하는 요소
- a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usermap], select, textarea, video[controls]
2) 시멘틱 마크업
- 시멘틱 == 의미론적인
- 컴퓨터(브라우저)가 잘 이해할 수 있는 코드
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
- 의미에 맞는 요소 사용
- 문서의 구조화
- 인간과 기계가 모두 이해할 수 있는 것이 목표
3) HTML5 시멘틱 요소
- <article>
- <aside>
- <figcaption>
- <figure>
- <fotter>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <time>
reference
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
4) 블록 & 인라인
- Block Level
- 한 줄에 하나의 요소 표시
- 일반적인 모든 요소 포함하며, div, h1~h6, p, ul, li, table 등
- Inline Level
- 한 줄에 여러개의 요소 표시
- block 레벨의 자식요소이며, span, i, img, em, strong 등
<a><div></div></a> (O)
<span><p></p></span> (X)
<div><a></a></div> (O)
<div><p></p></div> (O)
부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록
300x250
'LEARN > HTML | CSS' 카테고리의 다른 글
| [부스트코스] 4-2 CSS 이해하기 (0) | 2022.03.16 |
|---|---|
| [부스트코스] 4-1 CSS 이해하기 (0) | 2022.03.15 |
| [부스트코스] 2-2 HTML 태그 (0) | 2022.03.13 |
| [부스트코스] 2-1 HTML 태그 (0) | 2022.03.12 |
| [부스트코스] 1 HTML 이해하기 (0) | 2022.03.10 |
