5장: 반응형 웹 디자인
### 5.1 미디어 쿼리 (Media Queries)
미디어 쿼리는 다양한 디바이스와 화면 크기에 따라 CSS 스타일을 적용할 수 있게 해줍니다. 이를 통해 반응형 웹 디자인을 구현할 수 있습니다.
#### 5.1.1 기본 문법
미디어 쿼리는 `@media` 규칙을 사용하여 정의합니다.
예제:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
이 예제는 화면의 너비가 600픽셀 이하일 때 배경색을 연파랑색으로 변경합니다.
#### 5.1.2 논리 연산자
미디어 쿼리에서는 논리 연산자를 사용하여 조건을 결합할 수 있습니다.
- `and`: 모든 조건을 만족할 때
- `not`: 특정 조건을 만족하지 않을 때
- `only`: 특정 조건을 정확히 만족할 때
예제:
@media (min-width: 600px) and (max-width: 1200px) {
body {
background-color: lightgreen;
}
}
이 예제는 화면의 너비가 600픽셀 이상 1200픽셀 이하일 때 배경색을 연녹색으로 변경합니다.
### 5.2 유연한 레이아웃 (Flexible Layouts)
유연한 레이아웃은 고정된 단위 대신 상대적인 단위를 사용하여 다양한 화면 크기에 적응할 수 있도록 합니다.
#### 5.2.1 퍼센트 단위
퍼센트 단위는 부모 요소의 크기에 대한 비율로 크기를 지정합니다.
예제:
.container {
width: 80%;
margin: 0 auto;
}
.item {
width: 50%;
}
#### 5.2.2 뷰포트 단위
뷰포트 단위는 화면의 너비와 높이에 대한 백분율로 크기를 지정합니다.
- `vw` (뷰포트 너비): 뷰포트 너비의 1%
- `vh` (뷰포트 높이): 뷰포트 높이의 1%
예제:
.container {
width: 100vw;
height: 100vh;
background-color: lightgray;
}
### 5.3 유연한 미디어 (Flexible Media)
유연한 미디어는 이미지, 비디오 등의 미디어 요소가 다양한 화면 크기에 맞게 조정되도록 합니다.
#### 5.3.1 유연한 이미지
이미지의 너비를 100%로 설정하면 부모 요소의 너비에 맞게 조정됩니다.
예제:
img {
width: 100%;
height: auto;
}
#### 5.3.2 유연한 비디오
비디오의 너비를 100%로 설정하면 부모 요소의 너비에 맞게 조정됩니다.
예제:
video {
width: 100%;
height: auto;
}
### 5.4 뷰포트 (Viewport)
뷰포트 메타 태그는 모바일 장치에서 웹 페이지의 표시 방식을 제어합니다. 이를 통해 반응형 웹 디자인을 지원합니다.
#### 5.4.1 뷰포트 메타 태그
뷰포트 메타 태그는 HTML 문서의 `<head>` 섹션에 추가됩니다.
예제:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이 태그는 화면의 너비를 장치의 너비에 맞추고, 초기 배율을 1로 설정하여 반응형 웹 디자인을 지원합니다.
### 연습 문제
1. 미디어 쿼리를 사용하여 화면 크기에 따라 배경색이 변경되는 웹 페이지를 만들어 보세요.
2. 퍼센트와 뷰포트 단위를 사용하여 유연한 레이아웃을 구성해 보세요.
3. 이미지를 다양한 화면 크기에 맞게 조정되도록 설정해 보세요.
4. 비디오 요소를 유연하게 조정하여 다양한 화면 크기에 맞게 표시되도록 해 보세요.
5. 뷰포트 메타 태그를 사용하여 모바일 장치에서 웹 페이지가 올바르게 표시되도록 설정해 보세요.
댓글
댓글 쓰기