[CSS] Media Query에서 Screen과 Only Screen의 차이점

CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다.

 

# Example 1

@media screen (min-width: 1024px) {
   color: #000;
}

 

 

# Example 2

@media only screen (min-width: 1024px) {
   color: #fff;
}

! @media only screen과 @media screen의 차이점먼저 해당하는 두 코드를 사용했을때 각각의 화면에 나타나게 될 결과는 동일합니다. 하지만 차이점은 무엇일까요? 이 부분에 대하여 only 키워드를 사용한 경우 w3c에 따르면 예전의 user agents를 사용된 스타일 시트가 보이지 않도록 하는 역할을 한다고 합니다. 뭔가 클리어 하지는 않지만 결론은 최근에 사용되는 환경에서 only를 사용하는 것과 사용하지 않는 것 문제가 발생되지 않습니다. 구 user agent 환경의 media 속성을 감추는... 즉 적용되지 않게 하는 것이 바로 only의 목적이라 볼 수 있습니다.