인쇄 미리보기 디자인 - Chrome Dev Tools

웹 페이지가 인쇄되었을 때 어떻게 보일지 궁금한 적이 있습니까? 🤔 그리고 프린터가 없으신가요? 아니면 개발을 위해 엄청난 양의 문서를 낭비하고 싶지 않으신가요?

Chrome 개발자 도구가 지원합니다!

다음은 Chrome에서 인쇄 미리보기를 확인하는 단계입니다.

1단계: 개발자 도구 열기 - Command+Option+C(Mac) 또는 Control+Shift+C(Windows, Linux, Chrome OS)

2단계: Command+Shift+P(Mac) 또는 Control+Shift+P(Windows, Linux, Chrome OS)를 눌러 명령 메뉴를 엽니다.



3단계: rendering를 입력하고 렌더링 표시를 선택한 다음 Enter 키를 누릅니다.

4단계: rendering 창을 지금 사용할 수 있습니다. CSS 미디어 에뮬레이션에서 인쇄를 선택합니다.

일반보기

인쇄 보기

요구 사항에 따라 페이지를 인쇄하는 동안 하단에 소셜 아이콘을 표시할 필요가 없다고 생각해 봅시다. 인쇄하는 동안 특정 CSS 속성을 변경하려면 변경해야 하는 요소의 'CSS 선택기'를 가져와야 합니다. 시나리오에서 모든 소셜 아이콘의 클래스는 .social 입니다. 스타일에 아래 미디어 쿼리를 추가하면 인쇄 중에만 소셜 아이콘이 숨겨집니다.

@media print {
    .social {
        display: none;
    }
}

짜잔,



이것이 유용하기를 바랍니다. 댓글에서 개선할 수 있는 부분이 있으면 알려주시고 Twitter에서 자유롭게 팔로우하세요.