반응형: 폰과 PC에서 다 예쁘게

화면 크기가 달라도 안 깨지는 화면 만들기

한 줄로 말하면

반응형은 화면 크기에 맞춰 배치가 알아서 바뀌는 디자인이야. 하나의 코드로 폰, 태블릿, PC를 다 챙겨.

요즘 사람들은 같은 서비스를 출근길엔 폰으로, 회사에선 PC로 열어. 한쪽에서 깨져 보이면 바로 "허술한 서비스"라는 인상을 줘. 그래서 반응형은 선택이 아니라 기본이야.

화면 크기는 어떻게 알아?

브라우저에서 내 웹페이지가 실제로 보이는 창 영역을 뷰포트라고 해. 반응형은 이 뷰포트 너비를 보고 "지금은 좁은 화면이니까 한 줄씩" 같은 결정을 내려.

• 폰: 대략 360~430 정도 너비 (화면 픽셀이 아니라 CSS 기준 단위)
• 태블릿: 대략 768~1024 정도
• PC: 1024 이상, 큰 모니터는 1440 넘게

반응형을 만드는 세 가지 도구

1. 늘어나는 크기: "300px" 대신 "부모 너비의 100%", "최대 600까지만"처럼 유연하게
2. 알아서 줄바꿈: 가로로 줄 세운 상자가 자리가 모자라면 다음 줄로 넘어가게
3. 화면 크기별 규칙: "너비가 768 이상이면 세 줄로" 같은 조건. 이걸 미디어 쿼리라고 해

모바일 먼저 디자인하기

좁은 폰 화면을 먼저 기본으로 만들고, 넓어질 때 기능을 더하는 방식을 "모바일 퍼스트"라고 해. 좁은 화면에 중요한 것만 남기는 연습이 되고, 넓은 화면에 맞췄다가 폰에서 다 깨지는 사고를 막아줘. Tailwind의 md:, lg: 같은 표시도 "이 크기 이상일 때"라는 뜻이라 모바일 퍼스트 방식이야.

1. 폰 — 카드 1열, 메뉴는 ☰ 버튼 안에
2. 태블릿 — 카드 2열
3. PC — 카드 3~4열, 메뉴는 위에 펼쳐서

실전에서 자주 깨지는 곳

확인 퀴즈

무료 · 카카오로 바로 시작 · 레슨 243개