CSS - 8

- RWD

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

반응형 웹을 만드는 3가지 핵심 요소

반응형 웹은 마법처럼 작동하는 것이 아니라, 세 가지 기술적인 약속을 기반으로 만들어집니다.

그리드 시스템 (Fluid Grid): 요소를 배치할 때 px 같은 고정 단위가 아니라 %나 vw 같은 상대 단위를 사용합니다. 덕분에 화면이 넓어지면 넓게, 좁아지면 좁게 비율에 맞춰 늘어납니다.
유연한 이미지 (Flexible Images): 이미지의 가로 크기를 최대 100%로 설정하여, 화면이 작아져도 이미지가 화면 밖으로 삐져나가지 않고 부모 요소의 크기에 맞춰 함께 작아지게 합니다.
미디어 쿼리 (Media Queries): CSS의 핵심 기능으로, "화면 너비가 768px 이하가 되면 글자 크기를 줄이고 세로로 배치해라" 같은 조건문을 달아 디자인을 변경합니다.

반응형 웹의 장점과 단점

장점	설명
유지보수의 효율성	하나의 소스 코드만 관리하면 모든 기기에 대응할 수 있어 경제적입니다.
검색 엔진 최적화(SEO)	주소(URL)가 하나로 통일되어 구글 검색 로봇이 인덱싱하기에 매우 유리합니다.
일관된 사용자 경험	어떤 기기로 접속해도 동일한 브랜드 이미지와 콘텐츠를 경험할 수 있습니다.

단점	설명
초기 개발 비용	~~다양한 화면 크기를 고려하여 설계하고 테스트해야 하므로 설계 시간이 길어집니다.~~
로딩 속도 이슈	모바일 사용자도 PC용 고해상도 이미지를 함께 다운로드받을 수 있어 데이터 소모가 생길 수 있습니다.

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

많은 분이 **적응형 웹(AWD)**과 헷갈려하시는데, 그 차이는 '변화의 방식'에 있습니다.

반응형(RWD): 화면이 1px씩 변할 때마다 실시간으로 물 흐르듯 부드럽게 변합니다. (제작은 힘들지만 결과는 유연함)
적응형(AWD): 정해진 구간(예: 320px, 768px, 1200px)에 도달할 때만 툭툭 끊기듯 레이아웃이 바뀝니다. 보통 PC용과 모바일용 페이지를 따로 만드는 경우가 많습니다.

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

- Viewport

뷰포트(Viewport)는 한마디로 "웹사이트가 실제로 보여지는 영역"을 의미

뷰포트가 왜 필요한가요?

과거의 웹사이트는 오직 PC 화면을 기준으로 만들어졌습니다. 이런 사이트를 스마트폰에서 접속하면 어떤 일이 벌어질까요?

기본 동작: 브라우저는 PC 화면(약 980px)을 통째로 렌더링한 뒤, 이를 모바일 화면 크기에 맞춰 아주 작게 축소시켜 보여줍니다.
문제점: 글자는 개미만 해지고, 버튼을 누르기도 힘든 상태가 됩니다.

이를 해결하기 위해 브라우저에게 **"이 기기의 가로 너비에 맞춰서 화면을 다시 그려줘!"**라고 명령하는 도구가 바로 뷰포트 설정입니다.

뷰포트 설정 코드 (The Meta Tag)

우리가 HTML 프로젝트를 만들 때 자동으로 생기는 다음 코드가 바로 뷰포트 설정의 핵심입니다.

HTML

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

width=device-width: 웹사이트의 가로 너비를 접속한 기기(스마트폰, 태블릿 등)의 실제 화면 너비와 똑같이 맞추라는 뜻입니다.
initial-scale=1.0: 페이지가 처음 로딩될 때 확대/축소 비율을 1:1(기본값)로 설정하라는 뜻입니다.

뷰포트의 종류 리스트

개발자가 알아두어야 할 뷰포트의 개념은 크게 두 가지로 나뉩니다.

레이아웃 뷰포트 (Layout Viewport): 브라우저가 웹사이트를 그릴 때 기준으로 삼는 가상의 캔버스 크기입니다.
비주얼 뷰포트 (Visual Viewport): 현재 사용자가 자신의 화면을 통해 실제로 보고 있는 영역입니다. (손가락으로 화면을 확대하면 비주얼 뷰포트는 작아지지만, 레이아웃 뷰포트는 그대로 유지됩니다.)

실무자의 시선

실무에서 뷰포트를 다룰 때 주의해야 할 '디테일'이 있습니다.

반응형의 시작점: 뷰포트 메타 태그가 없다면, 아무리 CSS에서 미디어쿼리를 잘 짜도 모바일에서 정상적으로 작동하지 않습니다.
사용자 확대 제한 금지: 과거에는 디자인을 유지하려고 user-scalable=no를 넣어 확대를 막기도 했지만, 이는 시력이 좋지 않은 사용자의 접근성을 해치는 행위이므로 현재는 사용하지 않는 것이 권칙입니다.
단위 선택: 뷰포트의 크기에 맞춰 요소를 배치하고 싶을 때는 px 대신 vw(Viewport Width)나 vh(Viewport Height)라는 단위를 사용하면 화면 크기에 따라 유연하게 변하는 디자인을 만들 수 있습니다.

- 크롬 브라우저의 디바이스 모드 활용하기

크롬 디바이스 모드

https://developers.naver.com/main/

위 사이트에 진입 하세요.

F12 개발자 도구를 오픈 하세요.

1단계 디바이스 모드 시작하기

2단계 화면 크기에 따라 확인하기

3단계 작은 화면 크기로 바꾸기

- em rem

em (Element)

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

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

rem (Root em)

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

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

실전 예제 코드: "중첩에 따른 차이 확인"

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>

em vs rem 핵심 비교표

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

학습 정리

rem을 사용하면 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 웹사이트 전체가 그에 맞춰 유동적으로 변하므로
웹 접근성에 좋습니다.
실무에서는 계산의 편리함을 위해 rem을 기본 단위로 사용하고, 버튼의 여백처럼 글자 크기에 딱 붙어서 변해야 하는 부분에만 em을 섞어서 씁니다.자 크기에 딱 붙어서 변해야 하는 부분에만 em을 섞어서 씁니다.

- RWD Image

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	아트 디렉션, 포맷 대응	화면 크기별 아예 다른 구도의 사진 노출
WebP/Avif	최신 포맷 지원	브라우저 사양에 따른 고효율 압축 포맷 제공

학습 정리

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

- Media query

정의 (Definition)

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

미디어 쿼리 구문

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

CSS

@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 ~

미디어 쿼리 적용 방법

1) 외부 CSS 파일 연결하기

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

HTML

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

2) 웹 문서에 직접 정의하기

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)' 옵션을 활성화하면, 설정된 중단점들이 색상 막대 형태로 표시되어 레이아웃 변화를 실시간으로 확인할 수 있습니다.

학습 정리

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

- 모바일 기기의 뷰포트 크기 체크하기

https://yesviz.com/devices.php

Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular Devices | YesViz

A Useful database contains Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular devices including phones, tablets, smart watches and laptops.

yesviz.com

- 크롬 개발자 도구에서 미디어쿼리 확인하는 방법

기기 툴바 및 미디어쿼리 바 활성화

먼저 개발자 도구를 열고 기기 모드로 진입해야 합니다.

개발자 도구 실행: F12 또는 Ctrl + Shift + I를 누릅니다.
기기 툴바 켜기: 왼쪽 상단에 있는 스마트폰/태블릿 모양 아이콘을 클릭합니다.
미디어쿼리 바 표시: 기기 툴바가 활성화된 상태에서 오른쪽 상단의 세로 점 3개(⋮) 메뉴를 누른 뒤, **[Show media queries]**를 클릭합니다.

미디어쿼리 막대 읽는 법

Show media queries를 선택하면 브라우저 상단에 파란색, 초록색, 주황색의 가로 막대들이 나타납니다.

파란색 막대 (max-width): 설정된 너비보다 작을 때 적용되는 스타일 구간입니다.
초록색 막대 (min-width & max-width): 특정 범위 사이에서만 적용되는 스타일 구간입니다.
주황색 막대 (min-width): 설정된 너비보다 클 때 적용되는 스타일 구간입니다.

해당 막대를 클릭하기만 하면 브라우저가 즉시 그 너비로 조절되어, 작성한 미디어쿼리가 잘 작동하는지 바로 확인할 수 있습니다.

실무 팁: 소스 코드로 바로 가기

미디어쿼리 확인 도중 스타일을 수정하고 싶을 때는 다음 방법을 써보세요.

코드 확인: 상단 막대 위에서 마우스 오른쪽 버튼을 클릭합니다.
Reveal in source code: 이 메뉴를 선택하면 해당 미디어쿼리가 정의된 CSS 파일의 정확한 위치(Line)로 즉시 이동시켜 줍니다.
직접 조절: 막대를 클릭하는 것 외에도 상단 숫자를 직접 입력하거나, 화면 옆의 핸들을 마우스로 드래그하여 실시간으로 디자인이 깨지는 지점을 찾을 수 있습니다.

실무자의 시선

개발자 도구의 이 기능은 단순히 확인용을 넘어 '최적화'를 위한 도구입니다.

누락된 구간 방지: 막대를 하나씩 클릭해 보며 600px에서 768px 사이 등 '애매한 구간'에서 디자인이 무너지지 않는지 전수 조사할 수 있습니다.
기기별 최적화: 미리 정의된 iPhone, iPad 등의 프리셋을 클릭해 보는 것도 좋지만, 미디어쿼리 막대를 이용해 범용적인 화면 크기 대응에 집중하는 것이 더 견고한 웹을 만드는 비결입니다.

- 미디어쿼리 세팅을 위해 statcounter.com 활용하기

반응형 웹을 개발하시는 프론트엔드 개발자라면 Statcounter(Global Stats)는 전략을 짤 때 가장 든든한 아군이 될 사이트입니다. 단순히 "아이폰이 많이 쓰인다" 수준을 넘어, 구체적인 화면 해상도(Resolution)나 브라우저 점유율 데이터를 시각적으로 확인할 수 있기 때문

https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.

gs.statcounter.com

메인 메뉴 활용하기 (원하는 데이터 찾기)

사이트에 접속하면 상단 메뉴 중 "Edit Chart Data" 버튼이나 왼쪽 사이드바의 카테고리를 눈여겨보세요. 개발자님께 가장 중요한 카테고리는 다음 세 가지입니다.

Screen Resolution: 반응형 중단점(Breakpoint)을 설정할 때 필수입니다.
Browser: flex나 grid 같은 최신 CSS 속성의 지원 범위를 결정할 때 참고합니다.
OS: iOS와 Android의 비중을 보고 특정 플랫폼 전용 버그 수정에 우선순위를 둡니다.

반응형 개발자를 위한 3단계 필터링

Statcounter의 진가는 필터(Filter) 설정에 있습니다. 차트 상단에서 다음 세 가지를 꼭 조정해 보세요.

① 리전(Region) 설정: "Global" vs "South Korea"

전 세계 타겟 서비스인지, 국내 전용 서비스인지에 따라 데이터가 완전히 다릅니다. 한국은 특히 삼성 기기(안드로이드)와 네이버 웨일 브라우저의 비중이 글로벌 평균보다 월등히 높으므로 반드시 **'South Korea'**로 변경해 보세요.

② 플랫폼(Platform) 선택: "Desktop" vs "Mobile" vs "Tablet"

반응형 웹을 만들 때 가장 고민되는 지점이죠. 'Combined'로 전체 흐름을 본 뒤, **'Mobile'**만 따로 선택하여 현재 가장 많이 쓰이는 모바일 해상도(예: 360x800, 390x844 등)를 확인하세요.

③ 기간(Period) 설정

기술의 변화는 빠릅니다. 보통 **'Last 12 Months'**로 흐름을 보거나, 가장 최근의 경향을 보려면 **'Last 3 Months'**로 설정하는 것이 정확합니다.

실무 활용 팁: "화면 해상도" 데이터 분석

반응형 중단점을 잡을 때 아래 표처럼 데이터를 해석해 보세요.

데이터 항목	개발자님의 액션 플랜
Desktop Resolution	1920x1080(FHD)이 여전한 대세인지, QHD(2560x1440) 비중이 느는지 확인하여 메인 컨텐츠 폭을 결정합니다.
Mobile Resolution	가장 점유율이 높은 해상도를 '기준'으로 잡고 UI 테스트를 진행합니다.
Browser Market Share	크롬 외에 사파리(Safari) 점유율을 체크하여 아이폰 특유의 렌더링 이슈(vh 단위 등)를 점검할지 결정합니다.

데이터 추출 및 공유

차트 오른쪽 상단의 **"Download Info"**나 "Export to CSV" 기능을 활용하면 엑셀 파일로 데이터를 받을 수 있습니다. 기획자나 디자이너에게 "왜 이 해상도를 지원해야 하는지" 근거 자료로 제출하기에 아주 좋습니다.

학습 정리

팁: 차트 아래에 있는 'Bar' 형태의 그래프로 바꾸면 순위를 한눈에 보기 훨씬 편합니다.

- 현재 대한민국에서 가장 많이 사용되는 모바일 디바이스 스펙 안내

현재 대한민국에서 가장 많이 사용되는 모바일 디바이스 스펙 통계를 세팅해 두었습니다.

필요하다면 참고하기 바랍니다.

https://gs.statcounter.com/screen-resolution-stats/mobile/south-korea

Mobile Screen Resolution Stats Republic Of Korea | Statcounter Global Stats

This graph shows the stats of mobile screen resolutions in South Korea based on over 5 billion monthly page views.

gs.statcounter.com

- 미디어쿼리 스펙 추천

필자추천 미디어쿼리 스펙 (강사님)

RWD 코딩을 하다 보면 미디어쿼리 스펙 기준을 어떻게 설정해야 할지 고민이 됩니다.

필자는 여러가지 이슈를 원인으로 아래 스펙을 추천 합니다.

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

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

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

}

미디어쿼리 상단 즉, 디폴트는 모바일온리 코딩으로 작성합니다.
여기서 1366px은 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

제미나이 추천 미디어쿼리 스펙

모던 웹 디자인에서 미디어 쿼리를 작성할 때 가장 중요한 변화는 '기기(Device)'가 아닌 '콘텐츠'와 '사용자 환경'에 집중하는 것입니다.

과거에는 단순히 아이폰이나 갤럭시의 가로 너비에 맞췄다면, 현재는 고해상도 디스플레이, 다크 모드, 그리고 새로운 CSS 문법을 활용하는 것이 정석입니다. 추천드리는 구문들을 정리해 드립니다.

반응형 중단점 (Breakpoints) 추천

기기 종류가 너무 다양해졌기 때문에 구체적인 기기명보다는 범용적인 범위를 사용하는 것이 좋습니다. 최근에는 Mobile First(모바일 우선) 전략에 따라 min-width를 주로 사용합니다.

분류	중단점 (Breakpoint)	설명
Mobile	기본 스타일	별도의 쿼리 없이 작성
Tablet	@media (width >= 768px)	태블릿 및 큰 폴더블 폰
Desktop	@media (width >= 1024px)	일반적인 노트북 및 데스크탑
Large Screen	@media (width >= 1440px)	고해상도 모니터

사용자 기본 설정 대응 (Preference Queries)

모던 웹에서는 화면 크기뿐만 아니라 사용자의 시스템 설정에 대응하는 것이 필수적입니다.

다크 모드 대응

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

CSS

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

애니메이션 줄이기

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

CSS

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

고해상도 디스플레이 대응 (Retina)

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

CSS

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

전문가의 팁: CSS 변수와 조합하세요

미디어 쿼리 내부에서 스타일을 일일이 변경하기보다, **CSS 변수(Custom Properties)**의 값만 교체하는 방식이 유지보수에 훨씬 유리합니다.

CSS

:root {
  --grid-columns: 1;
}

@media (width >= 768px) {
  :root {
    --grid-columns: 2;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

참고: 최신 문법인 Range Syntax(비교 연산자)는 대부분의 모던 브라우저에서 지원하지만, 아주 오래된 브라우저까지 대응해야 한다면 PostCSS 같은 도구를 사용하거나 기존 방식을 병행하는 것이 안전합니다.

'CSS' 카테고리의 다른 글

CSS - 10 (0)	2026.03.25
CSS - 9 (0)	2026.03.24
CSS - 7 (0)	2026.03.20
CSS - 6 (0)	2026.03.19
CSS - 5 _ 2 (0)	2026.03.18

CSS - 8

- RWD

반응형 웹을 만드는 3가지 핵심 요소

반응형 웹의 장점과 단점

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

- Viewport

뷰포트가 왜 필요한가요?

뷰포트 설정 코드 (The Meta Tag)

뷰포트의 종류 리스트

실무자의 시선

- 크롬 브라우저의 디바이스 모드 활용하기

- em rem

em (Element)

rem (Root em)

실전 예제 코드: "중첩에 따른 차이 확인"

em vs rem 핵심 비교표

학습 정리

- RWD Image

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

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

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

반응형 이미지 전략 요약표

학습 정리

- Media query

정의 (Definition)

미디어 쿼리 구문

미디어 유형의 종류

가로세로 및 회전 속성

미디어 쿼리 중단점 (Breakpoints)

미디어 쿼리 적용 방법

1) 외부 CSS 파일 연결하기

2) 웹 문서에 직접 정의하기

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

학습 정리

- 모바일 기기의 뷰포트 크기 체크하기

- 크롬 개발자 도구에서 미디어쿼리 확인하는 방법

기기 툴바 및 미디어쿼리 바 활성화

미디어쿼리 막대 읽는 법

실무 팁: 소스 코드로 바로 가기

실무자의 시선

- 미디어쿼리 세팅을 위해 statcounter.com 활용하기

메인 메뉴 활용하기 (원하는 데이터 찾기)

반응형 개발자를 위한 3단계 필터링

① 리전(Region) 설정: "Global" vs "South Korea"

② 플랫폼(Platform) 선택: "Desktop" vs "Mobile" vs "Tablet"

③ 기간(Period) 설정

실무 활용 팁: "화면 해상도" 데이터 분석

데이터 추출 및 공유

학습 정리

- 현재 대한민국에서 가장 많이 사용되는 모바일 디바이스 스펙 안내

- 미디어쿼리 스펙 추천

필자추천 미디어쿼리 스펙 (강사님)

제미나이 추천 미디어쿼리 스펙

최신 Range Syntax (범위 구문)

반응형 중단점 (Breakpoints) 추천

사용자 기본 설정 대응 (Preference Queries)

다크 모드 대응

애니메이션 줄이기

고해상도 디스플레이 대응 (Retina)

전문가의 팁: CSS 변수와 조합하세요

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바