반응형 웹

mskimdev·2026년 5월 19일

CSS MediaQuery mobile responsive

CSS

목록 보기

9/10

반응형 웹 — 미디어 쿼리

같은 HTML 파일을 노트북으로 열면 넓은 화면에 맞게 보이고, 스마트폰으로 열면 작은 화면에 맞게 레이아웃이 바뀐다. 이걸 가능하게 하는 CSS 기능이 미디어 쿼리다.

반응형 웹이란

화면 크기, 해상도, 기기 종류에 따라 레이아웃과 스타일이 유연하게 바뀌는 웹을 말한다. 하나의 HTML/CSS로 데스크탑, 태블릿, 모바일을 모두 대응한다.

viewport 설정

반응형 웹의 첫 번째 단계는 HTML <head>에 이 한 줄을 넣는 것이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 설정이 없으면 모바일 브라우저가 페이지를 데스크탑 너비로 렌더링한 뒤 축소해서 보여준다. 미디어 쿼리를 써도 제대로 동작하지 않는다.

미디어 쿼리 기본 문법

@media (조건) {
  /* 조건이 참일 때 적용되는 스타일 */
}

/* 화면 너비가 768px 이하일 때 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    flex-direction: column;
  }
}

브레이크포인트 (Breakpoint)

레이아웃이 바뀌는 기준 너비를 브레이크포인트라고 한다. 보편적으로 쓰이는 기준은 이렇다.

/* 모바일 */
@media (max-width: 480px) { }

/* 태블릿 */
@media (max-width: 768px) { }

/* 소형 데스크탑 */
@media (max-width: 1024px) { }

/* 대형 데스크탑 */
@media (min-width: 1200px) { }

Mobile First vs Desktop First

Desktop First (max-width 사용)

기본 스타일을 데스크탑으로 작성하고, 화면이 작아질수록 조건을 추가한다.

/* 기본: 데스크탑 */
.container {
  display: flex;
  flex-direction: row;
}

/* 모바일 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Mobile First (min-width 사용)

기본 스타일을 모바일로 작성하고, 화면이 커질수록 조건을 추가한다.

/* 기본: 모바일 */
.container {
  flex-direction: column;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

모바일 트래픽이 많은 요즘에는 Mobile First가 권장된다. 성능 면에서도 불필요한 스타일을 덮어쓰는 일이 줄어든다.

실전 예시 — 3열 카드 → 1열

/* 데스크탑: 3열 */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 태블릿: 2열 */
@media (max-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 모바일: 1열 */
@media (max-width: 600px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}

기타 미디어 조건

/* 방향 — 세로 모드 */
@media (orientation: portrait) { }

/* 방향 — 가로 모드 */
@media (orientation: landscape) { }

/* 인쇄 */
@media print {
  .no-print { display: none; }
}

/* 다크 모드 선호 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
}

유동적 단위 활용

미디어 쿼리와 함께 유동적인 단위를 쓰면 더 부드럽게 대응된다.

.container {
  width: 90%;          /* 화면 너비의 90% */
  max-width: 1200px;   /* 너무 넓어지지 않게 제한 */
  margin: 0 auto;      /* 가운데 정렬 */
}

img {
  max-width: 100%;     /* 부모를 넘지 않게 */
  height: auto;        /* 비율 유지 */
}