[HTML] 시멘틱 마크업, 블록 & 인라인

 

시멘틱 마크업

 

시멘틱마크업이란?

✅ 시멘틱마크업은 POSH(Plain Old Semantic HTML)라고도 불리는데,

       단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다. 

✅ 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작된다.

 

시멘틱마크업 하기

🤔 어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까 ?

🧐 마크업 할 때 의미에 맞는 태그와 요소를 사용하고, 문서를 표현할 떄 구조화를 잘 해주는 등 정해진 약속을 잘 지키면된다.

 

HTML5 시멘틱 요소

 

HTML5에서 새로 생긴 Semantic 요소들

<article>         : 사이트 내 독립적 구분 게시판, 블로그 본문, 매거진, 뉴스 기사 등
<aside>           : 문서 주요 내용과 간접적으로 연관된 부분 표현. 사이드바, 콜아웃 박스 등
<figcaption> : Figure 콘텐츠에 대한 설명을 나타냄
<figure>          : 독립적인 콘텐츠 표현 Ex) 이미지, 삽화, 도표, 코드 등
<footer>         : 작성자, 저작권 정보, 관련 문서 내용 등을 표현
<header>       : 제목, 로고, 검색, 작성자 이름 등을 표현
<main>           : Body 태그의 주요 콘텐츠가 담김
<mark>           : 중요 표시, 하이라이트 부분 처리
<nav>              : 현재 페이지 내, 다른 페이지 이동 링크 표현 메뉴, 목차, 색인 등
<section>      : 사이트 내 독립적 구분, 더 적합한 의미를 가진 요소가 없을 때 사용, 보통은 헤딩 태그를 포함함
<time>            : 시간의 특정 지점 또는 구간 표현. 24시간 표기법 시간 표현, 검색 결과, 알림 기능 등

 

 

블록&인라인

 

블록 레벨 요소

✅ 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소이다.

✅ 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 된다.

✅ 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있다.

 

e.g. div, h1~h6, p, ul, li, table

 

인라인 레벨 요소

✅ 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소이다.

✅ 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있다.

✅ 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없다.

         → 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없다.

e.g. span, i, img, em, strong, a

 

 

✅ 예외

<a> 태그는 인라인레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있다.

 

 

---

학습을 위해 부스트코스 비전공자를 위한 HTML/CSS 강의를 보고  정리한 글입니다.

 

Reference

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS