CSS_미디어쿼리 & Viewport

Mary·2025년 2월 4일

CSS

목록 보기

14/19

📢 미디어쿼리란?

CSS 미디어쿼리(Media Query)는 웹 페이지가 다양한 디바이스와 화면 크기에 맞게 반응형으로 동작하도록 스타일을 적용하는 방법.

즉, 화면의 크기, 해상도, 방향(세로/가로), 디바이스 유형에 따라 다른 CSS 스타일을 적용할 수 있음.

📍 기본 문법

@media (조건) {
  /* 조건이 참일 때 적용할 CSS */
  selector {
    property: value;
  }
}

예시

@media screen and (max-width: 500px) {
  /* 스크린의 너비가 500px 이하일 경우 적용될 스타일 시트를 작성합니다. */
}

📌 각 요소의 의미 분석

1️⃣ @media

@media는 미디어 쿼리를 시작할 때 사용하는 CSS 규칙
"이제부터 특정 조건에 맞는 스타일을 정의하겠다"는 의미로, 미디어 쿼리의 선언부라고 볼 수 있음

2️⃣ screen

screen은 미디어 타입(media type)을 지정
이 경우, 스타일이 디지털 화면(스크린)에 적용됨을 의미
참고로 print(인쇄용), speech(음성 합성 장치용) 같은 다른 타입도 존재합니다.

3️⃣ (max-width: 500px)

이 부분은 미디어 특성(media feature)입니다.
max-width: 500px는 뷰포트(viewport)의 너비가 500px 이하일 때 스타일이 적용된다는 조건.
즉, 모바일과 같이 화면이 작은 기기에서 유용하게 활용.

4️⃣ and

and는 여러 조건을 결합할 때 사용
위의 예제에서는 screen과 max-width: 500px 조건이 모두 참일 때 스타일이 적용
조건을 추가로 연결하면 더 세밀한 제어가 가능

✅ 예제 1: 화면 너비에 따라 스타일 변경하기

/* 기본 스타일 */
body {
  background-color: white;
  font-size: 16px;
}

/* 화면 너비가 768px 이하일 때 */
@media (max-width: 768px) {
  body {
    background-color: lightgray;
    font-size: 14px;
  }
}

설명:
- 화면이 768px보다 클 때 → 배경이 흰색, 글씨 크기 16px
- 화면이 768px 이하일 때 → 배경이 회색, 글씨 크기 14px로 변경

✅ 예제 2: 가로/세로 방향에 따라 스타일 적용

@media (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

@media (orientation: portrait) {
  body {
    background-color: lightgreen;
  }
}

설명:
- 가로 모드(landscape)일 때 → 배경색이 연한 파란색
- 세로 모드(portrait)일 때 → 배경색이 연한 초록색

📢 자주 사용하는 미디어쿼리 조건

max-width: 특정 너비 이하일 때 적용
min-width: 특정 너비 이상일 때 적용
orientation: landscape(가로), portrait(세로)
resolution: 화면 해상도에 따라 적용 (예: 레티나 디스플레이 대응)

💡 반응형 웹 디자인에서의 활용

미디어쿼리를 사용하면 하나의 CSS 파일로 PC, 태블릿, 모바일 등 다양한 환경에 맞춰 웹 페이지를 만들 수 있음. 그래서 요즘은 거의 필수적으로 사용됨

📢 Viewport란?

Viewport는 웹 페이지가 표시되는 디바이스의 화면 영역을 말함. 즉, 사용자가 보고 있는 화면의 가시 영역(visible area).

PC에서는 브라우저 창 크기가 Viewport가 되고,
모바일에서는 디바이스의 화면 전체가 Viewport로 사용됨.

✅ 왜 중요한가?

과거에는 웹 페이지가 데스크탑에 맞춰 만들어졌기 때문에 모바일에서 보면 글자나 레이아웃이 너무 작게 보였음. 이 문제를 해결하기 위해 Viewport 설정이 중요해짐.

📍 Viewport 설정 방법 (meta 태그)

HTML의 <head> 태그 안에 아래와 같이 작성:

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

width=device-width → 디바이스의 화면 너비에 맞게 페이지를 표시
initial-scale=1.0 → 페이지의 초기 확대/축소 비율을 1로 설정 (100%)

🔘 예제 비교

1️⃣ Viewport 설정이 없는 경우

모바일에서 웹 페이지가 축소된 상태로 작게 표시됨
사용자가 확대해야 글씨가 잘 보임

2️⃣ Viewport 설정이 있는 경우

모바일 화면에 맞게 자동으로 크기가 조정됨
별도의 확대 없이도 보기 편함

💡 추가 옵션들

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=no">

maximum-scale=1.5 → 최대 확대 비율을 1.5배로 제한
user-scalable=no → 사용자가 확대/축소하는 기능 비활성화

📌 Viewport와 Media Query의 관계

Viewport는 "보여줄 화면의 기본 크기"를 설정하고,
Media Query는 이 Viewport의 크기에 따라 스타일을 다르게 적용함.

📢 BreakPoint란?

BreakPoint란 반응형 웹 페이지에서 디자인이나 레이아웃이 변화하는 기준점을 의미.

간단히 말하면, PC, Tablet, Mobile과 같은 기기 유형에 따라 레이아웃을 조절하기 위해 설정하는 화면 너비 기준

이 기준점이 되는 너비를 설정함으로써, 다양한 화면 크기에서도 사용자에게 최적화된 UI를 제공할 수 있음.

📍가장 일반적인 BreakPoint 분류

크기	BreakPoint
Mobile	0 ~ 767px
Tablet	768px ~ 1923px
PC	1024px ~ 1439px
PC Large	1440px 이상

Mobile (0~767px): 주로 스마트폰과 같은 작은 화면 디바이스
Tablet (768~1923px): 태블릿과 작은 노트북
PC (1024~1439px): 일반적인 데스크탑 및 노트북
PC Large (1440px 이상): 대형 모니터나 고해상도 디스플레이

📍 BreakPoint 설정 시 주의할 점

이 표는 가장 일반적인 규격일 뿐이며, 프로젝트의 목적이나 타겟 사용자에 따라 더 세분화하거나 단순화할 수 있음.

더 세부적으로 나눌 경우:
더 정교한 디자인이 가능하지만, 그만큼 개발 시간과 비용이 증가.
적은 BreakPoint 사용:
개발 효율은 높아지지만, 특정 기기에서는 최적화가 부족할 수 있음.

🔘 BreakPoint 활용 예제

/* 모바일용 스타일 */
@media (max-width: 767px) {
  body {
    background-color: lightgray;
    font-size: 14px;
  }
}

/* 태블릿용 스타일 */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    background-color: lightblue;
    font-size: 16px;
  }
}

