웹 페이지를 인쇄할 때 화면용 스타일이 그대로 적용되면 이상하게 나온다. 인쇄용 CSS를 따로 설정해야 한다.
@media print
@media print { } 안에 인쇄용 스타일을 넣는다. 배경색 제거, 여백 조정, 불필요한 요소 숨기기 등.
페이지 크기 설정
@page { size: A4; margin: 2cm; } 로 인쇄 페이지 크기와 여백을 지정할 수 있다. 화면 크기 확인기로 화면 크기를 확인하고 인쇄 미리보기와 비교해보자.
break 속성
page-break-before, page-break-after로 페이지 나눔 위치를 조절할 수 있다. 확인기로 화면 레이아웃을 확인하고 인쇄에 맞게 조정하자.
다양한 환경에서의 테스트
개발 중에는 크롬 개발자 도구의 디바이스 모드를 많이 쓰지만, 실제 기기에서의 테스트도 중요하다. 시뮬레이션과 실제 기기는 미묘한 차이가 있을 수 있다. 화면 크기 확인기를 실제 스마트폰, 태블릿에서 열어보면 정확한 뷰포트 크기를 알 수 있다.
성능과 화면 크기
큰 화면에 무거운 이미지를 로드하고 작은 화면에는 가벼운 이미지를 로드하면 성능을 최적화할 수 있다. srcset과 sizes 속성을 활용하자. 화면 크기에 따른 리소스 최적화는 사용자 경험과 비용 모두에 영향을 준다.
반응형 디자인의 미래
Container Queries, 새로운 뷰포트 단위(dvh, svh, lvh) 등 CSS도 계속 발전하고 있다. 이런 새로운 기능들을 활용하면 더 정교한 반응형 디자인이 가능하다. 확인기와 함께 새로운 기술을 익혀나가자.
화면 크기 확인기를 자주 활용하면서 다양한 화면 환경에 대응하는 습관을 들이자.