Boostcourse[웹UI] 3.콘텐츠모델, 시멘틱마크업, 블록 & 인라인

1.시멘틱 마크업

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

위 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현되나 그 의미가 같지는 않습니다.

<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닙니다.

<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것입니다.

따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시멘틱한 마크업입니다.

 

이외에 <i>는 단순히 기울어진 글자를 표현하지만, <em>은 글자의 특정 부분을 강조하는 의미를 지닙니다.

<u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나

삭제가 되었다는 의미를 지닙니다.

 

 

2.추가 태그

• <article> : 본문의 주 내용이 들어가는 공간을 의미
• <aside> : 내부에 위치하는 내용이 외에 사이드에 손재하는 내용을 의미
• <figcaption> : <figure> 태그의 캡션(설명)을 정의한다.
• <figure> : 그림이나 도표, 사진과 같은 독립적인 콘텐츠들을 명시
• <footer> : 문서, 구역의 바닥 글을 정의
• <header> : 소개 내용이나, 목록과 같은 링크들의 묶음을 표시
• <main> : 문서의 주요 내용을 지정할 대 사용한다. 단, 고유한 내용만을 지정할 수 있고 반복되는 내용을 포함해서는 안된다.
• <mark> : 텍스트의 일부를 강조
• <nav> : 문서 네의 링크들의 집합, 내비게이션을 의미
• <section> : 문서의 구역을 정의
• <time> : 특정 시간이나 날자를 정의

---

• <article> : 내용을 내부에서 구분하여 정의 내림 
• <aside> : 주요 내용과 간접적으로만 연관된 부분 표현, 사이드바 혹은 콜아웃 박스로 주로 표현 
• <figcaption> : <figure> 내 콘텐츠에 대한 설명/범례
• <figure> : 독립적인 콘텐츠를 표현
• <footer> : 꼬릿말(구획의 작성자, 저작권 정보, 관련 문서)
• <header> : 머릿말(소개 및 탐색을 위한 제목(h1~2) 시멘틱 마크업)
• <main> : 본문,  주요 콘텐츠
• <mark> : 현재 맥락에 관련이 깊거나 중요한 부분 하이라이트
• <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구문 생성(<li> 활용)
• <section> : 내용을 내부에서 구획화
• <time> : 시간의 특정 지점 또는 구간 표현, datetime 이라는 특성으로 유효한 날짜 구문 마크업 가능

 

3.block vs inline

block level : 한 줄에 하나의 요소 표시

ex) div,h1~h6, p, ul, li, table 등

inline level : 한 줄에 여러개 요소 표시 가능

ex) span, i, img, em, strong 등