/* PC용 스타일 */
@media (min-width: 1024px) {
  body {
    background-color: white;
    font-size: 18px;
  }
}

결과 설명:

모바일(0~767px): 배경이 회색, 글씨 크기 14px
태블릿(768~1023px): 배경이 연한 파란색, 글씨 크기 16px
PC(1024px 이상): 배경이 흰색, 글씨 크기 18px

🌿 반응형 웹에 자주 쓰이는 속성 개념 정리

✅ `max-width` / `max-height`

의미: 요소의 최대 크기를 제한하는 속성
용도: 콘텐츠가 너무 커지는 것을 방지

사용법:

max-width: 1240px;   /* 가로 최대 1240px로 제한 */
max-height: 100vh;   /* 세로 최대 화면 높이(100vh)로 제한 */

✅ `min-width` / `min-height`

의미: 요소의 최소 크기를 설정하는 속성
용도: 콘텐츠가 너무 작아지는 것을 방지

사용법:

min-width: 720px;    /* 가로 최소 720px로 설정 */
min-height: 30%;     /* 세로 최소 30%로 설정 */

✅ `max()`

의미: 괄호 안의 값들 중 가장 큰 값을 선택하는 함수
용도: 상황에 따라 유동적으로 더 큰 크기를 자동 적용

사용법:

height: max(320px, 20%);   /* 320px과 20% 중 더 큰 값이 적용됨 */

✅ `min()`

의미: 괄호 안의 값들 중 가장 작은 값을 선택하는 함수
용도: 요소의 크기를 제한할 때 최소값 설정

사용법:

width: min(1240px, 100%);  /* 1240px과 100% 중 더 작은 값이 적용됨 */

Mary

이전 포스트

CSS_height & width 100% 설정시 부모 상속에 관해서

다음 포스트

CSS_미디어쿼리 & Viewport

CSS

📢 미디어쿼리란?

📍 기본 문법

📌 각 요소의 의미 분석

1️⃣ @media

2️⃣ screen

3️⃣ (max-width: 500px)

4️⃣ and

✅ 예제 1: 화면 너비에 따라 스타일 변경하기

✅ 예제 2: 가로/세로 방향에 따라 스타일 적용

📢 자주 사용하는 미디어쿼리 조건

💡 반응형 웹 디자인에서의 활용

📢 Viewport란?

✅ 왜 중요한가?

📍 Viewport 설정 방법 (meta 태그)

🔘 예제 비교

💡 추가 옵션들

📌 Viewport와 Media Query의 관계

📢 BreakPoint란?

📍가장 일반적인 BreakPoint 분류

📍 BreakPoint 설정 시 주의할 점

🔘 BreakPoint 활용 예제

결과 설명:

🌿 반응형 웹에 자주 쓰이는 속성 개념 정리

✅ `max-width` / `max-height`

✅ `min-width` / `min-height`

✅ `max()`

✅ `min()`

CSS_height & width 100% 설정시 부모 상속에 관해서

CSS_transform

0개의 댓글

CSS_미디어쿼리 & Viewport

CSS

📢 미디어쿼리란?

📍 기본 문법

📌 각 요소의 의미 분석

1️⃣ @media

2️⃣ screen

3️⃣ (max-width: 500px)

4️⃣ and

✅ 예제 1: 화면 너비에 따라 스타일 변경하기

✅ 예제 2: 가로/세로 방향에 따라 스타일 적용

📢 자주 사용하는 미디어쿼리 조건

💡 반응형 웹 디자인에서의 활용

📢 Viewport란?

✅ 왜 중요한가?

📍 Viewport 설정 방법 (meta 태그)

🔘 예제 비교

💡 추가 옵션들

📌 Viewport와 Media Query의 관계

📢 BreakPoint란?

📍가장 일반적인 BreakPoint 분류

📍 BreakPoint 설정 시 주의할 점

🔘 BreakPoint 활용 예제

결과 설명:

🌿 반응형 웹에 자주 쓰이는 속성 개념 정리

✅ max-width / max-height

✅ min-width / min-height

✅ max()

✅ min()

CSS_height & width 100% 설정시 부모 상속에 관해서

CSS_transform

0개의 댓글

✅ `max-width` / `max-height`

✅ `min-width` / `min-height`

✅ `max()`

✅ `min()`