콘텐츠
: 표준들과 규격들이 의미론적이고 직관적인 변화는 직간접적으로 웹사이트, 웹서비스 개발과 관리에 영향을 주게 된다.
- 콘텐츠 모델
메타데이터 콘텐츠, 플로우 콘텐츠, 구획 콘텐츠, 제목 콘텐츠, 구문 콘텐츠, 임베디드 콘텐츠, 인터렉티브 콘텐츠가 있다.
메타데이터 콘텐츠 (Metadata Content)
: 문서의 표현이나 동작을 설정하고, 다른 문서와의 관계 설정 후 다른 문서에 정보를 전달하는 콘텐츠이다.
- 종류
base, command, link, meta, noscript, script, style, title
위의 사진은 html5 문서의 기본으로 설정되어있는 구조이다.
<head> 태그 안의 <meta> 태그가 있는 것을 볼 수 있다.
이 메타데이터 콘텐츠는 위와 같이 <head> 영역 안에 들어가는 콘텐츠이고, 기능적인 부분이다.
플로우 콘텐츠 (Flow Content)
: 문서나 Application의 본문(body 태그) 안에서 사용되는 콘텐츠이다.
- 종류
a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, form, h1, h2, h3, h4, h5, h6, wbr text, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, il, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, textarea, time, ul, var, video
+ area (map요소의 자식요소인 경우)
+ style (scoped 속성이 있으면)
구획 콘텐츠 (Sectioning Content)
: Heading Content 와 footer(<footer>)를 정의하는 콘텐츠이다.
- 종류
article, aside, nav, section
제목 콘텐츠
: Sectioning Content(구획 콘텐츠)의 header 를 정의하는 콘텐츠이다.
- 종류
h1, h2, h3, h4, h5, h6
구문 콘텐츠 (Pharsing Content)
: 텍스트와 텍스트가 포함된 마크업을 정의하는 콘텐츠이다.
-종류
abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, dfn, em, embed, i, iframe, img, input, kbd, keygen, label, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, text
+ a (구문만을 포함하는 경우)
+ area (map 요소의 자식 요소인 경우)
+ del (구문만을 포함하는 경우)
+ ins (구문만을 포함하는 경우)
+ map (프레이징 콘텐츠만을 포함하는 경우)
임베디드 콘텐츠 (Embedded Content)
: 다른 리소스나 콘텐츠를 문서에 삽입하는 콘텐츠이다.
- 종류
audio, canvas, embed, iframe, img, math, object, svg, video
인터렉티브 콘텐츠 (Interactive Content)
: 사용자와의 상호작용을 위해 사용되는 콘텐츠이다.
- 종류
a, button, detail, embed, iframe, select, textarea, keygen, label
+ audio (controls 속성이 있으면)
+ img (usemap 속성이 있으면)
+ input (type 속성이 hidden 상태가 아니면)
+ menu (type 속성이 toolbar 상태면)
+ object (usemap 속성이 있으면)
+ video (controls 속성이 있으면)
자세한 내용들은 앞으로 하나씩 살펴보도록 하겠습니다 !
'Front-End > HTML 5' 카테고리의 다른 글
| [프론트엔드][html5] 6. 글자태그 (0) | 2021.06.29 |
|---|---|
| [프론트엔드][html5] 5. html 파일 생성/출력, 주의사항 (0) | 2021.06.28 |
| [프론트엔드][html5] 3. html 기본구조, 주석 (0) | 2021.06.28 |
| [프론트엔드][html5] 2. VisualStudioCode + Live Server 설치 (0) | 2021.06.27 |
| [프론트엔드][HTML5] 1. HTML5 소개 (0) | 2021.06.27 |
