Nav바가 중앙에 고정되지 않고 옆으로 치우치는 문제 해결

[june0216]

🚀 NavBar가 오른쪽으로 쏠린 이유: 더 자세한 설명

✅ NavBar가 오른쪽으로 쏠린 이유는 부모 컨테이너의 크기(div)가 100%가 아니었기 때문이야.
✅ 부모 컨테이너가 작으면 NavBar도 그 크기를 따라 작아지고, 중앙 정렬이 되지 않음.

---

📌 1. NavBar가 부모 컨테이너의 크기를 따라가는 원리

📍 예제 코드 1 (부모의 너비가 390px으로 제한된 경우)

<div className="max-w-[390px] mx-auto">
  <NavBar />
</div>

• 여기서 max-w-[390px]가 적용됨 → 부모 컨테이너(div)의 최대 너비가 390px로 제한됨.
• NavBar도 부모 크기를 따라감 → 즉, NavBar의 너비도 390px로 제한됨.
• 결과적으로 NavBar가 중앙 정렬되지 않고, 남은 여백이 생기면서 오른쪽으로 쏠림.

✅ 이 경우 NavBar는 w-full이 없으면 화면 전체를 채우지 못하고 부모 크기(390px)만큼만 적용됨.
✅ 즉, 화면 전체(100%)가 아니라, 부모 컨테이너 크기(390px)에 맞춰 좁아지고 오른쪽으로 쏠리게 됨.

---

📌 2. 특정 max-width 값이 NavBar에 적용된 경우

📍 예제 코드 2 (NavBar 자체에 max-w-[390px]가 적용된 경우)

<NavBar className="max-w-[390px]" />

• 이 경우 NavBar 자체의 최대 너비가 390px로 제한됨.
• 부모 컨테이너가 w-full이어도, NavBar의 크기는 390px로 제한되므로 화면 전체를 채우지 못함.
• 그 결과 왼쪽 여백이 생기고, NavBar가 오른쪽으로 쏠림.

✅ NavBar는 부모 크기를 따라가므로, w-full이 없으면 원하는 크기보다 작아질 수 있음!

---

📌 3. 해결 방법: w-full 추가

<NavBar className="w-full" />

• 이제 NavBar의 너비가 부모 컨테이너의 크기와 같아짐 → max-w 제한이 사라짐.
• 부모 컨테이너가 화면 전체(100%)를 차지하면, NavBar도 자연스럽게 중앙에 배치됨.
• 왼쪽 여백이 사라지고, NavBar가 화면 가로 전체를 차지하게 됨.

✅ NavBar의 너비가 부모 크기보다 작아지는 걸 방지하려면 w-full을 추가해야 함!
✅ 부모 컨테이너가 max-w-[390px]이면 w-full이 없을 때 제한된 크기로 쏠릴 수 있음!

---

📌 최종 정리

상황	NavBar 크기	결과
부모가 max-w-[390px]인 경우	부모 크기(390px)를 따라감	NavBar가 좁아지고 오른쪽으로 쏠림
NavBar에 max-w-[390px] 설정된 경우	390px로 제한됨	화면 전체를 채우지 못하고 오른쪽으로 쏠림
NavBar에 w-full 추가한 경우	부모 컨테이너의 크기를 따라 100%로 확장	NavBar가 화면 가로 전체를 채우고 정렬됨

✅ 결론: w-full을 추가하면서 부모 크기를 따라가지 않고, 무조건 가로 전체를 채우게 되어 정렬 문제가 해결된 것! 🎯🚀