[TIL] CSS: 미디어 쿼리, em/rem, 반응형 웹과 이미지

코딩/CSS

[TIL] CSS: 미디어 쿼리, em/rem, 반응형 웹과 이미지

haehaee 2026. 3. 23. 16:33

반응형 웹 디자인(RWD) - 기기 화면 크기에 유연하게 반응하는 웹 설계 방식과 적응형 웹과의 차이
뷰포트(Viewport) - 모바일 환경에서 웹사이트가 올바르게 렌더링되기 위한 필수 메타 태그 설정
상대 단위 em과 rem - 부모 또는 루트 요소를 기준으로 크기를 조절하여 반응성을 높이는 CSS 단위
반응형 이미지(RWD Image) - 해상도와 화면 비율에 맞춰 최적화된 이미지를 제공하는 기법
미디어 쿼리(Media Query)와 디버깅 - 화면 중단점을 설정하여 레이아웃을 분기하고 크롬 개발자 도구로 확인하는 방법

반응형 웹 디자인(RWD)의 이해

반응형 웹(RWD)의 정의와 3가지 핵심 요소

반응형 웹 디자인(Responsive Web Design)이란 하나의 웹사이트가 접속하는 기기(PC, 태블릿, 스마트폰 등)의 화면 크기에 반응하여 레이아웃을 자동으로 최적화하는 기술을 말한다.

물을 그릇에 담으면 형태가 변하듯, 웹 콘텐츠가 기기의 화면 크기에 맞춰 유연하게 변하는 원리이다. 이는 세 가지 핵심 기술 요소로 이루어진다.

그리드 시스템 (Fluid Grid): 요소를 배치할 때 px 같은 고정 단위가 아니라 %나 vw 같은 상대 단위를 사용하여 화면 비율에 맞춰 유연하게 늘어나거나 줄어들게 한다.
유연한 이미지 (Flexible Images): 이미지의 가로 크기를 최대 100%로 설정하여 화면이 작아져도 이미지가 밖으로 삐져나가지 않고 부모 요소의 크기에 맞춰 작아지게 한다.
미디어 쿼리 (Media Queries): 화면 너비 등 특정 조건에 따라 디자인을 변경하는 CSS의 핵심 기능이다.

실무자의 시선: 적응형 웹(Adaptive)과의 차이

반응형(RWD)과 적응형(AWD)은 변화의 방식에서 큰 차이를 보인다.

반응형: 화면이 1px씩 변할 때마다 실시간으로 물 흐르듯 부드럽게 레이아웃이 변하며, 애니메이션 전환이 눈에 띄게 확인된다.

적응형: 정해진 특정 구간(예: 320px, 768px, 1200px)에 도달할 때만 레이아웃이 툭툭 끊기듯 확 바뀐다.

[표] RWD의 장점과 단점 요약표

구분	설명
장점: 유지보수	하나의 소스 코드만 관리하면 모든 기기에 대응할 수 있어 경제적임
장점: SEO 최적화	주소(URL)가 하나로 통일되어 구글 검색 로봇이 인덱싱하기에 매우 유리함
장점: 사용자 경험	어떤 기기로 접속해도 동일한 브랜드 이미지와 콘텐츠를 제공함
단점: 초기 개발 비용	다양한 화면 크기를 고려해 설계하고 테스트해야 하므로 제작 시간이 김
단점: 로딩 속도 이슈	모바일에서도 고해상도 이미지를 로드할 수 있어 데이터 소모가 발생할 수 있음

최근의 모던 웹 트렌드는 유지보수와 검색 엔진 최적화(SEO) 측면에서 압도적으로 유리한 반응형 웹을 표준으로 삼고 있다.

뷰포트(Viewport)와 디바이스 모드

뷰포트가 필요한 이유와 메타 태그 설정

뷰포트는 웹사이트가 실제로 보여지는 영역을 의미한다.

뷰포트가 필요한 이유

과거의 웹사이트는 PC 기준으로 만들어져, 모바일에서 접속하면 브라우저가 PC 화면을 통째로 렌더링한 뒤 억지로 축소시켜 글자와 버튼이 보이지 않는 문제가 발생한다.

이를 해결하기 위해 브라우저에게 기기의 실제 가로 너비에 맞춰 화면을 다시 그리도록 명령하는 것이 뷰포트 메타 태그이다.

뷰포트의 종류와 실무 주의사항

레이아웃 뷰포트(Layout Viewport): 브라우저가 렌더링의 기준으로 삼는 가상의 캔버스 크기

비주얼 뷰포트(Visual Viewport): 사용자가 실제로 보는 영역을 뜻한다.

뷰포트 메타 태그가 없다면 CSS 미디어 쿼리를 아무리 잘 작성해도 모바일에서 정상 작동하지 않는다.

