[CSS] 미디어 쿼리(Media Query)

@media란 무엇인가?

 

@media는 CSS에서 미디어 쿼리(Media Query)를 정의하기 위한 규칙입니다.
사용자의 화면 크기, 디바이스 종류, 해상도 등 다양한 조건에 따라 다른 스타일을 적용할 수 있도록 도와줍니다.

이를 통해 반응형 웹 디자인(Responsive Web Design)을 구현할 수 있습니다.

 

[기본 문법]

@media (조건) {
  /* 적용할 스타일 */
}

 

ex)

화면 너비가 600px 이하로 줄어들면 배경색이 파란색 → 분홍색으로 바뀝니다.

/* 기본 스타일 */
body {
  background-color: lightblue;
}

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

 

💡@media의 조건

 

1. 기본 조건

 

• max-width : 지정한 너비보다 작거나 같은 경우
• min-width : 지정한 너비보다 크거나 같은 경우
• max-height, min-height :  높이에 따라 조건 설정
• orientation : 디바이스 방향 설정 (landscape(가로모드), portrait(세로모드))

ex)

@media (orientation: landscape) {
  body {
    font-size: 20px;
  }
}

@media (orientation: portrait) {
  body {
    font-size: 16px;
  }
}

 

 

2. 해상도 조건

• resolution : 화면 해상도에 따라 조건 설정 (dpi 또는 dppx)

ex)

@media (min-resolution: 300dpi) {
  img {
    border: 2px solid green;
  }
}

 

3. 디바이스 조건

 

• screen : 화면 디바이스에만 적용
• print : 인쇄 시 적용

@media print {
  body {
    font-size: 12pt;
  }
}

 

 

4. 복합 조건 사용하기

• and, not, or(쉼표 ,)를 사용하여 여러 조건을 결합할 수 있습니다.

and 조건

@media (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}

 

or 조건(쉼표 , )

@media (max-width: 600px), (orientation: landscape) {
  body {
    font-size: 14px;
  }
}