(CSS) @media에서 Only Screen 과 Screen의 차이

반응형 웹페이지 제작에 유용하게 사용되는 미디어 쿼리. CSS 파일에서는 @media(엣 미디어)를 통해 구현된다. 참고로 Styled Component에서는 아래와 같이 삽입하면 된다.

 

export const SectionInfoContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid blue;
  margin: 10px;
  width: 100%;
  height: 600px;

  @media screen and (max-width: 770px) {
    flex-direction: column;
  }
`;

적용하며 screen과 only screen의 차이가 궁금하게 되었다.

only 키워드는 미디어 쿼리를 지원하는 웹 브라우저에서만 해당 조건을 인식하도록 하는 키워드이다. 그래서 미디어 쿼리를 지원하지 않는 웹 브라우저가 드물고 인터넷 익스플로는 미디어 쿼리를 정확하게 지원하지 않기 때문에 only 유무에 상관없이 미디어 쿼리를 실행하지 못한다. 

 

중요한 것은  현재의 크롬 체제에서는 only Screen과 Screen이 결과적으로 차이가 없다는 점이다. 다만 기억해야할 것은 미디어쿼리를 지원하는 브라우저만 대상으로 할 경우에는 only 키워드를 사용하는 것이 좋다.