CSS 모바일 판별 미디어쿼리

언제부턴가 "반응형 웹"이 대세가 되면서, 사용자의 디바이스에 따라서 웹 화면을 적절하게 구성하는 것이 필수 요소가 되었습니다. 일반적으로, 브라우저 창의 크기를 기반으로 디자인을 다르게 설정하는 방식을 많이 사용하고 있죠? 이 사이즈를 기준으로 PC 혹은 Mobile을 얼추 구분하기도 합니다. 대부분의 경우 창 크기에 따라서만 조절해도 큰 문제는 없습니다만, 가끔은 사용자의 디바이스가 PC인지 모바일인지 구분하고 싶은 경우도 있습니다.

코딩을 하다 보면 가끔 스크립트가 제대로 작동하지 않는데 여러 이유가 있겠지만 그중 하나는 페이지가 로드되기 전에 스크립트가 실행되는 이유가 있다. 이러한 점을 방지하기 위한 방법은 여러 가지가 있는데 스크립트를 바로 위에 로드해서 마지막에 실행되게 하는 방법, onload, jquery.ready, DOMContentLoaded를 사용해 특정한 콘텐츠가 로드된 후 실행되도록 하는 방법 등 여러 가지가 있다!