HTML/CSS 4.1 · 4부. 반응형과 움직임

뷰포트와 미디어 쿼리

화면 폭에 따라 규칙을 달리 적용합니다. meta viewport 가 먼저입니다.

예상 학습 시간 16분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급

개념 설명

화면 폭에 따라 규칙을 달리하기

3부의 배치는 폭이 좁아지면 그대로 눌립니다. 좁은 화면에서는 배치 자체를 바꿔야 할 때가 있습니다 — 두 칸을 한 칸으로, 가로 차림표를 세로로.

미디어 쿼리는 조건에 맞을 때만 규칙을 적용합니다.

상세 사용법

먼저 meta viewport 를 넣습니다

이 한 줄이 없으면 미디어 쿼리를 아무리 적어도 손전화에서 듣지 않습니다. 손전화 브라우저가 화면을 980px 로 가정하고 그린 뒤 축소해 보여 주기 때문입니다.

index.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

width=device-width — 화면 폭을 장치의 실제 폭으로 봅니다.
initial-scale=1 — 처음 배율을 1 로 둡니다.

확대를 막지 마십시오. user-scalable=no 나 maximum-scale=1 을 넣으면 글자를 키워 읽어야 하는 사람이 그럴 수 없게 됩니다.

최소 예제 · 편집 가능

미디어 쿼리 쓰기

미리보기의 폭을 바꿀 수는 없으므로, 브라우저 창을 좁혀 확인하십시오. 이 화면 자체도 같은 방식으로 만들어졌습니다.

<div class="grid">
  <div class="cell">하나</div>
  <div class="cell">둘</div>
  <div class="cell">셋</div>
</div>
<p class="note">창을 좁히면 한 칸으로 바뀝니다</p>

/* 좁은 화면 기준으로 먼저 적습니다 — 한 칸 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* 600px 이상일 때만 세 칸으로 */
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

.cell { background: #ece7fb; padding: 16px; border-radius: 6px; }
.note { color: #686c78; font-size: 13px; }

@media 안의 규칙은 조건이 맞을 때만 적용됩니다. 맞지 않으면 바깥의 규칙이 그대로 남습니다.

상세 사용법

좁은 화면부터 적습니다

적는 차례가 둘입니다. 좁은 쪽부터 적고 넓어질 때 더하는 방식을 권합니다.

좁은 쪽부터 (권장)

/* 기본 = 좁은 화면 */
.grid { grid-template-columns: 1fr; }

@media (min-width: 600px) {
  .grid { … 3칸 … }
}

넓은 쪽부터

/* 기본 = 넓은 화면 */
.grid { … 3칸 … }

@media (max-width: 599px) {
  .grid { grid-template-columns: 1fr; }
}

좁은 쪽부터 적으면 기본 규칙이 단순해집니다. 좁은 화면에서는 대개 한 칸으로 쌓기만 하면 되고, 넓어질 때 배치를 더하는 것이 자연스럽습니다. 손전화에서 여는 사람이 더 많다는 점도 그렇습니다.

둘을 섞으면 599px 과 600px 처럼 1px 씩 어긋난 값이 생겨 어느 쪽이 적용되는지 헷갈립니다. 한 방향으로 통일하십시오.

상세 사용법

중단점을 정하는 기준

장치 크기에 맞추지 마십시오. 장치는 계속 나오고 크기도 제각각입니다. 배치가 무너지는 지점에서 끊는 것이 맞습니다.

창을 조금씩 좁히면서 어디서 보기 나빠지는지 봅니다.
그 폭을 중단점으로 삼습니다.
중단점은 적을수록 좋습니다. 대개 둘이면 넉넉합니다.

자주 쓰는 값

@media (min-width: 600px)  { }  /* 태블릿 이상 */
@media (min-width: 900px)  { }  /* 데스크톱 */

/* 폭 말고도 조건을 걸 수 있습니다 */
@media (prefers-reduced-motion: reduce) { }  /* 움직임을 줄여 달라는 설정 (4.6) */
@media print { }                             /* 인쇄할 때 */

흔한 실수

세 가지

meta viewport 를 빠뜨립니다. 미디어 쿼리를 적어도 손전화에서 듣지 않습니다. 화면만 작게 축소되어 보입니다.
min-width 와 max-width 를 섞습니다. 경계에서 둘 다 적용되거나 둘 다 빠지는 폭이 생깁니다.
중단점을 너무 많이 둡니다. 다섯 개를 넘어가면 어느 폭에서 무엇이 적용되는지 아무도 알 수 없게 됩니다.

실습 문제

직접 해보기

1. 차림표를 좁은 화면에서 세로로 난이도 중

차림표를 좁은 화면에서는 세로로 쌓고, 600px 이상에서 가로로 놓으십시오.

세로로 쌓는 것은 flex-direction: column 입니다. 기본을 좁은 화면으로 두십시오.

nav { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 600px) { nav { flex-direction: row; } }

요약

정리

meta viewport 가 없으면 미디어 쿼리가 손전화에서 듣지 않습니다.
좁은 화면을 기본으로 적고 min-width 로 더해 갑니다.
중단점은 장치 크기가 아니라 배치가 무너지는 지점에서 정합니다.
중단점은 적을수록 좋습니다.