안녕하세요 😊
지금까지 HTML로 여러 가지 태그들을 알아봤습니다.
이번엔 웹페이지를 보기 좋게, 정리정돈할 수 있도록 도와주는 **‘구조 태그’**를 알아보겠습니다!
🧱 구조 태그가 왜 필요할까?
HTML 문서는 위에서 아래로 줄줄이 작성되기 때문에,
내용을 논리적으로 나누지 않으면
읽는 사람도, 스타일을 입히는 사람도 혼란스러워져요!
그래서 HTML에서는 구역을 나눠주는 구조 태그를 사용합니다.
🔖 대표적인 구조 태그 소개
| 태그 | 용도 |
| <div> | 아무 의미 없는 구역 나누기용 박스 |
| <section> | 문서 안의 구분되는 주제 영역 |
| <article> | 독립적인 콘텐츠 (예: 뉴스 글, 블로그 글) |
| <header> | 문서나 섹션의 머릿글(제목, 메뉴 등) |
| <footer> | 문서나 섹션의 꼬리말(저작권, 연락처 등) |
| <main> | 페이지의 핵심 콘텐츠 |
| <nav> | 메뉴, 네비게이션 영역 |
| <aside> | 사이드바, 광고처럼 보조 정보 영역 |
🧩 실전 예제로 구조 잡아보기
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
</head>
<body>
<header>
<h1>나의 웹사이트</h1>
<nav>
<ul>
<li>홈</li>
<li>소개</li>
<li>문의</li>
</ul>
</nav>
</header>
<main>
<section>
<h2>나에 대해</h2>
<p>안녕하세요! 저는 웹개발을 배우고 있어요.</p>
</section>
<article>
<h2>최근 글</h2>
<p>HTML 구조 태그를 배우고 있어요!</p>
</article>
</main>
<footer>
<p>© 2025 나의 웹사이트</p>
</footer>
</body>
</html>📝 알아두면 좋은 팁
- <div>는 가장 많이 쓰이지만 의미 없는 박스예요!
👉 가능하면 section, article 같은 의미 있는 태그를 써주는 게 좋아요. - CSS로 스타일을 줄 때도 의미 있는 구조가 있으면 더 쉬워져요!
💬 한 줄 요약!
구조 태그는 웹페이지를 논리적으로 나누는 도구!
깔끔한 코딩의 첫 걸음은 정돈된 구조부터 시작합니다 🧼
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS 기초] 반응형 웹이란? 미디어쿼리(Media Query)로 모바일에도 잘 보이게 만들기! (0) | 2025.05.07 |
|---|---|
| [구조화 마스터] HTML 목록 만들기, 표 만들기, 입력 폼까지 완전정복! (0) | 2025.05.05 |
| HTML 텍스트, 제목, 링크, 이미지 넣기! (0) | 2025.05.04 |
| HTML 문서 구조 완전정복! <html>, <head>, <body>는 뭐야? (0) | 2025.04.29 |
| HTML이란 무엇일까? 누가 왜 쓰는 걸까? (0) | 2025.04.24 |