[CSS 핵심강좌] 8. 미디어 쿼리

미디어 쿼리는 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;
  }
}

 

이처럼 미디어 쿼리를 사용하면, 다양한 기기와 화면 크기에 따라 적절한 스타일을 적용할 수 있습니다. 이를 통해 웹사이트의 사용성과 접근성을 높일 수 있으며, 반응형 웹 디자인을 구현하는 데 필수적인 기능입니다.