Responsive Web Design 핵심 요소: max-width와 rem 완전 이해하기

반응형 웹디자인을 제대로 구현하기 위해 꼭 알아야 할 두 가지 CSS 속성이 있습니다: **max-width**와 rem 단위입니다. 이번 포스트에서는 이 두 가지가 정확히 어떻게 작동하는지, 왜 사용하는지, 실제 예제와 함께 이해해 보겠습니다.

---

max-width: 부모 요소의 크기에 맞춰 유연하게 줄어드는 너비

기본 예시: width만 쓸 경우

 

<div class="test"></div>
.test {
  width: 1000px;
  padding: 100px;
  background-color: red;
}

• width: 1000px를 설정하면 브라우저 크기를 줄여도 요소는 계속 1000px을 유지합니다.
• 뷰포트보다 넓어질 경우 수평 스크롤이 생기며 사용성이 떨어집니다.

✅ max-width로 바꿔보기

.test {
  max-width: 1000px;
  padding: 100px;
  background-color: red;
}

• 처음엔 동일하게 1000px로 보이지만,
• 화면 너비가 1000px보다 작아지면 자동으로 부모 요소의 100% 너비로 줄어듭니다.
• 즉, 너비가 최대 1000px까지는 유지되지만, 그보다 작아지면 자동으로 줄어드는 유연한 레이아웃이 됩니다.

📌 요약:
컨테이너 너비가 max-width보다 크면 → max-width 적용
작으면 → 부모 요소의 100% 너비 적용

---

rem: 전체 디자인을 유연하게 조절하는 단위

rem이란?

• rem = root element (HTML)의 font-size 기준 단위
• 별도 설정 없을 경우 기본 브라우저 폰트 크기인 16px이 기준이 되어
  1rem = 16px이 됩니다.

예시: rem을 이용한 크기 지정

.test {
  max-width: 50rem;  /* 50 x 16px = 800px */
  font-size: 2rem;   /* 2 x 16px = 32px */
  padding: 4rem;     /* 4 x 16px = 64px */
}

• 모든 크기를 rem으로 설정하면, root 폰트 사이즈를 바꾸는 것만으로 전체 UI 크기를 유연하게 조절할 수 있습니다.

✅ HTML의 font-size를 변경해보자

html {
  font-size: 10px;
}

• 이러면 1rem = 10px이 되며 계산이 매우 쉬워집니다.
• 단, 이 방식은 사용자의 브라우저 설정을 무시하게 되므로 접근성 측면에서 좋지 않습니다.

✅ 올바른 방법: 브라우저 기본 설정을 존중하면서도 계산하기 쉽게

html {
  font-size: 62.5%; /* 16px × 0.625 = 10px */
}

• 1rem = 10px처럼 간편한 계산이 가능하면서도,
• 사용자가 브라우저 폰트 크기를 바꾸면 그 설정이 반영됩니다.

📌 요약:
rem을 사용하면 디자인 전체를 루트 폰트 크기에 따라 자동으로 조절할 수 있습니다.
접근성을 지키기 위해 font-size: 62.5%를 사용하는 것이 CSS 업계에서 널리 사용되는 방법입니다.

 

---

🎯 마무리

• max-width: 요소가 너무 넓어지는 걸 방지하면서도 유연하게 크기 조절이 가능함
• rem 단위: 디자인 전체를 한 번에 스케일 조절할 수 있는 강력한 단위
• html { font-size: 62.5%; }: 계산을 쉽게 하면서도 접근성을 고려한 베스트 프랙티스

이제부터는 px 대신 rem을 적극적으로 사용하고, max-width를 활용해 유연한 레이아웃을 만들어 보세요!