1. 콘텐츠 모델
html 요소들의 성격 종류를 정의하는 규칙들을 그룹화 시켜 놓은 것
- metadata model
콘텐츠의 style 및 script 설정, 다른 문서와의 관계 등 정보를 포함하는 요소
: base, link, meta, noscript, script, style, title
대부분 <head> 태그에 사용
- flow model
문서에 사용되는 대부분의 요소
: 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 model
heading, footing 과 같은 문서 구조, 아웃라인 관련 요소
: article, aside, nav, section
- heading model
섹션의 헤더를 정의하는 요소
:h1~h6
- phrasing model
문서의 텍스트를 꾸며주는 문단 내부 레벨 요소
: 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, wb
- embedded model
이미지, 비디오 등 외부 콘텐츠를 포함하는 요소
: audio, canvas, embed, iframe, img, math, object, svg, video
멀티미디어 관련 요소들이 주를 이룸
phrasing model 안에 포함되어 있음
- interactive model
사용자와 상호작용하는 요소
: a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls]
2. 시멘틱 마크업
시멘틱 : 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것 <<<<의미>>>>
<b>굵은</b> vs <strong>중요한</strong>
결과적으로 같은 모습으로 표현되나
<b>는 의미없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미
=> <strong>을 사용하는 것이 적절하고 시멘틱한 마크업
- <article> : 내용을 내부에서 구분하여 정의 내림
- <aside> : 주요 내용과 간접적으로만 연관된 부분 표현, 사이드바 혹은 콜아웃 박스로 주로 표현
- <figcaption> : <figure> 내 콘텐츠에 대한 설명/범례
- <figure> : 독립적인 콘텐츠를 표현
- <footer> : 꼬릿말(구획의 작성자, 저작권 정보, 관련 문서)
- <header> : 머릿말(소개 및 탐색을 위한 제목(h1~2) 시멘틱 마크업)
- <main> : 본문, 주요 콘텐츠
- <mark> : 현재 맥락에 관련이 깊거나 중요한 부분 하이라이트
- <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구문 생성(<li> 활용)
- <section> : 내용을 내부에서 구획화
- <time> : 시간의 특정 지점 또는 구간 표현, datetime 이라는 특성으로 유효한 날짜 구문 마크업 가능
3. 블록 & 인라인
- 블록 레벨 요소
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소
양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생김
블록 레벨 요소는 일반적인 모든 요소를 포함할 수 있음
- 인라인 레벨 요소
하나의 라인 앞에서 자신의 내용만큼의 박스를 만드는 요소
라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있음
인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없음
예외) <a>는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있음
'FE' 카테고리의 다른 글
| 반응형 웹 기초 (0) | 2023.03.07 |
|---|---|
| [HTML&CSS 기초] 단위/ 배경/ 박스모델 (0) | 2023.03.04 |
| [HTML&CSS 기초] CSS 이해 (0) | 2023.03.04 |
| [HTML&CSS 기초] HTML 태그 (0) | 2023.03.04 |
| [HTML&CSS 기초] HTML 이해 (0) | 2023.03.04 |