미디어 쿼리는 CSS3의 기능 중 하나로, 다양한 기기와 화면 크기에 따라 적절한 스타일을 적용할 수 있게 합니다. 이 강좌에서는 미디어 쿼리의 기본 개념과 사용 방법에 대해 알아보겠습니다.
미디어 쿼리의 기본 구조
미디어 쿼리는 @media 규칙을 사용하여 작성됩니다. 기본 구조는 다음과 같습니다.
@media 미디어 유형 and (조건) {
/* 조건에 맞는 스타일 작성 */
}
미디어 유형
미디어 유형을 지정하여 해당 유형에만 스타일을 적용할 수 있습니다. 주요 미디어 유형은 다음과 같습니다.
- all: 모든 미디어 유형에 적용
- screen: 컴퓨터 화면, 태블릿, 스마트폰 등의 화면에 적용
- print: 인쇄용 스타일 적용
예시:
@media print {
body {
font-size: 12pt;
}
}
조건
조건을 사용하여 특정 화면 크기나 기기 특성에 따른 스타일을 적용할 수 있습니다. 주요 조건은 다음과 같습니다.
- min-width: 최소 너비
- max-width: 최대 너비
- min-height: 최소 높이
- max-height: 최대 높이
- orientation: 화면 방향 (portrait 또는 landscape)
- resolution: 화면 해상도 (dpi, dpcm 등)
예시:
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
미디어 쿼리 사용 예시
화면 크기에 따라 다른 배경색을 적용하는 예시입니다.
body {
background-color: blue;
}
@media screen and (min-width: 600px) {
body {
background-color: green;
}
}
@media screen and (min-width: 900px) {
body {
background-color: red;
}
}
이처럼 미디어 쿼리를 사용하면, 다양한 기기와 화면 크기에 따라 적절한 스타일을 적용할 수 있습니다. 이를 통해 웹사이트의 사용성과 접근성을 높일 수 있으며, 반응형 웹 디자인을 구현하는 데 필수적인 기능입니다.
반응형
댓글