@media all과 @media screen의 차이

@media all과 @media screen은 CSS에서 **미디어 쿼리(media query)**를 작성할 때 사용하는 미디어 유형(media type)입니다. 이들의 차이는 적용 대상 미디어에 있습니다.

---

1. @media all

• 의미: 모든 종류의 미디어에 적용합니다.
• 포함 대상:
  • 화면 디스플레이(screen)
  • 프린터(print)
  • 음성 출력 장치(speech)
  • 기타 모든 미디어 유형
• 사용 예:
  css

  코드 복사

  @media all and (max-width: 1024px) { body { background-color: lightblue; } }

---

2. @media screen

• 의미: 화면 디스플레이에서만 적용됩니다.
• 포함 대상:
  • 컴퓨터, 태블릿, 스마트폰, TV 등 시각적 화면 장치
• 사용 예:
  css

  코드 복사

  @media screen and (max-width: 1024px) { body { background-color: lightgreen; } }

---

주요 차이점

구분@media all@media screen

적용 대상	모든 미디어 유형	화면 디스플레이 장치만
포함 유형	screen, print, speech 등 모두	screen (화면)만
일반적인 사용	모든 경우 적용할 기본 스타일 정의	화면에서만 사용되는 스타일 정의

---

언제 사용해야 할까?

1. @media all:
   • 모든 장치에 동일한 스타일을 적용하고자 할 때.
   • 보통 장치 특성에 상관없이 공통적인 스타일을 지정할 때 사용.
2. @media screen:
   • 화면에서만 필요한 스타일을 정의할 때.
   • 프린트 스타일이나 음성 출력 스타일과 분리하고 싶을 때 사용.