크롬 브라우저에서 F12를 눌러 개발자 도구를 열고, 상단의 디바이스 모드(기기 툴바) 아이콘을 클릭하면 화면 크기에 따른 뷰포트의 변화를 쉽게 테스트할 수 있다.

[예제 코드] 뷰포트 설정 메타 태그 필수 구문

HTML

width=device-width는 웹사이트의 너비를 기기의 실제 화면 너비와 똑같이 맞추라는 뜻이며, initial-scale=1.0은 로딩 시 확대 비율을 1:1로 설정하라는 뜻이다.

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

사용자 확대 제한 금지: 시력이 좋지 않은 사용자의 웹 접근성을 위해 user-scalable=no 속성을 사용하여 화면 확대를 막는 행위는 현재 권장하지 않는다.

상대 단위 em과 rem

웹 디자인의 유연성을 결정하는 상대 단위 em과 rem

em (Element)

해당 요소나 부모 요소의 글자 크기를 기준으로 하는 단위

계산 방식: 현재 요소의 font-size를 1로 본다.
특징: 중첩해서 사용할 경우 부모의 크기에 따라 자식의 크기가 계속 곱해져서 계산된다.
용도: 특정 요소 내부의 여백(padding, margin)을 글자 크기에 비례해서 조절하고 싶을 때 유용하다.

rem (Root em)

최상위 요소(<html>)의 글자 크기만을 기준으로 하는 단위

계산 방식: 브라우저의 기본 설정값(보통 16px)을 1로 본다.
특징: 어디에서 사용하든 기준점이 항상 일정하므로 크기를 예측하기 훨씬 쉽다
용도: 전체적인 레이아웃이나 폰트 크기를 일관성 있게 관리할 때 가장 많이 쓰인다.

[표] em vs rem 핵심 비교표

구분	em	rem
기준점	자신 혹은 부모 요소의 font-size	최상위(html) 요소의 font-size
특징	중첩될수록 크기가 배수로 누적됨	페이지 어디서나 동일한 기준 적용
예측 가능성	낮음 (복잡한 구조에서 계산하기 어려움)	높음 (항상 일정한 루트 기준)
주요 용도	요소 내부의 비례적인 간격 및 여백 조정	전체적인 폰트 및 레이아웃 크기 관리

[예제 코드] 중첩에 따른 em과 rem의 차이 확인

HTML

<style>
  html { font-size: 16px; } /* 루트(Root) 설정 */
  .parent { font-size: 20px; } /* 부모 설정 */

  /* 1. em 사용: 부모 폰트(20px)의 2배 = 40px */
  .child-em { 
    font-size: 2em; 
    padding: 1em; /* 자기 폰트 크기(40px)만큼 패딩 적용 */
  }

  /* 2. rem 사용: 루트 폰트(16px)의 2배 = 32px */
  .child-rem { 
    font-size: 2rem; 
    padding: 1rem; /* 루트 폰트 크기(16px)만큼 패딩 적용 */
  }
</style>

<div class="parent">
  부모 텍스트 (20px)
  <div class="child-em">나는 em 방식 (40px)</div>
  <div class="child-rem">나는 rem 방식 (32px)</div>
</div>

rem을 사용하면 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 웹 사이트 전체가 그에 맞춰 유동적으로 변하므로 웹 접근성에 좋다.

반응형 이미지(RWD Image)

웹 페이지의 용량을 줄이고 사용자 환경에 최적화된 시각적 경험을 제공하기 위해서는 반응형 이미지(RWD image) 처리가 필수

단순히 width: 100%를 주는 것을 넘어, 기기의 해상도와 화면 크기에 따라 가장 적합한 이미지를 불러오는 3가지 핵심 방법 정리

CSS를 이용한 유동적 이미지 (Fluid Image)

가장 기초적인 방법으로, 이미지가 부모 요소의 너비를 넘지 않고 화면 크기에 따라 줄어들게 만듭니다.

방법: max-width: 100%와 height: auto를 설정합니다.
특징: 이미지가 화면보다 크더라도 부모 컨테이너에 맞춰 비율을 유지하며 축소됩니다.

CSS

img {
  max-width: 100%;
  height: auto;
}

srcset과 sizes 속성 (해상도 대응)

같은 비율의 이미지지만, **고해상도(Retina)**나 대화면 사용자를 위해 용량이 큰 이미지를 선택적으로 보여줄 때 사용

srcset: 브라우저에게 선택할 수 있는 이미지 후보군과 그 너비(w)를 알려준다.
sizes: 화면 크기에 따라 이미지가 차지할 실제 너비를 브라우저에게 힌트로 준다.

HTML

