미디어 쿼리 삽질 일기

Vue.js로 싱글페이지 프로젝트를 진행중 반응형 페이지를 만들어야 한다는 요구사항이 있었다.

일단 당장 생각대로 스크립트에서 장치명이나 너비를 가져와 그에 따른 스타일을 적용시키면 되겠지 하고 구글링을 해서 스크립트를 짰다.

화면을 줄여보며 만족해하고 있을때 미디어쿼리라는것을 알았다.

생각해보니 반응형 웹페이지 나온지가 언젠인데 이런 무식한 스크립트로 하고있을 리가 없었다.

더러운 스크립트 싹 지우고 스타일에서 미디어쿼리로 작성하다보니 Vue에도 뭔가 있지 않을까 해서 찾아보았다.

아니나 다를까 Vue-mq 라는 플러그인도 있었고 vuetify에서 뷰포트에 따라 조건을 지정해둔 Display 속성도 있었다..

템플릿 본문보다 길었던 반응형 스크립트가 hidden-sm-and-down 하나로 끝났다.

억울

---

포스트 작성하다보니 미디어쿼리를 보다 문득 궁금해져 CSS단에서 조건처리가 되나 해서 찾아보다 SASS 라는 것을 찾았다.

CSS의 확장판인데 변수와 조건문까지도 지원을 하는 스타일언어였다.

그냥 이런게 있구나 하고 넘어간다.