콘텐츠모델이란?
HTML5모델은 HTML 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙이 있습니다.
요소는 이 규칙들을 준수해야하며, 반드시 HTML 권고안을 따라야합니다.
이런 규칙에 대해 비슷한 성격의 요소끼리 그룹화한 것이 콘텐츠 모델이며,
각각의 HTML 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다.
1. Metadata Model
콘텐츠의 스타일(표현), 스크립트(동작)을 실행하거나 다른 문서와의 관계 등의 정보를 포함하는 요소
metadata 태그 : meta, style, title, base, link, noscript, script
주로 <head> 태그 내에 들어가는 태그들이라는 것이 특징.
2. Flow Model
문서의 자연스러운 흐름에 의해 배치되는 요소들로 대부분의 태그들이 Flow에 포함됩니다.
(Metadata Model에 해당하는 일부 태그만 제외)
3. Sectioning Model
문서의 구조와 아웃라인에 영향을 주는 요소들입니다.
sectioning 태그 : article, aside, nav, section
4. Heading Model
Heading에는 각 section의 header를 정의하는 hedading 태그가 포함됩니다.
Heading 태그 : h1, h2, h3, h4, h5, h6
5. Phrasing Model
문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들입니다.
pharsing 태그 : 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
6. Embedded Model
외부 콘텐츠를 표현하는 요소들이 포함되며 오디오, 비디오, 이미지 등 멀티미디어 관련 요소들이 해당됩니다.
Embedded 태그 : audio, canvas, embed, iframe, img, math, object, svg, video
7. Interactive Model
사용자와 상호작용하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.
Interactive 태그 : a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls]
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
| HTML_블록&인라인(Block level/Inline level) (0) | 2020.03.20 |
|---|---|
| HTML_시멘틱마크업:Semantic (0) | 2020.03.19 |
| HTML_폼요소3 <label,fieldset,form> (0) | 2020.03.19 |
| HTML_폼요소 2 <SELECT,TEXTAREA,BUTTON> (0) | 2020.03.19 |
| HTML_폼요소 <INPUT> (0) | 2020.03.19 |
댓글