[CSS]반응형 웹

1. 반응형 웹 소개

1.1 반응형 웹이란?

• 사용자의 화면 크기에 따라 웹페이지가 유동적으로 변하는 웹 디자인 기법
• 미디어 쿼리(media query)를 사용하여 화면 크기에 맞게 스타일을 조정

✅ 반응형 웹이 필요한 이유

• 모바일, 태블릿, 데스크톱 등 다양한 기기에서 일관된 사용자 경험(UX) 제공
• 화면 크기별로 별도 웹사이트를 만들 필요 없이 CSS로 최적화 가능

✅ 핵심 요점 정리

항목	설명
반응형 웹	다양한 화면 크기에 적응하는 웹 디자인
핵심 기술	미디어 쿼리 사용
필요성	UX 향상, 유지보수 용이, SEO 최적화

---

2. 반응형 웹을 위한 설정

2.1 뷰포트(Viewport) 설정

• 반응형 웹에서 가장 중요한 설정은 뷰포트(Viewport) 메타 태그
• 모바일 화면에서 자동 확대 방지 및 크기 조정을 위해 사용

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

값	설명	예
width	화면 너비	`width=240`
height	화면 높이	`height=800`
initial-scale	초기 확대 비율	`initial-scale=2.0`
user-scalable	확대 및 축소 가능 여부	`user-scalable=no`
minimum-scale	최소 축소 비율	`minimum-scale=1.0`
maximum-scale	최대 확대 비율	`maximum-scale=2.0`
target-densitydpi	DPI 지정	`target-densitydpi=medium-dpi`

📌 올바른 vs 잘못된 예제 비교

✅ 올바른 예제:

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

 

❌ 잘못된 예제:

<meta name="viewport" content="width=500">  <!-- 특정 크기에 고정됨 -->

👉 특정 픽셀에 고정되면 반응형 디자인이 깨질 수 있음

2.2 미디어 쿼리(Media Query)

• CSS에서 특정 화면 크기(해상도)에 따라 스타일을 다르게 적용하는 기능
• @-규칙: 스타일시트 내부에서 특정한 규칙을 표현

@media screen and (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

• `max-width`는 특정 크기 이하에서 스타일 적용
• `min-width`는 특정 크기 이상에서 스타일 적용
• `orientation: landscape` → 가로 모드 스타일 적용

2.3 미디어 속성 활용 (`link` 태그)

• CSS 파일을 장치 유형별로 따로 적용 가능

<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 959px)">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)">

	미디어 타입	설명
지원하는 미디어 타입	all	모든 장치
	aural	음성 장치
	braille	표시 전용 점자 장치
	handheld	손으로 들고 다니는 작은 장치
	print	프린터
	projection	프로젝터
	screen	화면
	tty	터미널 등 그림을 띄울 수 없는 장치
	tv	텔레비전
	embossed	인쇄 전용 점자 장치
미디어 타입 연산자	only	'해당 장치에서만'을 나타냄
	not	'해당 장치를 제외한'을 나타냄

 

✅ 핵심 요점 정리

항목	설명
뷰포트 설정	`<meta name="viewport" content="width=device-width, initial-scale=1">`
미디어 쿼리	특정 화면 크기별 CSS 적용
미디어 속성	CSS 파일을 장치별로 다르게 적용

---

3 반응형 웹 패턴

3.1 반응형 웹 패턴의 필요성

• 반응형 웹을 구현할 때, 콘텐츠 배치 방식이 중요함
• 일반적으로 4가지 대표적인 반응형 웹 패턴을 사용

3.2 반응형 웹 패턴 1 - 고정형 + 유동형 혼합

• 데스크톱에서는 좌우 분할 레이아웃
• 모바일에서는 세로형 레이아웃으로 변경

@media screen and (max-width: 767px) {
    #menu, #section {
        width: auto;
        float: none;
    }
}

 

3.3 반응형 웹 패턴 2 - 메뉴 위치 변경

• 메뉴가 오른쪽에서 왼쪽으로 이동
• 화면이 좁아지면 세로 정렬

@media screen and (max-width: 767px) {
    #menu {
        width: 100%;
        float: none;
    }
}

 

3.4 반응형 웹 패턴 3 - 콘텐츠 순서 변경

• 모바일에서 콘텐츠 순서를 다르게 표시할 수 있음
• `flexbox`를 활용하면 손쉽게 구현 가능

.container {
    display: flex;
    flex-direction: row-reverse;
}

 

3.5 반응형 웹 패턴 4 - 전체 콘텐츠 너비 조정

• 화면 크기에 따라 콘텐츠가 유동적으로 변함
• `max-width`를 활용하여 조절

.container {
    max-width: 1200px;
    margin: 0 auto;
}

 

✅ 핵심 요점 정리

패턴	설명
패턴 1	고정형 + 유동형 혼합
패턴 2	메뉴 위치 변경
패턴 3	콘텐츠 순서 변경
패턴 4	전체 콘텐츠 너비 조정

---

📎 참고자료

• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)
• MDN 미디어 쿼리 공식 문서