콘텐츠모델
콘텐츠 모델
html5 에서는 html 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙이 있다.
이러한 규칙들을 그룹화 시켜놓은 것이 콘텐츠 모델이다.
metadata
콘텐츠의 stylem 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, hgroup, 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
문서 내에 자연스러운 흐름에 의해 배치되는 태그
metadata에 해당되는 일부 태그들만 flow에서 제외되며 요소 대부분이 flow에 포함됨
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
사용자와 상호작용을 하는 요소 ex)폼요소
a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls]
시멘틱 마크업
시멘틱 마크업
컴퓨터(브라우저)가 잘 이해할 수 있는 코드
의미에 맞는 요소를 사용
문서의 구조화
인간과 기계가 모두 이해할 수 있는 것이 목표
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
<b>는 의미 없이 텍스트를 굵게 표현하는 태그지만 <strong>은 중요하다는 의미를 가진다.
중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된다.
따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절한 시멘틱 마크업이다.
블록 & 인라인
블록 레벨 요소
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소
양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생긴다.
div, p, h …
인라인 레벨 요소
하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소
라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않음
인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없다.
<a> 요소는 인라인 요소지만 자손으로 블록 레벨 요소를 가질 수 있다.
span, img, a …