미디어 쿼리란? 기초부터 실전까지

미디어 쿼리란 "반응형 웹 디자인"을 위한 훌륭한 명령어라고 생각하면 편하다.

인터페이스는 각각 "데스크톱 / 태블릿 / 핸드폰"으로 아주 크게 나눌 수 있다. 근데 이 인터페이스의 크기는 서로 각각 다르며 같은 종류의 장치라도 넓이와 높이가 다르다. (예를 들어 아이폰 12 pro와 갤럭시 s8의 넓이는 다르다.)

즉, 다른 사이즈의 디바이스이지만.. 우리는 "동일한 유저 경험"을 제공해야 하지 않겠는가. 이것을 위해서는 미디어 쿼리는 필수라고 볼 수 있다.

("동일한 유저 경험" ... 이게 진짜 생각보다 만만치 않다. 어찌 보면 챌린지에 가깝다.)

아무튼. 이에 대한 영상을 참고하길 바란다.

https://youtu.be/hltvPyLHKPk?si=-xFzEhdmT87IYFEX