미디어쿼리는 뷰포트 기준이다. 컴포넌트가 있는 컨테이너 크기에 반응하고 싶다면 Container Queries를 쓴다.
기본 사용법
container-type: inline-size로 컨테이너를 지정하고, @container (min-width: 400px) { }로 조건을 건다.
컴포넌트 기반 디자인
사이드바에 넣을 때와 메인에 넣을 때 같은 컴포넌트가 다르게 보여야 할 때 유용하다. 화면 크기 확인기로 뷰포트 크기와 함께 확인하자.
브라우저 지원
최신 브라우저에서 지원된다. 폴리필도 있다. 확인기로 다양한 환경에서 테스트하자.
모니터링과 개선
한 번 만들고 끝이 아니다. 새로운 기기가 나오면 그 화면 크기도 고려해야 한다. 주기적으로 사용자 환경을 분석하고 대응하자. 화면 크기 확인기는 이런 지속적인 개선 과정에서 유용한 도구가 된다.
팀 공유
화면 크기 관련 지식을 팀원들과 공유하자. 디자이너, 개발자, QA 모두가 화면 크기의 중요성을 알아야 좋은 결과물이 나온다. 확인기 링크를 팀에 공유해서 모두가 활용하게 하자.
도구 활용 정리
화면 크기 확인은 koreaeu.kr 화면 크기 확인기로 쉽게 할 수 있다. 브라우저 개발자 도구와 함께 활용하면 반응형 웹 개발이 훨씬 수월해진다. 북마크해두고 자주 활용하자.
화면 크기 확인이 필요할 때마다 koreaeu.kr 화면 크기 확인기를 활용하면 빠르고 정확하게 현재 화면 정보를 얻을 수 있다.