-
🍾 HTML, CSS 복습 (2) 콘텐츠 모델, 시멘틱 마크업SOJU 2기 🍾 2023. 4. 10. 15:33
~이어서~
(1)에 이어서 콘텐츠모델, 시멘틱 마크업에 대해 학습한 내용을 기록한다.
콘텐츠 모델 ?
요소들이 가지고 있는 성격에 따라서 종류를 정의하는 규칙들이 존재한다.
요소는 이 규칙들을 준수해야 한다.
그리고, 반드시 HTML5 권고안을 따라야 한다.
규칙들을 기준으로 비슷한 성격의 요소들끼리 그룹화한 것을 콘텐츠 모델이라고 한다.
각각의 요소들은 하나 혹은 여러 개의 콘텐츠 모델에 속하게 된다.
Metadata
콘텐츠의 스타일, 동작을 설정.
다른 문서와의 관계 등 정보를 포함하는 요소들이 포함되어 있다.
메타 태그, 타이틀 태그, 스타일 태그, 링크 태그 등 ... <head> 안에 들어간다는 특징을 가진다.
“ base, link, meta, noscript, script, style, title “
Flow
문서의 자연스러운 흐름에 의해 배치되는 요소들 (좌->우, 위->아래 ...)
대부분의 요소가 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 “ (HTML5에서 새롭게 생김)
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”
블록 / 인라인
콘텐츠 모델로 나누기 이전에는 블록레벨요소 / 인라인레벨요소로 나누었다.
블록 레벨 요소
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소.
박스 위아래로 줄 바꿈이 생긴다.
인라인 레벨 요소
하나의 라인 안에서 자신의 내용만큼의 박스를 만든다.
라인의 흐름을 끊지 않으며, 요소 앞 뒤로 줄 바꿈이 생기지 않는다.
인라인 레벨 요소는 블록 레벨의 자식으로 분류되므로 자손으로 블록 레벨 요소를 가질 수 없다.
⚠️ 예외
HTML5에서부터는 <a> 는 인라인 레벨 요소이지만 자손으로 블록 레벨 요소를 가질 수 있다.
시멘틱 마크업
시멘틱 마크업은 왜 필요한가?
인터넷 마케팅 방식 중 한 가지 방법으로 "검색 엔진 최적화" 라는 방법에 사용한다.
검색엔진 최적화란?
HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트를 구성, 검색 결과 상위에 나올 수 있도록 하는 작업이다.
👉 즉, 웹페이지 내용 파악, 검색엔진 노출도 향상을 위해서는 HTML 요소를 적절하게 사용한 시멘틱 한 마크업이 필요하다.
시멘틱 마크업은 어떻게 해야 하는가?
결론부터 말하자면 정해진 약속을 잘 지키면 된다.
마크업 할 때 의미에 맞는 태그, 요소를 사용하고 문서를 표현할 때에는 구조화를 잘해준다.
예를 들어, 문서 안 어떠한 글자에 중요하다는 의미의 강조 표시를 하고 싶다면 <b> 와 <strong> 중 무엇을 써야 할까.
<strong> 이 더 적합하다고 할 수 있다.
b태그는 그저 글꼴을 진하게 표시해 주는 데에 그치지만, strong 태그는 중요하다는 의미를 지녔기 때문이다.
비슷하게 i / em, u,s / ins,del ... 등이 있다.🔗 HTML5 시멘틱 요소에는 어떤 것이 있는가?
- <article> : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 (게시판 글, 블로그 글, 매거진 뉴스 기사 등)
- <aside> : 문서의 주요 내용과 간접적으로만 연관된 부분. (사이드 바, 콜아웃 박스 부분)
- <figure> : 독립적인 콘텐츠를 표현. 부록으로 이동해도 문제없는 이미지, 삽화, 도표, 코드 조각 등을 맡는다.
- <figcaption> : 부모 <figure> 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례.
- <footer> : 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다. 가장 가까운 구획 콘텐츠의 푸터를 나타낸다.
- <header> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름 등.
- <main> : 문서의 주요 콘텐츠. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어짐. main 요소는 문서의 유일한 내용이어야 한다.
- <mark> : 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트 한 부분. 주의 : 스크린리더가 기본값에서는 mark 의 존재를 표현하지 않는다. css 에서 ::before, ::after 의사요소를 사용하면 읽도록 할 수 있다. 👉MDN
- <nav> : 서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획. 메뉴, 목차, 색인.
- <section> : HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용. 항상 제목을 가지고 있는 건 아니다. (h2 ... 등) 단순한 스타일링이 목적인 경우에는 div를 사용한다. 문서 요약에 있어 해당 구획이 논리적으로 나타나야 한다면 section을 사용한다.
- <time> : 시간의 특정 지점 또는 구간을 나타낸다. datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있다.
그밖에 백여 개 정도의 요소들이 있다고 한다 ... 😱
'SOJU 2기 🍾' 카테고리의 다른 글
📝 JavaScript 기초 강좌 기록 (하) (2) 2023.04.25 📝 JavaScript 기초 강좌 기록 (상) (0) 2023.04.25 🍾 HTML, CSS 복습 (1) (0) 2023.04.10 Git, Github 기초 뽀개기 👊 (2) (0) 2023.04.01 Git, Github 기초 뽀개기 👊 (0) 2023.03.26