css 미디어 쿼리

CSS 미디어 쿼리는 화면 크기나 해상도, 방향 같은 조건에 따라 웹페이지 스타일을 다르게 적용할 수 있는 기능이다. 주로 반응형 웹 디자인을 만들 때 사용한다. 다양한 디바이스에서 웹사이트가 잘 보이도록 할 수 있다.

기본 문법

미디어 쿼리는 @media라는 키워드를 사용해서 작성한다.

@media 조건 {
  /* 조건에 맞는 스타일 */
}

여기서 조건은 화면 크기나 해상도 같은 것들이다. 조건이 맞으면 그 안에 있는 스타일이 적용된다.

주요 미디어 쿼리 조건

1. width / height: 화면의 너비와 높이

   • min-width: 최소 너비
   • max-width: 최대 너비
   • min-height: 최소 높이
   • max-height: 최대 높이

2. orientation: 화면 방향

   • landscape: 가로 모드
   • portrait: 세로 모드

3. resolution: 화면 해상도

   • min-resolution: 최소 해상도
   • max-resolution: 최대 해상도

4. aspect-ratio: 화면의 가로 세로 비율

   • min-aspect-ratio: 최소 가로 세로 비율
   • max-aspect-ratio: 최대 가로 세로 비율

5. prefers-color-scheme: 시스템 색상 모드 (어두운 모드, 밝은 모드)

   • light: 밝은 모드
   • dark: 어두운 모드

6. hover: 마우스 오버 지원 여부

   • hover: 마우스를 올릴 수 있는지 여부
   • no-hover: 마우스 오버가 없는 장치

예시 코드

1. 화면 크기에 따라 스타일 바꾸기

/* 화면 너비가 600px 이하일 때 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

2. 세로 모드와 가로 모드 스타일 다르게 하기

/* 세로 모드일 때 */
@media (orientation: portrait) {
  body {
    background-color: lightgreen;
  }
}

/* 가로 모드일 때 */
@media (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

3. 다크 모드 지원

/* 다크 모드일 때 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: white;
  }
}

4. 여러 조건 조합하기

/* 화면 너비가 768px 이상이면서 다크 모드일 때 */
@media (min-width: 768px) and (prefers-color-scheme: dark) {
  body {
    background-color: #444;
    color: white;
  }
}

미디어 쿼리 사용 시 주의할 점

• 미디어 쿼리는 반응형 디자인에 자주 사용되므로 다양한 화면 크기나 해상도에 맞게 스타일을 잘 만들어야 한다.
• min-width와 max-width를 조합하면 화면 크기에 맞춰 스타일을 다르게 적용할 수 있다. 예를 들어, min-width는 화면 크기가 특정 크기 이상일 때, max-width는 특정 크기 이하일 때 스타일을 적용한다.

미디어 쿼리를 잘 활용하면 여러 디바이스에서 잘 작동하는 웹사이트를 만들 수 있다.