<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
     sizes="(max-width: 600px) 480px, 800px" 
     alt="반응형 이미지 예시">

<picture> 태그 (아트 디렉션)

단순한 크기 조절이 아니라, 화면 비율에 따라 아예 다른 이미지를 보여줘야 할 때 사용한다.

(예: PC에서는 가로가 긴 사진, 모바일에서는 인물 중심의 세로 사진)

<source>: 미디어 쿼리 조건(media)에 맞는 이미지를 우선적으로 찾는다.
<img>: 가장 하단에 위치하며, 조건에 맞는 것이 없거나 <picture>를 지원하지 않는 브라우저를 위한 대비책(Fallback)

HTML

<picture>
  <source media="(min-width: 768px)" srcset="desktop-view.jpg">
  <source media="(max-width: 767px)" srcset="mobile-view.jpg">
  <img src="default.jpg" alt="풍경 사진">
</picture>

[표] 반응형 이미지 전략 요약표

방법	주요 키워드	용도
CSS 방식	max-width: 100%	모든 이미지가 부모 틀을 벗어나지 않게 비율 유지
srcset	고해상도, 해상도 대응	같은 그림이지만 더 선명하거나 가벼운 이미지 선택 제공
picture	아트 디렉션	화면 크기별로 아예 구도가 다른 사진을 교체하여 노출

[예제 코드] 반응형 이미지 적용 방법

HTML

<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
     sizes="(max-width: 600px) 480px, 800px" 
     alt="반응형 이미지 예시">

<picture>
  <source media="(min-width: 768px)" srcset="desktop-view.jpg">
  <source media="(max-width: 767px)" srcset="mobile-view.jpg">
  <img src="default.jpg" alt="풍경 사진">
</picture>

학습 정리

단순히 이미지를 줄이는 것보다 기기 크기에 맞는 용량의 이미지를 보내는 것이 웹 성능(LCP) 최적화의 핵심
loading="lazy" 속성을 함께 사용하면 화면에 보이지 않는 이미지는 나중에 불러와 페이지 로딩 속도를 더 높일 수 있다.
성능이 중요하다면 srcset을, 디자인적 의도가 중요하다면 <picture>를 선택

미디어 쿼리(Media Query)와 크롬 개발자 도구 활용

반응형 웹 디자인의 핵심이자, 접속하는 기기의 환경에 따라 스타일은 다르게 적용할 수 있게 해주는 미디어쿼리에 대해 핵심 키워드별 정리

정의

미디어 쿼리는 단말기의 유형(출력 장치)이나 해상도, 뷰포트 너비 같은 특성에 따라 서로 다른 CSS스타일을 적용하도록 도와주는 CSS3기술

미디어 쿼리 구문

미디어 쿼리는 보통 @media 규칙으로 시작하며, 다음과 같은 기본 구조를 가진다.

@media [미디어 유형] and ([조건/특성]) {
  /* 조건이 맞을 때 적용할 CSS 코드 */
}

and: 모든 조건이 참일 때 스타일을 적용
not: 전체 미디어 쿼리를 반대로 해석
, (쉼표): 여러 조건 중 하나만 참이어도 스타일을 적용 (or연산)

미디어 유형의 종류

어떤 장치를 타겟으로 할지 결정

all: 모든 미디어 장치 (기본값).
print: 인쇄 결과물이나 인쇄 미리보기 화면.
screen: 컴퓨터, 태블릿, 스마트폰 등 화면이 있는 장치.

가로세로 및 회전 속성

화면의 크기와 방향에 따라 세밀한 조정이 가능

가로세로 (Width / Height): min-width나 max-width를 가장 많이 사용
회전 (Orientation): 기기의 방향을 감지합니다
- portrait: 세로 모드 (높이가 너비보다 큼).
- landscape: 가로 모드 (너비가 높이보다 큼).

CSS

/* 가로 모드인 스마트폰에서만 배경색 변경 */
@media screen and (orientation: landscape) {
  body { background-color: lightblue; }
}

미디어 쿼리 중단점 (Breakpoints)

화면 크기가 변할 때 레이아웃이 바뀌는 기준점을 말한다.

일반적으로 다음 기기별 해상도를 기준으로 설정한다.

기기 구분	중단점 (Breakpoints)
모바일	~ 767px
태블릿	768px ~ 1023px
데스크탑	1024px ~

미디어 쿼리 적용 방법

~~외부 CSS 파일 연결하기~~

HTML의 <link> 태그를 사용하여 조건에 맞는 CSS 파일만 불러온다.

HTML

<link rel="stylesheet" media="screen and (min-width: 768px)" href="tablet.css">

웹 문서에 직접 정의하기

CSS 파일 내부에서 직접 분기 처리를 합니다. 가장 많이 쓰이는 방식

