1. 반응형 웹 디자인이란?
반응형 웹 디자인(Responsive Web Design)은 다양한 화면 크기와 해상도에 맞춰 웹 페이지의 레이아웃과 스타일을 동적으로 조정하는 웹 디자인 방식입니다. 반응형 웹 디자인을 사용하면 디바이스에 상관없이 사용자에게 최적화된 웹 페이지를 제공합니다.
2. 미디어 쿼리(Media Query)
미디어 쿼리는 특정 조건(화면 크기, 해상도 등)에 따라 CSS 스타일을 적용하는 방법입니다. 화면 너비를 기준으로 모바일, 태블릿, 데스크톱 등 디바이스별 스타일을 지정할 수 있습니다.
미디어 쿼리 기본 문법
@media (조건) {
/* 조건이 참일 때 적용할 CSS */
}예제: 화면 너비 조건
/* 화면 너비가 768px 이하일 때 */
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}위 코드는 화면 너비가 768px 이하일 때 body의 배경색을 lightblue로 변경합니다.
3. 미디어 쿼리 주요 조건
1) max-width
화면의 최대 너비를 지정하여 특정 화면 이하에서만 스타일을 적용합니다. 주로 모바일 우선 디자인에 사용됩니다.
@media (max-width: 600px) {
.container {
font-size: 14px;
}
}2) min-width
화면의 최소 너비를 지정하여 특정 화면 이상에서 스타일을 적용합니다. 주로 데스크톱 우선 디자인에 사용됩니다.
@media (min-width: 1024px) {
.container {
font-size: 18px;
}
}3) orientation
기기의 방향을 지정하여 스타일을 적용합니다. 가로 모드(landscape)와 세로 모드(portrait) 중 하나를 선택할 수 있습니다.
@media (orientation: landscape) {
.sidebar {
display: none;
}
}4. 미디어 쿼리를 사용한 반응형 레이아웃
미디어 쿼리를 사용하여 모바일, 태블릿, 데스크톱 환경에 맞게 레이아웃을 조정하는 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹 디자인 예제</title>
<style>
/* 기본 레이아웃 - 데스크톱 */
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 10px;
padding: 20px;
}
.sidebar {
background-color: #f4f4f4;
padding: 10px;
}
.content {
background-color: #ddd;
padding: 10px;
}
/* 태블릿 레이아웃 - 768px 이하 */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.sidebar {
order: 2;
}
.content {
order: 1;
}
}
/* 모바일 레이아웃 - 480px 이하 */
@media (max-width: 480px) {
.container {
padding: 10px;
}
.sidebar, .content {
padding: 5px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
</body>
</html>코드 설명
- 데스크톱 레이아웃: 기본적으로 2열 그리드 레이아웃을 사용하여 사이드바와 콘텐츠가 나란히 배치됩니다.
- 태블릿 레이아웃: 화면 너비가 768px 이하일 때 한 줄 레이아웃으로 변경되며, order 속성으로 콘텐츠가 사이드바 위에 위치하게 합니다.
- 모바일 레이아웃: 화면 너비가 480px 이하일 때 padding을 줄여 공간을 절약합니다.
5. 반응형 단위와 크기 지정 방법
1) vw와 vh
vw와 vh는 뷰포트 너비와 높이에 비례하여 크기를 지정하는 단위입니다.
- 1vw는 뷰포트 너비의 1%에 해당합니다.
- 1vh는 뷰포트 높이의 1%에 해당합니다.
.container {
width: 80vw; /* 뷰포트 너비의 80% */
height: 50vh; /* 뷰포트 높이의 50% */
}2) rem과 em
rem과 em은 폰트 크기를 기준으로 크기를 설정하는 단위입니다. rem은 루트 폰트 크기를 기준으로 하고, em은 부모 요소의 폰트 크기를 기준으로 합니다.
.container {
font-size: 1.5rem; /* 루트 폰트 크기의 1.5배 */
padding: 2em; /* 부모 폰트 크기의 2배 */
}6. 미디어 쿼리와 반응형 디자인 예제
아래는 vw, vh, rem 단위와 미디어 쿼리를 함께 사용하여 다양한 화면 크기에 맞춰지는 반응형 웹 페이지 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹 디자인 예제</title>
<style>
body {
font-size: 16px;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 2rem;
font-size: 2rem;
}
.container {
display: flex;
flex-direction: column;
padding: 2vw;
}
.content {
background-color: #f4f4f4;
padding: 2em;
margin-bottom: 1rem;
}
/* 태블릿 레이아웃 - 768px 이하 */
@media (max-width: 768px) {
header {
font-size: 1.5rem;
padding: 1.5rem;
}
.container {
padding: 5vw;
}
}
/* 모바일 레이아웃 - 480px 이하 */
@media (max-width: 480px) {
header {
font-size: 1.2rem;
padding: 1rem;
}
.container {
padding: 3vw;
}
}
</style>
</head>
<body>
<header>
반응형 웹 디자인 예제
</header>
<div class="container">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>
</body>
</html>코드 설명
- 기본 레이아웃: 뷰포트 너비와 높이에 따라 유연하게 변하도록 vw, vh, rem 단위를 사용했습니다.
- 태블릿 및 모바일 레이아웃: 미디어 쿼리를 사용하여 화면이 줄어들수록 텍스트 크기와 내부 여백을 줄입니다.
요약
이번 강의에서는 반응형 웹 디자인의 기본 개념과 미디어 쿼리 사용법을 배웠습니다. 다양한 화면 크기에서 적절한 레이아웃과 스타일을 적용할 수 있어, 모바일 환경에서도 일관성 있고 사용하기 쉬운 웹 페이지를 만들 수 있습니다. 다음 강의에서는 CSS 애니메이션과 트랜지션을 활용하여 웹 페이지에 시각적 효과를 추가하는 방법을 알아보겠습니다.
'Study > CSS' 카테고리의 다른 글
| CSS 기초 강의 8편: 웹 접근성과 시맨틱 태그 활용하기 (0) | 2024.11.23 |
|---|---|
| CSS 기초 강의 7편: CSS 애니메이션과 트랜지션으로 시각 효과 만들기 (0) | 2024.11.22 |
| CSS 기초 강의 5편: Grid 레이아웃을 활용한 2차원 레이아웃 구성하기 (0) | 2024.11.20 |
| CSS 기초 강의 4편: Flexbox를 사용한 유연한 레이아웃 구성하기 (0) | 2024.11.19 |
| CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델 (0) | 2024.11.18 |
