10. CSS_목록 요소를 가로로 배치하기

#topMenu > li {
  display: inline;   /* 블록 요소(li)를 인라인으로 변경 → 가로로 나열 */
  padding: 30px;     /* 메뉴 간격 */
}

 

 

• <li>는 원래 block 요소 → 세로로 한 줄 전체 차지.
• display:inline; 으로 바꾸면 글자처럼 옆으로 나란히 배치
• 그래서 메뉴 항목들이 가로로 쭉 나열.

---

⚠️ 하지만 inline의 한계

• inline은 width, height 적용 불가
• padding도 위아래는 적용이 애매하고, 좌우만 잘 먹음

그래서 실제 메뉴 만들 땐 inline 대신 inline-block을 더 많이 씁니다.

 

---

📌 개선된 버전 (inline-block)

#topMenu > li {
  display: inline-block;  /* 옆으로 나란히 + width/height 적용 가능 */
  padding: 20px 30px;     /* 위아래/좌우 간격 */
  background-color: pink;
  margin: 0 5px;          /* 메뉴 사이 간격 */
}

 

👉 이렇게 하면 각 메뉴 버튼처럼 네모 박스 형태로 나오고, hover 효과도 깔끔하게 적용