2.1 미디어 쿼리 기초
미디어 쿼리 (media queries)는 반응형 웹사이트를 만드는 중요한 도구 중 하나야. 이를 통해 다양한 기기와 화면 크기에 맞게 스타일을 조정할 수 있어서 최적화된 표시와 사용의 편리함을 제공할 수 있어. 아래에서 미디어 쿼리의 사용 기초, 문법, 그리고 화면에 따라 스타일을 조정하는 예제를 살펴보자.
미디어 쿼리는 특정 조건이 만족될 때만 스타일을 적용할 수 있게 해주는 @media 룰을 사용해. 조건은 화면 크기, 해상도, 방향 등 여러 매개변수를 포함할 수 있어.
문법:
@media media-type and (media-feature) {
/* 스타일 */
}
어디에:
media-type: 스타일을 적용할 미디어 타입. 주로 screen을 많이 사용해.media-feature: 미디어의 특정 기능, 예를 들어 너비, 높이, 방향 등.
예제:
- 이 예제에서는 화면 너비가 768픽셀 이하일 경우 페이지의 배경이 연한 파란색이 될 거야.
CSS
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 미디어 쿼리의 타입
1. 너비 및 높이에 따른 쿼리
이 미디어 쿼리는 뷰포트 너비와 높이에 따라 스타일을 변경할 수 있게 해줘.
예제:
CSS
/* 화면 너비가 768px 이하일 경우 스타일 적용 */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* 화면 높이가 800px 이상일 경우 스타일 적용 */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. 방향 (orientation)
화면 방향에 따른 쿼리는 디바이스가 세로(portrait) 또는 가로(landscape) 모드인지에 따라 스타일을 조정할 수 있게 해줘.
예제:
CSS
/* 세로 방향일 때 스타일 적용 */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* 가로 방향일 때 스타일 적용 */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. 픽셀 밀도 (resolution)
픽셀 밀도에 따른 미디어 쿼리는 Retina와 같은 고해상도 디바이스에 맞춰 스타일을 조정할 수 있게 해줘.
예제:
CSS
/* 2배 이상의 픽셀 밀도를 가진 화면일 때 스타일 적용 */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* 2배 미만의 픽셀 밀도를 가진 화면일 때 스타일 적용 */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 미디어 쿼리 결합하기
미디어 쿼리는 논리 연산자 and, not, only를 사용해 결합할 수 있어.
예제
and 연산자 사용:
CSS
/* 화면 너비가 600px에서 1200px 사이인 기기일 때 스타일 적용 */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
not 연산자 사용:
CSS
/* 화면 너비가 600px 미만인 기기를 제외한 모든 기기에 스타일 적용 */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
only 연산자 사용:
CSS
/* screen에만 스타일 적용 */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION