[부스트코스] 웹 UI 개발 : 콘텐츠모델, 시멘틱마크업, 블록 & 인라인

1) 콘텐츠 모델

Content Models

1. Metadata
2. Flow
3. Sectioning
4. Heading
5. Phrasing
6. Embedded
7. Interacitve

 

 

Metadata

• 콘텐츠의 styleI(표현), script(동작)을 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소

base, link, meta, noscript, script, style, title

 

 

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

 

 

 

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[usemap], select, textarea, video[controls]

 

 

 

2) 시멘틱 마크업

시멘틱 마크업

• POSH(Plain Old Semantic HTML), 오래된 의미론적 HTML
• 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것
• 의미에 맞는 요소를 사용
• 문서의 구조화
• 인간과 기계가 모두 이해할 수 있는 것이 목표

 

시멘틱 마크업 하기

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

span, i, img, em, strong, a  등

 

 

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>