📌 [CSS] COZA Fix 이력 (계속 갱신)

1️⃣ 메인메뉴 로고가 오른편으로 밀려가던 문제

다른 걸 고치려다가 발생한 문제.

❌ 문제 원인

• COZA 로고 이미지가 반응형으로 축소되는 문제

  min-width: 100%;
  min-height: 100%;

  위처럼 값을 줘서 이미지 크기를 유지하려 했는데,
  결과적으로 축소 문제는 해결됐지만 메뉴가 밀려나는 문제가 생김.
• 그리고 flex: 2; 값을 준 것도 영향을 줬음.
  솔직히 왜 그렇게 했는지 기억이 안 남. 

✅ 해결 방법

.logo {
  margin: 10px;
  width: 20%; 
}

.logo img {
  max-width: 100%;
  height: auto;
}

이렇게 수정했더니 문제 해결됨.

---

🧐 추가 설명

.logo의 width 속성과 .logo img의 max-width 차이점

• .logo { width: 20%; }
  → 로고를 감싸는 컨테이너(div)의 너비를 부모 요소의 20%로 설정
• .logo img { max-width: 100%; }
  → 로고 이미지가 컨테이너 크기를 초과하지 않도록 제한

📌 즉, 컨테이너 크기는 20%로 설정하고, 이미지 크기는 컨테이너 안에서만 조절되도록 함.

📌 예시 코드

<div class="logo">
  <img src="logo.jpg" alt="Logo">
</div>

---

2️⃣ display: inline-block; 적용

🔍 코드

.location-left i, .location-left p {
  display: inline-block;
}

🧐 설명

• display: inline-block;을 설정하면,
  → 요소가 블록처럼 너비와 높이를 가질 수 있음
  → 하지만 인라인 요소처럼 같은 줄에 배치 가능
• 이 속성을 적용하면 <i> 태그(아이콘)와 <p> 태그(텍스트)가 한 줄에 나란히 배치됨.

📌 결과적으로 아이콘과 텍스트를 한 줄에 정리하는 역할을 함.

---