연습 — 시맨틱 nav + section + article 레이아웃 완전 정리

 

 

Web Development · HTML5 Semantic

연습 문제 풀이 —
nav + section + article 시맨틱 레이아웃

시맨틱 태그 구조와 float 메뉴를 함께 다루는 종합 연습

시작 연습 문제와 해답 코드

주제는 "강아지 용품 준비하기" 페이지. 메뉴(nav) + 본문(section + article) + 푸터(footer)를 시맨틱 태그로 구성하고, 메뉴 항목은 가로로 정렬, 각 항목 왼쪽에 보라색 막대를 표시하는 디자인.

<style> a:link { text-decoration: none; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { float: left; font-size: 1.5em; padding-left: 7px; margin: 0 15px 20px 0; border-left: 5px solid #990066; } section { clear: both; } section article { padding-left: 10px; margin-bottom: 10px; border-top: 1px #a6a6a6 dashed; border-bottom: 1px #a6a6a6 dashed; } </style> <nav> <ul> <li><a href="#">애완견 종류</a></li> … </ul> </nav> <section id="content"> <h2>강아지 용품 준비하기</h2> <article> <h3>강아지 집</h3> <p>…</p> </article> … </section> <footer></footer>

실제 출력 미리보기

• 애완견 종류
• 입양하기
• 건강돌보기
• 더불어살기

강아지 용품 준비하기

강아지 집

강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 박음질·세탁 간편한 제품이 좋습니다.

강아지 먹이

꼭 어린 강아지용 사료를 선택하세요. 사람 음식은 비만 위험이 높아집니다.

Copyright 2012 funnycom

용어 용어 정리

<nav>주요 네비게이션 메뉴 영역

<section>주제별 묶음 — 본문 단위

<article>독립적으로 의미 있는 글 1개

<footer>페이지/섹션의 꼬리 영역

a:link방문 안 한 링크의 가상 클래스

text-decoration: none링크의 밑줄 제거

list-style-type: noneul의 동그라미·숫자 표시 제거

border-left왼쪽 테두리 — 막대 디자인 활용

---

1 nav ul li가 가로로 늘어서는 원리

li는 기본 블록 요소라 한 줄씩 차지한다. float: left를 주면 옆으로 차곡차곡 붙는다 — 메뉴 만드는 가장 전통적 방법.

※ section에 clear: both가 필수. 메뉴의 float이 본문에 영향 주지 않도록 끊어줘야 함.

---

2 ul 기본 스타일 제거 패턴

nav ul { list-style-type: none; /* • 동그라미 제거 */ margin: 0; /* 기본 위·아래 여백 제거 */ padding: 0; /* 기본 왼쪽 들여쓰기 제거 */ }

이 3종 세트는 메뉴의 ul을 만들 때 거의 항상 함께 쓴다. 셋 중 하나라도 빠지면 의도와 다른 결과가 나옴.

---

3 border-left로 막대 만들기

각 메뉴 항목 왼쪽에 보라색 5px 막대를 만든 트릭. 별도 div나 :before 의사 요소 없이 border-left 한 줄로 깔끔하게.

border-left: 5px solid #990066; ─┬─ ──┬── ──┬── │ │ └─ 보라색 │ └─ 실선 └─ 두께 5px (디자인 포인트)

---

4 article 위·아래 점선

section article { border-top: 1px #a6a6a6 dashed; border-bottom: 1px #a6a6a6 dashed; }

각 article을 위·아래 점선으로 감싸 문단 구분을 명확히 한다. 카드 디자인과는 다르게 왼·오른쪽은 열려 있어 본문 흐름은 유지.

※ 인접한 article 두 개가 서로 만나는 부분 — 위 article의 bottom과 아래 article의 top이 두 줄로 보임. 깔끔하게 하려면 article + article { border-top: none; } 같은 인접 셀렉터.

---

반응형

5 시맨틱 태그 vs div

div 남발

<div class="nav"> <div class="content"> <div class="article">
의미 정보 없음. SEO·접근성 점수 낮음.

시맨틱 태그

<nav> <section> <article> <footer>
구조 의미 명확. 검색·스크린 리더가 활용.

---

6 자주 하는 실수

실수	증상	해결
section에 clear 누락	메뉴 float이 본문 침범	section { clear: both }
list-style-type 누락	동그라미가 그대로	nav ul { list-style: none }
ul에 padding 안 뺌	왼쪽이 떠 있음	padding: 0
article 사이 두 줄 점선	border 겹침	article + article { border-top: none }
모든 박스에 div	시맨틱 부족	의미 있는 곳은 nav, section, article 사용

---

핵심 한 줄 요약

시맨틱 태그nav · section · article · footer로 구조 의미 부여

메뉴 가로 정렬li에 float: left + section에 clear: both

ul 초기화list-style + margin + padding 3종 세트

border-left 트릭메뉴 막대 디자인 한 줄로

article 점선위·아래 dashed로 문단 구분

Tags

#시맨틱태그 #semantic-html #nav #section #article #footer #header #ul-li #float-left #list-style #clear-both #border-left #HTML5 #CSS레이아웃 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

시맨틱태그, semantic-html, nav, section, article, footer, header, ul-li, float-left, list-style, clear-both, border-left, HTML5, CSS레이아웃, 웹개발, 티스토리