시멘틱 태그와 레이아웃 태그

✅ 시멘틱 태그와 레이아웃 태그?

HTML 작성 시 가장 기본이 되는 태그들. HTML 구조를 잡을 때 사용.

 

📦 div: 가장 많이 쓰는 기본 박스. 영역을 만들어 주는 태그. 레이아웃을 분리하는 역할을 한다.

• 컨테이너 역할을 하는 태그
• 가장 많이 쓰이는 태그 (80%~)

 

🧠 시멘틱 웹 태그: 의미를 가진 div. 검색엔진 최적화(SEO)나 접근성 측면에서 좋음.

시멘틱 태그명	의미/용도
<header>	사이트/페이지 상단
<nav>	메뉴/네비게이션 영역
<main>	페이지 주요 콘텐츠 영역
<section>	주제별 구역
<article>	독립적 콘텐츠 블록
<aside>	사이드바, 광고, 링크 등 부가영역
<footer>	하단 정보(저작권, 연락처 등)

 

<header>Header tag</header>
<main>Main tag</main>
<footer>Footer tag</footer>

결과 : 

Header tag

Main tag

Footer tag

 

 

📏 태그의 분류 (block vs inline vs inline-block)

HTML 태그는 출력 형태에 따라 3가지로 나뉜다.

 

🔹Block

• 태그혼자 한 라인을 차지
• 새 라인에서 시작
• 레이아웃 구성용
• ex) div, p, h1~h6, section

<div>Block Element</div><div>Block Element</div><div>Block Element</div>

결과 :

Block Element

Block Element

Block Element

 

🔹Inline

• 한 라인에서 계속 유지되는 태그
• 컨텐츠 자체가 태그의 크기
• 가로/세로 길이조절 불가능
• 여백 지정 불가능
• 폰트 스타일만 조절 가능
• ex) span, b, i, ins

<span>Inline Element</span><span>Inline Element</span><span>Inline Element</span>

결과 :

Inline ElementInline ElementInline Element

 

🔹Inline-block

• 한 라인에서 유지되는 태그
• 가로, 세로 조절이 가능
• 여백 지정 가능
• input, img, button

<input type="text" placeholder="Your name">
<button style="padding: 10px; width: 100px;">Click Me</button>

결과 :

 

레이아웃 짤 땐 div 중심으로 잡되, 의미가 명확할 땐 시멘틱 태그 적극 활용.
태그의 display 속성(Block, Inline, Inline-block)도 이해하고 써야 CSS 스타일 줄 때 헷갈리지 않음!