반응형 웹의 핵심, 미디어 쿼리(Media Query) 작성 가이드

티스토리 뷰

Frontend/CSS

반응형 웹의 핵심, 미디어 쿼리(Media Query) 작성 가이드

미니임 2026. 2. 28. 21:59

오늘날 웹 사이트는 스마트폰, 태블릿, 데스크톱 등 수많은 기기에서 접속됩니다. 모든 기기에서 최적화된 화면을 보여주기 위한 '반응형 웹'의 핵심 기술이 바로 **미디어 쿼리(Media Query)**입니다. CSS3에서 도입된 이 기능을 통해 우리는 기기의 특성(너비, 높이, 해상도 등)에 따라 서로 다른 스타일을 적용할 수 있습니다.

1. 미디어 쿼리의 기본 구조

미디어 쿼리는 @media 규칙을 사용하여 선언합니다. 가장 기본적인 형태는 다음과 같습니다.

@media 미디어유형 and (조건문) {
  /* 조건이 참일 때 적용될 CSS 코드 */
}

미디어 유형: all(모든 기기), screen(컴퓨터/스마트폰 화면), print(인쇄 장치) 등이 있습니다. 보통 생략하면 all로 간주됩니다.
조건문: 주로 max-width(최대 너비)와 min-width(최소 너비)를 사용하여 브라우저 크기에 대응합니다.

2. 모바일 퍼스트(Mobile First) vs 데스크톱 퍼스트

전략에 따라 미디어 쿼리 작성 방식이 달라집니다. 최근 트렌드는 기본 스타일을 모바일에 맞추고, 화면이 커질수록 스타일을 추가하는 모바일 퍼스트 방식을 권장합니다.

모바일 퍼스트 예시 (min-width 사용)

/* 기본 스타일 (모바일) */
body { font-size: 14px; }

/* 태블릿 이상 (768px 이상) */
@media screen and (min-width: 768px) {
  body { font-size: 16px; }
}

/* 데스크톱 이상 (1024px 이상) */
@media screen and (min-width: 1024px) {
  body { font-size: 18px; }
}

3. 실전 활용 예제

미디어 쿼리를 실제 레이아웃에 어떻게 적용하는지 다양한 예제를 통해 살펴보겠습니다.

예제 1: 반응형 그리드 레이아웃

화면 너비에 따라 한 줄에 보이는 박스의 개수를 조절하는 예제입니다.

/* 기본: 1단 구성 (모바일) */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100%;
  padding: 10px;
}

/* 태블릿: 2단 구성 (768px 이상) */
@media screen and (min-width: 768px) {
  .item {
    width: 50%;
  }
}

/* 데스크톱: 4단 구성 (1200px 이상) */
@media screen and (min-width: 1200px) {
  .item {
    width: 25%;
  }
}

예제 2: 내비게이션 바 변형

작은 화면에서는 메뉴를 숨기고 세로로 나열하며, 큰 화면에서는 가로로 배치합니다.

/* 모바일: 세로 배치 */
.nav-list {
  display: flex;
  flex-direction: column;
  background-color: #333;
}

.nav-item {
  padding: 15px;
  color: white;
}

/* 데스크톱: 가로 배치 (992px 이상) */
@media screen and (min-width: 992px) {
  .nav-list {
    flex-direction: row;
    justify-content: space-around;
  }
}

예제 3: 이미지 최적화 및 가독성 조절

화면이 작을 때 이미지가 너무 커 보이지 않게 조절하고, 폰트 크기를 최적화합니다.

.hero-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.content-text {
  line-height: 1.5;
  padding: 20px;
}

@media screen and (min-width: 1024px) {
  .hero-image {
    height: 500px; /* 큰 화면에서는 더 시원하게 배치 */
  }
  .content-text {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto; /* 텍스트 가독성을 위해 너비 제한 및 중앙 정렬 */
  }
}

4. 미디어 쿼리 작성 시 주의사항

메타 태그 확인: HTML 문서의 <head> 안에 아래 뷰포트 설정 태그가 반드시 있어야 미디어 쿼리가 정상 작동합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
단위 선택: px도 많이 쓰이지만, 사용자 환경에 유연하게 대응하기 위해 em이나 rem 단위를 브레이크포인트에 사용하는 것도 좋은 방법입니다.
복합 조건 사용: and, not, only를 활용해 더 정교한 타겟팅이 가능합니다.
/* 가로 모드인 스마트폰만 타겟팅 */ @media screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape) { .special-layout { display: block; } }

미디어 쿼리는 단순히 디자인을 바꾸는 도구를 넘어, 사용자에게 어떤 기기에서든 최상의 경험(UX)을 제공하기 위한 필수 기술입니다. 위 예제들을 프로젝트에 맞게 변형하여 멋진 반응형 웹사이트를 구현해 보세요.

'Frontend > CSS' 카테고리의 다른 글

이미지 중앙 정렬의 모든 것: 상황별 최적의 방법 5가지 (0)	2026.02.28
CSS 변수(Custom Properties) 완벽 가이드: 효율적인 웹 디자인과 유지보수를 위한 필수 기술 (0)	2026.02.28
CSS Grid 기초: 복잡한 2차원 레이아웃도 식은 죽 먹기 (0)	2026.02.28
CSS Flexbox 10분 완성: justify-content와 align-items 완벽 정리 (0)	2026.02.28
CSS Layout 마스터: Position 속성 완벽 정리 (0)	2026.02.28

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

글 보관함

MinStudio

티스토리 뷰