Home IT/WEB 웹페이지 인쇄 스타일 확인 및 수정하는 방법

[css]웹페이지 인쇄 스타일 확인 및 수정하는 방법

웹페이지를 인쇄 할 때 인쇄 화면에서 제외하고 싶거나 레이아웃이 무너져서 스타일 수정이 필요할 경우가 있습니다. 웹페이지 인쇄 스타일을 수정하는 방법과 수정할 때 쉽게 인쇄화면을 확인 하는 방법에 대해서 알아보겠습니다.

CSS 적용

inline ad

css media query 에는 여러 유형이 있습니다. 반응형 처리할 때 사용되는 screen 이 있으며 인쇄에 필요한 print 가 있으며 그외에 all, speech 등이 있습니다. 아래의 구문 같이 @media print 를 작성하시면 미디어 유형은 프린터를 특정하며 @media screen, print {…} 이렇게 작성하시면 스크린과 인쇄 장치 다수의 장치를 특정할 수 있습니다.

@media print {
  /* insert your style declarations here */
}

크롬에서 인쇄 스타일 확인

크롬 개발자도구(F12) -> devTools 맞춤설정 및 제어 -> 도구 더보기 -> 렌더링 을 선택하시면 개발자도구 하단에 렌더링 탭이 생깁니다.

크롬 개발자도구

렌더링 탭에서 CSS 미디어 유형 에뮬레이션(테스트 인쇄 및 화면 스타일의 미디어 유형을 강제 실행합니다.) 옵션에서 인쇄를 선택하시면 인쇄 스타일을 확인하실 수 있습니다. CSS 를 수정하시면서 인쇄 스타일을 확인하시면 Ctrl + P 로 인쇄 스타일을 확인 필요없이 수정이 가능합니다.

RECENT POSTS

[vscode]이 시스템에서 스크립트를 실행할 수 없으므로 nest.ps1 파일을 로드할 수 없습니다.

nest : 이 시스템에서 스크립트를 실행할 수 없으므로 C:UsersmarkettradersAppDataRoamingnpmnest.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1 이 오류는 PowerShell 실행 정책 관련...

[nest.js]nest.js, node.js, 프로젝트 생성 방법

Node.js 설치 Node.js의 공식 웹사이트(nodejs.org)에서 Windows용 인스톨러를 다운로드합니다. 다운로드한 인스톨러를 실행하여 설치합니다. Node Version Manager(NVM)을 사용하는 경우 nvm install node # 최신 버전 설치 nvm install 14 #...

[광주]위파크 더 센트럴 분양주택 분양안내

기본정보 공급위치: 광주광역시 서구 풍암동 10-12번지 일원 공급번호: 2023000351 공급규모: 625세대 분양/입주: 분양 2023-08-04 / 입주 2026-08 건설사: (주)호반건설 (주)라인건설 분양문의: 1670-5676 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.wepark-central.co.kr/ 모집공고문 보기 청약일정 모집공고일: 2023-08-04 청약접수: 2023-08-14...

[강원]힐스테이트 속초 분양주택 분양안내

기본정보 공급위치: 강원특별자치도 속초시 금호동 622-40 일원 공급번호: 2023000337 공급규모: 925세대 분양/입주: 분양 2023-07-21 / 입주 2026-05 건설사: 현대엔지니어링(주) 분양문의: 033-947-0925 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.hillstate-sokcho.co.kr 모집공고문 보기 청약일정 모집공고일: 2023-07-21 청약접수: 2023-07-31 ~...