TIL: width, height, max-width, min-height의 차이점 완벽 정리

✅ 개요

CSS에서 요소의 크기를 설정할 수 있는 다양한 속성들이 있다.

특히 width, height 와 max-width, min-height 는 이름이 비슷하지만 동작 방식이 매우 다르다.

이번에 그 차이를 실제 코드 예제와 함께 명확히 이해했다.

---

✅ 각 속성의 의미

속성	의미	고정 여부	반응형 대응
width	정확한 너비 설정	✅ 고정	❌
height	정확한 높이 설정	✅ 고정	❌
max-width	최대 너비 제한	❌ 제한만 함	✅
max-height	최대 높이 제한	❌ 제한만 함	✅
min-width	최소 너비 보장	❌ 제한만 함	✅
min-height	최소 높이 보장	❌ 제한만 함	✅

---

✅ 예제 비교

🎯 width vs max-width

1. width: 300px

img {
  width: 300px;
}

• 이미지 너비는 항상 300px
• 부모가 더 작아도 넘쳐버릴 수 있음 → 깨짐 가능성

2. max-width: 100%

img {
  max-width: 100%;
}

• 이미지가 부모보다 커지지 않도록 제한
• 부모가 작으면 그에 맞게 자동으로 줄어듦

---

✅ 실전 코드에서의 차이

❌ 이렇게 하면 강제로 꽉 채움

.movie img {
  width: 100%;
  height: 100%;
}

• 부모 요소 크기만큼 무조건 꽉 채움
• 이미지 비율 깨질 위험 있음
• 높이도 강제로 맞추기 때문에, 넘치거나 늘어지는 경우 생길 수 있음

---

✅ 이렇게 하면 유연하게 반응

.movie img {
  max-width: 100%;
  min-height: 100%;
}

• max-width: 부모보다 커지지 않게 제한
• min-height: 최소한 부모 높이만큼은 차지하도록 보장
• 이미지의 비율도 유지되며, 부드러운 반응형 UI 구성 가능

---

💬 기억 문장

width는 명령, max-width는 제한, min-width는 최소한의 배려.

---

🧠 언제 어떤 걸 쓰면 좋을까?

목적	추천 속성
정확한 고정 크기 필요	width, height
부모보다 커지면 안 됨	max-width, max-height
너무 작아지면 안 됨	min-width, min-height
이미지/카드 등 반응형 UI	max-width: 100%, height: auto

---

이번 정리를 통해 이미지, 카드, 버튼 등 다양한 요소들의 유연한 크기 제어 방법을 명확하게 이해할 수 있었다.