CSS
반응형 단위와 비율
크기의 기준과 콘텐츠가 깨지는 조건을 구분해 어떤 화면에서도 유연하게 읽히는 레이아웃을 만듭니다.
이럴 때 필요해요
모바일 주소창 변화, 브라우저 글꼴 확대, 긴 다국어 번역문에서도 텍스트와 미디어가 잘리지 않도록 설계하기 위해 필요합니다.
어떻게 동작하나요?
사용자가 브라우저 기본 글꼴 크기를 키웠을 때 화면의 본문과 여백도 자연스럽게 함께 커져야 읽기 편합니다. 이때 CSS의 px은 고정된 참조 픽셀이고, rem은 최상위 루트(html) 글꼴 크기에 비례하며, em은 현재 요소(글꼴 크기 속성에서는 부모 요소)의 글꼴 크기에 비례합니다. 따라서 전체 여백과 본문 크기는 기준이 하나로 고정된 rem으로 잡고, 버튼 안쪽 여백처럼 글자 크기에 맞춰 비례해야 하는 곳에 em을 쓰면 중첩으로 인한 크기 누적 실수를 줄일 수 있습니다.
모바일 웹에서 전체 화면 모달을 100vh로만 만들면 상단 주소창이나 하단 툴바에 가려 하단 버튼이 잘리는 문제를 자주 겪게 됩니다. 이를 구분하기 위해 주소창이 펼쳐진 작은 화면 기준인 svh, 주소창이 접힌 큰 화면 기준인 lvh, 그리고 주소창 움직임에 따라 실시간으로 변하는 dvh가 도입되었습니다. 스크롤 중에 크기가 계속 바뀌면 화면이 덜컥거릴 수 있으므로 고정 패널인지 일반 스크롤 문서인지에 따라 단위를 골라야 합니다.
반응형 브레이크포인트는 특정 휴대폰 모델의 가로 픽셀을 외워서 자르기보다, 화면 폭을 좁혀 보면서 카드나 문장이 실제로 겹치거나 읽기 힘들어지는 지점에서 잡는 것이 안전합니다. 또한 썸네일 이미지나 영상처럼 가로세로 비율이 유지되어야 하는 영역에는 aspect-ratio와 자동 크기(auto)를 조합해 틀을 잡고, 실제 이미지를 자를지(cover) 다 보여 줄지(contain)는 object-fit으로 정합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
.card { width: min(100%, 40rem); }
.media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 48rem) { .list { display: grid; grid-template-columns: 1fr 1fr; } }미디어의 16:9 비율은 유지하되 카드의 최대 폭은 40rem으로 제한합니다. 48rem은 예시 전환점이며 실제 콘텐츠 길이에 맞춰 검증하고 조정합니다.
자주 헷갈리는 포인트
- 가로와 세로 높이를 모두 고정값으로 강제하면 aspect-ratio가 비율을 계산할 여지가 사라질 수 있습니다.
- 창의 가로 너비만 줄여 보고 브라우저 글꼴 확대나 긴 번역문 테스트를 놓치기 쉽습니다.
내 말로 설명해 보기
em을 여러 단계로 중첩한 제목과 rem을 쓴 제목은 글꼴을 확대했을 때 결과가 왜 달라질까요?
함께 읽으면 좋은 개념
관련 면접 질문 4개
CSS에서 px, em, rem은 각각 무엇을 기준으로 크기를 정하나요?
px은 CSS 참조 픽셀 기준이고, rem은 루트(html) 요소의 글꼴 크기, em은 해당 요소 또는 부모의 계산된 글꼴 크기를 기준으로 비례하는 단위입니다. 특히 font-size에 em을 쓰면 부모 글꼴 크기를 따라가서 중첩될 때 크기가 곱해질 수 있는 반면, rem은 문서 전체에서 일관된 기준을 유지합니다. 그래서 전체 레이아웃 여백이나 본문 글꼴 크기는 rem으로 잡고, 버튼 내부 패딩처럼 글자 크기에 맞춰 함께 커져야 하는 부분에는 em을 선택하는 편입니다.
꼬리질문과 참고자료 →vw·vh와 svh·lvh·dvh 같은 동적 뷰포트 단위는 어떻게 다른가요?
1vw와 1vh는 각각 뷰포트 너비와 높이의 1%를 뜻하지만, 모바일 브라우저에서는 주소창이나 하단 툴바가 나타나고 사라질 때 실제 보이는 높이가 달라집니다. 이를 보완하기 위해 주소창이 펼쳐진 가장 작은 뷰포트 기준인 svh, 주소창이 숨겨진 가장 큰 뷰포트 기준인 lvh, 그리고 현재 UI 상태에 맞춰 실시간으로 변하는 dvh를 사용합니다. 전체 화면 모달이나 히어로 영역을 만들 때는 스크롤 시 주소창 변화로 인한 화면 흔들림 여부를 함께 따져 단위를 고릅니다.
꼬리질문과 참고자료 →반응형 레이아웃을 설계할 때 브레이크포인트는 어떤 기준으로 정하나요?
면접에서는 특정 기기 해상도 숫자를 외워서 말하기보다, 화면 폭을 조절할 때 실제 콘텐츠가 겹치거나 줄 길이가 읽기 불편해지는 지점을 찾아 전환점을 정한다고 설명하는 것이 좋습니다. 작은 화면의 1열 기본 배치에서 출발해 폭을 넓혀 가며 다단 배치, 탐색 메뉴, 여백이 바뀌어야 하는 구간을 기록하는 흐름으로 정리해 보세요. 직접 설계한 경험이 있다면 검증한 화면 폭과 글꼴 확대 테스트 방법을 덧붙이고, 없다면 이러한 콘텐츠 중심 설계 절차를 제안하면 됩니다.
꼬리질문과 참고자료 →