📚boostcourse의 웹 UI개발 강의 필기

강의 링크

📑콘텐츠모델, 시멘틱마크업, 블록 & 인라인

1. 콘텐츠 모델

- Metadata

: 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함
: 대부분 head태그 내에 들어간다는 것이 특징

👉 " 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

: 각 section의 header를 정의하는 태그가 포함

👉 " 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. 시멘틱 마크업

: 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 코드

👉 의미에 맞는 태그, 요소를 사용하여 문서를 구조화를 해주는 것이 중요
👉 인간과 기계가 모두 이해할 수 있는 것이 목표

<b>태그는 단순히 굵게 표현하는 태그이지만 
<strong> 태그는 중요하다는 의미를 가져 굵게 표현하는 것입니다. 
따라서 중요하는 의미를 포함할 때는 
<b>보다는 <strong>을 사용하는 것이 시멘틱한 마트업입니다.

- 시멘틱 요소ex)

👉 " <article> <aside> <figcaption> <figure> <footer> <header>
<main> <mark> <nav> <section> <time> " 

3. 블록&인라인

- Block Level

: 한 줄에 하나의 요소 표시

👉 " div, h1~h6, p, ul, li, table"

- Inline Level

: 한 줄에 여러개의 요소 표시
: 인라인 레벨은 블록 레벨의 자식이기 떄문에 블록 레벨을 자식으로 가질 수 없음
예외) a태그는 블록 레벨을 자식으로 가질 수 있음

👉 " span, i, img, em, strong, a"

 👉 차이점 확인하기
 
 ✍코드
<div style="background-color:yellow">블록-라벨</div>
<div style="background-color:yellow">블록-라벨</div>
<span style="background-color:yellow">인라인-라벨</span>
<span style="background-color:yellow">인라인-라벨</span>

✍결과