Responsive Web Design
✅ 반응형 웹사이트(Responsive Website)의 필요성 :
사용자는 웹사이트를 휴대폰, 태블릿, 컴퓨터, TV 모니터 등 다양한 기기에서 접속한다.
이때 기기마다 화면 크기가 크게 다르기 때문에, 웹사이트는 화면 크기에 따라 콘텐츠를 재배치하고 크기를 조정해야 한다.
만약 웹사이트가 기기 크기에 맞게 반응하지 않는다면, 특히 작은 화면(예: 스마트폰)에서는 화면이 깨져 보이거나 아예 내용을 읽을 수 없게 된다.
이처럼 화면 크기에 따라 레이아웃이 자동으로 변하는 웹사이트를 반응형 웹사이트(Responsive Website) 라고 한다.
View Meat Tag
✅ Viewport 란? :
- Viewport는 사용자가 실제로 볼 수 있는 영역을 의미
- 기기에 따라 달라지며, 모바일에서는 좁고 데스크톱에서는 넓다.
✅ Viewport 메타 태그 :
기기의 화면 크기에 맞춰 웹페이지가 자동으로 조정되도록 브라우저에 지시한다.
예를 들어, 웹페이지가 960px인데 기기 화면이 320px이라면, viewport 메타 태그를 사용하면 콘텐츠가 자동으로 320px에 맞게 줄어든다.
✅ 예시 코드 :
<!DOCTYPE html>
<html lang="en">
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
</html>- name="viewport" : 브라우저에 화면 크기를 기기 크기에 맞추도록 지시
- content : 세부 값을 지정하는 영역
- width=device-width → 뷰포트의 너비를 기기 화면의 너비와 동일하게 설정
- initial-scale=1 → 초기 확대 비율을 1로 설정 (즉, 기본 크기로 표시)
✅ 정리 :
- Viewport 메타 태그는 반응형 웹의 필수 요소이다.
- 기기별 화면 크기에 맞게 콘텐츠가 자동으로 조정된다.
- CSS만으로는 부족하며, 반드시 HTML <head>에 포함시켜야 한다.
Media Queries
✅ CSS 미디어 쿼리(Media Query) :
웹사이트를 다양한 화면 크기에 맞게 조정하기 위해 CSS는 미디어 쿼리(Media Query)를 사용한다.
미디어 쿼리는 현재 화면의 크기를 감지하고, 그에 맞는 CSS 스타일을 적용할 수 있도록 해준다.
✅ 예시 코드 :
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}위 예시는 화면 너비가 480px 이하일 때, <body>의 글자 크기를 12px로 변경하는 규칙이다.
이는 스마트폰 가로 모드 정도의 화면 크기를 고려한 설정이다.
✅ 구문 설명 :
- @media
미디어 쿼리 규칙을 시작하는 키워드로, 이후 조건을 어떻게 해석할지 브라우저에 지시한다. - only screen
이 규칙이 적용될 디바이스 유형을 지정한다.- screen → 화면이 있는 모든 장치에 적용 (모바일, 태블릿, 데스크톱 등)
- only → 해당 미디어 타입에만 규칙을 적용한다는 의미
- and (max-width: 480px)
미디어 특징(Media Feature)을 지정한다.- max-width: 480px → 화면 너비가 480px 이하일 때 적용
- 즉, 조건이 충족되면 {} 안의 CSS가 실행된다.
- 중괄호 내부 규칙
미디어 쿼리가 충족될 경우 실행될 CSS 규칙을 정의한다. 위 예시에서는 글자 크기를 줄여 가독성을 유지한다.
✅ 정리 :
- 미디어 쿼리를 활용하면 기기별 화면 크기에 따라 다른 CSS를 적용할 수 있다.
- @media only screen and (조건) 형태로 작성한다.
- 대표적으로 max-width, min-width 조건을 사용해 모바일·태블릿·데스크톱에 맞는 반응형 디자인을 구현할 수 있다.
Range
✅ 특정 화면 크기 지정하기 (min-width, max-width 활용) :
미디어 쿼리(Media Query)는 화면의 최소/최대 너비와 높이를 기준으로 특정 범위에만 CSS를 적용할 수 있다.
✅ 기본 문법 :
- min-width / min-height → 화면의 최소 크기 이상일 때 적용
- max-width / max-height → 화면의 최대 크기 이하일 때 적용
이들을 조합하면 특정 범위를 지정할 수 있다.
✅ 예시 1. 범위 지정 :
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* 화면 너비가 320px 이상 480px 이하일 때 적용 */
}위 규칙은 320px 이상 ~ 480px 이하 범위에서만 실행된다. and 키워드를 사용해 조건을 연결한다.
✅ 예시 2. 분리된 규칙 :
@media only screen and (min-width: 320px) {
/* 화면 너비가 320px 이상일 때 적용 */
}
@media only screen and (min-width: 480px) {
/* 화면 너비가 480px 이상일 때 적용 */
}- 첫 번째 규칙: 320px 이상에서 실행
- 두 번째 규칙: 480px 이상에서 실행 → 첫 번째 규칙을 덮어쓰거나 추가 규칙을 적용할 수 있음
Dots Per Inch (DPI)
✅ 해상도(Media Feature: resolution) 기반 미디어 쿼리 :
웹사이트에서는 화면 해상도에 따라 다른 미디어(이미지, 동영상 등)를 제공할 수 있다.
특히, 고해상도 화면(Retina, 4K 등) 에서는 더 선명한 이미지를 제공하고, 일반 화면에서는 불필요하게 큰 파일을 내려받지 않도록 최적화하는 데 활용된다.
✅ 문법 :
- min-resolution → 최소 해상도 이상일 때 적용
- max-resolution → 최대 해상도 이하일 때 적용
- 단위: dpi(dots per inch), dpc(dots per centimeter)
✅ 예시 코드 :
@media only screen and (min-resolution: 300dpi) {
/* 고해상도 화면 전용 스타일 */
body {
background-image: url('high-res-bg.png');
}
}- 위 규칙은 300dpi 이상의 해상도를 가진 화면에서만 적용된다.
- 이를 통해 고해상도 이미지를 지원하는 기기에서만 큰 용량의 파일을 불러오도록 설정할 수 있다.
And Operator
✅ and 연산자를 활용한 다중 미디어 조건 :
앞서 학습한 것처럼 and 연산자는 여러 미디어 조건을 동시에 만족해야만 CSS 규칙을 적용하도록 만든다.
즉, 화면 크기뿐 아니라 해상도, 비율 등 다양한 조건을 조합할 수 있다.
✅ 예시 코드 :
@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
/* CSS ruleset */
body {
font-size: 12px;
background-image: url('high-res-mobile-bg.png');
}
}- 조건 1: 화면 너비 ≤ 480px
- 조건 2: 해상도 ≥ 300dpi
두 조건이 모두 충족될 때만 위의 CSS 규칙이 적용된다.
✅ 특징 :
- and 연산자는 필터를 좁히는 역할을 한다.
- 여러 조건을 동시에 만족하는 특정 기기 환경을 타겟팅할 수 있다.
- and는 필요에 따라 여러 개의 media feature를 계속 이어붙일 수 있다.
Comma Separated List
✅ ,(쉼표) 연산자를 활용한 OR 조건
여러 개의 media feature 중 하나라도 충족되면 CSS 규칙을 적용하고 싶을 때는 쉼표(,)를 사용한다.
쉼표는 OR 조건을 의미한다.
✅ 예시 코드 :
@media only screen and (min-width: 480px), (orientation: landscape) {
/* CSS ruleset */
body {
font-size: 14px;
background-color: lightblue;
}
}- 조건 1: 화면 너비 ≥ 480px
- 조건 2: 화면 방향이 가로(landscape)
위 예시는 두 조건 중 하나라도 참이면 CSS가 적용된다.
✅ orientation 속성 :
- orientation: landscape → 화면의 가로 길이 ≥ 세로 길이일 때
- orientation: portrait → 화면의 세로 길이 ≥ 가로 길이일 때
즉, 기기가 어떤 방향으로 사용되는지를 기준으로 스타일을 다르게 적용할 수 있다.
Breakpoints
✅ Breakpoints(브레이크포인트) 란? :
브레이크포인트(Breakpoints) 는 웹페이지 레이아웃이 더 이상 정상적으로 보이지 않는 화면 크기를 의미한다.
즉, 콘텐츠가 깨져 보이거나 불편해지는 지점에서 새로운 media query를 설정해야 한다.
✅ 예시 코드(태블릿 가로 모드) :
@media only screen and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape) {
/* CSS ruleset */
}- 화면 너비가 768px 이상 1024px 이하
- 화면 방향이 landscape(가로 모드)
해당 구간에서는 태블릿 가로 모드에 맞는 레이아웃을 적용할 수 있다.
✅ 브레이크포인트 설정 방법 :
- ❌ 모든 기기별 크기 지정 → 기기의 종류가 너무 많고, 매년 새로운 화면 크기가 출시됨
- ✅ 콘텐츠 기준으로 설정 → 브라우저를 줄이거나 늘리면서 레이아웃이 깨지는 지점을 직접 확인하고, 그 지점을 브레이크포인트로 삼는 것이 가장 효율적이다.
✅ best practice :
- 화면 크기별 대응이 아니라 콘텐츠 기준으로 브레이크포인트 설정
- 프로젝트마다 다른 레이아웃이 필요하므로, 프로젝트 맞춤형 브레이크포인트 사용
- 참고용으로 기기별 대표 화면 크기 리스트를 확인하며 테스트
참고
https://www.codecademy.com/enrolled/courses/learn-intermediate-css