반응형 대응, Responsive

반응형 웹이란 화면 크기에 따라 레이아웃과 스타일이 유연하게 바뀌는 웹을 말한다.
CSS에서는 미디어 쿼리(Media Query) 를 사용해 특정 조건에서 다른 스타일을 적용한다.

viewport 메타 태그

반응형을 적용하려면 HTML <head>에 반드시 아래 태그가 있어야 한다.


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

이 태그가 없으면 모바일 브라우저가 화면을 데스크탑 크기로 축소해서 보여준다.

미디어 쿼리(Media Query)

특정 조건(화면 너비, 해상도 등)이 만족될 때 스타일을 적용한다.


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

① min-width / max-width

가장 많이 사용하는 조건이다.


/* 768px 이상일 때 */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* 767px 이하일 때 */
@media (max-width: 767px) {
  .nav {
    display: none;
  }
}

② 브레이크포인트(Breakpoint)

화면 크기에 따라 레이아웃이 바뀌는 기준점이다.
절대적인 기준은 없지만 아래가 일반적으로 사용된다.

이름	범위	대상 기기
mobile	~ 767px	스마트폰
tablet	768px ~ 1023px	태블릿
desktop	1024px ~	노트북, 데스크탑


/* 모바일 기본 스타일 */
.container { grid-template-columns: 1fr; }
 
/* 태블릿 */
@media (min-width: 768px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}
 
/* 데스크탑 */
@media (min-width: 1024px) {
  .container { grid-template-columns: repeat(4, 1fr); }
}

반응형 단위

고정 단위(px) 대신 유연한 단위를 사용하면 미디어 쿼리 없이도 반응형에 대응할 수 있다.

단위	설명	예시
`%`	부모 요소 기준 비율	`width: 100%`
`vw`	뷰포트 너비 기준	`width: 50vw`
`vh`	뷰포트 높이 기준	`height: 100vh`
`rem`	html 폰트 크기 기준	`font-size: 1.5rem`
`clamp()`	최솟값·기준값·최댓값 지정	`font-size: clamp(1rem, 2vw, 2rem)`

기타 미디어 쿼리 조건


/* 가로 모드 */
@media (orientation: landscape) { }
 
/* 세로 모드 */
@media (orientation: portrait) { }
 
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  body {
    background: #0f172a;
    color: #e2e8f0;
  }
}

정리

개념	설명
`@media`	조건에 따라 스타일 적용
`min-width`	해당 너비 이상일 때 적용
`max-width`	해당 너비 이하일 때 적용
Mobile First	모바일 기본, `min-width`로 확장
`%`, `vw`, `vh`	유연한 반응형 단위
`clamp()`	최솟값·최댓값 범위 지정