CSS

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

/* 1024px 이상의 화면 (PC) */
@media screen and (min-width: 1024px) {
  body { font-size: 18px; }
}

웹 개발자 도구 창에서 미디어 쿼리 표시하기

브라우저(Chrome 등)의 개발자 도구를 활용하면 반응형 테스트가 매우 쉬워진다.

크롬 개발자 도구(F12)의 기기 툴바를 활성화한 뒤, 상단의 기기툴바 아이콘 (Device Toolbar, 휴대폰/태블릿 모양) 을 클릭한다.
우측 상단 메뉴에서 미리어 쿼리 표시'Show media queries'를 클릭하면 상단에 미디어 쿼리 막대가 나타난다.
파란색(max-width), 주황색(min-width), 초록색(범위) 막대를 클릭하면 해당 너비로 화면이 즉시 조절되어 레이아웃 변화를 실시간으로 점검할 수 있다.
막대 위에서 우클릭하여 'Reveal in source code'를 누르면 해당 미디어 쿼리가 작성된 CSS 파일의 코드 위치로 즉시 이동할 수 있어 유지보수에 매우 유용하다.

[표] 기기별 미디어 쿼리 중단점 가이드표

기기 구분	중단점 (Breakpoints)	분기 기준 (min/max-width)
모바일 (Mobile)	~ 767px	기본 스타일 지정 (Mobile First 전략)
태블릿 (Tablet)	768px ~ 1023px	min-width: 768px
데스크탑 (Desktop)	1024px ~	min-width: 1024px

[예제 코드] 미디어 쿼리 분기 처리 및 화면 회전 제어 예시

CSS

/* 기본 스타일 (모바일 우선 적용) */
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; }
}

/* 기기가 가로 모드(Landscape)일 때만 배경색 변경 */
@media screen and (orientation: landscape) {
  body { background-color: lightblue; }
}

학습 정리

미디어 쿼리는 콘텐츠가 깨지기 시작하는 지점을 중단점으로 잡는 것이 가장 좋다
모바일 우선(Mobile First) 방식은 기본 CSS를 모바일용으로 작성하고, @media (min-width: ...)를 써서 확장해 나가는 효율적인 전략
미디어쿼리 세팅을 위한 통계 사이트: (https://gs.statcounter.com/)

+ 미디어쿼리 스펙 추천

미디어쿼리 상단, 디폴트는 모바일온리 코딩으로 작성한다.

모바일 온리 아래에 이 미디어쿼리를 작성

@media screen and (min-width: 1366px) {

}

1366은 HD를 의미

모바일부터 HD까지는 FLEX를 권장

HD이상 단순한 박스는 FLEX권장

HD이상 복잡한 박스는 1000px or 1200px FIX권장

위 스펙을 설치한 예제

https://codepen.io/lshjju/pen/xxXemMJ?editors=1100

material-html-css-default-improvement

...

codepen.io

다크 모드 대응

사용자가 시스템에서 다크 모드를 사용 중인지 확인한다.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

애니메이션 줄이기

광과민성 증후군이나 멀미를 느끼는 사용자를 위해 애니메이션을 최소화한다.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

고해상도 디스플레이 대응

애플의 레티나 디스플레이처럼 픽셀 밀도가 높은 기기를 위해 더 선명한 이미지를 제공할 때 사용한다.

@media (min-resolution: 2dppx) {
  /* 고해상도 배경 이미지 적용 등 */
}

'코딩 > CSS' 카테고리의 다른 글

[TIL] CSS: 조합 선택자와 속성 선택자를 활용한 정교한 스타일링 (1)	2026.03.25
[TIL] CSS: Flexbox를 이용한 반응형 웹 디자인과 공간 배분 기법 (1)	2026.03.24
[TIL] CSS: 시각적 완성도를 높이는 배경(Backgrounds)과 그라데이션(Gradients) (1)	2026.03.20
[TIL] CSS: 패딩(Padding), 디스플레이(display), 플롯(float) 및 포지션 제어 (1)	2026.03.19
[TIL] CSS: 리스트, 테이블, 박스 모델과 마진/보더 정리 (2)	2026.03.18

현재글[TIL] CSS: 미디어 쿼리, em/rem, 반응형 웹과 이미지

haehaee 님의 블로그

haehaee 님의 블로그 입니다.

CSS함수, 가상클래스, ui구현, css, 반응형웹, CSS레이아웃, flexbox, 프론트엔드, 가상요소, 플렉스박스, 반응형이미지, rem단위, 속성선택자, CSSTransition, 미디어쿼리, 웹퍼블리싱, 코딩공부, 코드연습장, CSStransform, Til,

Today :
Yesterday :

haehaee 님의 블로그