🎓 CSS 실전 예제: 가로 네비게이션 메뉴 만들기

display: inline-block, padding, hover 효과까지 — 실무에서 자주 쓰이는 네비게이션 메뉴를 단계별로 만들어봅니다.

---

📌 목차

1. 완성 결과물 미리보기
2. HTML 구조 잡기
3. CSS 단계별 스타일링
4. 핵심 학습 포인트
5. 전체 코드

---

1. 완성 결과물 미리보기 👀

회색 배경의 가로 메뉴 바 안에 4개의 메뉴 아이템이 나란히 배치되고, 마우스를 올리면 해당 아이템이 검정 배경 + 흰 글씨로 바뀝니다.

---

2. 📝 HTML 구조 잡기

<!-- nav > section > div*4 > a[href="#"]{메뉴 아이템 $} -->

<!-- 메뉴 박스 (메뉴를 감싸는 부모) -->
<nav>
    <!-- 메뉴 -->
    <section>
        <!-- 메뉴 아이템 -->
        <div>
            <a href="#">메뉴 아이템 1</a>
        </div>
        <div>
            <a href="#">메뉴 아이템 2</a>
        </div>
        <div>
            <a href="#">메뉴 아이템 3</a>
        </div>
        <div>
            <a href="#">메뉴 아이템 4</a>
        </div>
    </section>
</nav>

🔍 구조 한눈에 보기

nav                   ← 메뉴 전체를 감싸는 박스 (가운데 정렬 담당)
 └── section          ← 메뉴 영역 (배경색, 둥근 모서리 담당)
      ├── div         ← 메뉴 아이템 (가로 배치 담당)
      │    └── a      ← 클릭 가능한 텍스트 (padding, hover 담당)
      ├── div
      │    └── a
      ├── div
      │    └── a
      └── div
           └── a

💡 왜 이렇게 나눌까요?
각 태그에 역할을 분리하면 나중에 스타일 수정이 훨씬 쉬워집니다.
nav는 정렬만, section은 배경만, div는 배치만, a는 클릭 영역만 담당합니다!

---

3. 🎨 CSS 단계별 스타일링

STEP 1 — 노멀라이즈: a 태그 기본값 제거

/* 브라우저 기본 스타일 초기화 */
a {
    color: inherit;          /* 파란색 제거 → 부모 색상 상속 */
    text-decoration: none;   /* 밑줄 제거 */
}

⚠️ 이 작업을 빠뜨리면?
a 태그가 파란색 + 밑줄로 나타나 디자인이 깨집니다.
CSS 작업 시 가장 먼저 노멀라이즈를 적용하세요!

---

STEP 2 — nav: 메뉴 전체 가운데 정렬

nav {
    text-align: center;
}

💡 text-align: center는 inline-block 자식 요소도 가운데로 정렬합니다.
section을 inline-block으로 설정했기 때문에 이 한 줄로 메뉴 전체가 가운데로 옵니다.

---

STEP 3 — section: 메뉴 배경 + 크기 줄이기

nav > section {
    background-color: #dfdfdf;  /* 회색 배경 */
    display: inline-block;      /* 너비를 내용물에 맞게 축소 */
    border-radius: 5px;         /* 모서리 살짝 둥글게 */
    padding: 0 10px;            /* 좌우 여백 */
}

🤔 display: inline-block을 쓰는 이유?
기본값인 display: block은 너비가 화면 전체를 차지합니다.
inline-block으로 바꾸면 내용물 크기에 맞게 너비가 줄어듭니다.

---

STEP 4 — div: 메뉴 아이템 가로 배치

nav > section > div {
    display: inline-block;  /* 아이템들을 한 줄에 나란히 배치 */
}

💡 div는 기본적으로 block 요소라 세로로 쌓입니다.
inline-block으로 바꿔야 가로로 나란히 배치됩니다.

---

STEP 5 — a: 클릭 영역 확장

nav > section > div > a {
    padding: 10px;      /* 클릭 가능한 영역 확장 */
    display: block;     /* padding이 제대로 적용되게 */
}

⚠️ display: block이 없으면?
a 태그는 기본적으로 inline 요소라 padding의 상하 값이 제대로 적용되지 않습니다.
반드시 display: block을 함께 써야 합니다!

---

STEP 6 — :hover: 마우스 올렸을 때 효과

nav > section > div:hover > a {
    background-color: black;
    color: white;
}

💡 선택자 읽는 법
div:hover > a = "마우스가 올려진 div의 직계 자식인 a"
div에 hover를 걸고, 실제 스타일은 a에 적용하는 패턴입니다.
이렇게 하면 텍스트뿐 아니라 padding 영역 전체에 배경색이 채워집니다!

---

4. 📖 핵심 학습 포인트

🍯 꿀팁: a 태그에는 padding + display: block

버튼처럼 동작하는 링크를 만들 때 가장 중요한 규칙입니다.

a {
    padding: 10px;       /* 클릭 영역 확장 */
    display: block;      /* padding 상하 적용을 위해 필수 */
}

상황	padding 적용 여부
display: inline (기본)	상하 padding ❌ 제대로 안 먹힘
display: block	상하 padding ✅ 정상 적용
display: inline-block	상하 padding ✅ 정상 적용

🔍 inline-block 정리

속성	특징
display: block	너비 100%, 세로로 쌓임
display: inline	내용물 크기, 가로 배치, padding 상하 ❌
display: inline-block	내용물 크기, 가로 배치, padding 상하 ✅

---

5. 전체 코드 📝

HTML

<nav>
    <section>
        <div><a href="#">메뉴 아이템 1</a></div>
        <div><a href="#">메뉴 아이템 2</a></div>
        <div><a href="#">메뉴 아이템 3</a></div>
        <div><a href="#">메뉴 아이템 4</a></div>
    </section>
</nav>

CSS

/* 노멀라이즈 */
a {
    color: inherit;
    text-decoration: none;
}

/* 메뉴 박스 — 가운데 정렬 */
nav {
    text-align: center;
}

/* 메뉴 — 배경, 크기 축소 */
nav > section {
    background-color: #dfdfdf;
    display: inline-block;
    border-radius: 5px;
    padding: 0 10px;
}

/* 메뉴 아이템 — 가로 배치 */
nav > section > div {
    display: inline-block;
}

/* 메뉴 아이템 텍스트 — 클릭 영역 확장 */
nav > section > div > a {
    padding: 10px;
    display: block;
}

/* hover 효과 */
nav > section > div:hover > a {
    background-color: black;
    color: white;
}

---