test
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

개미를 퇴치하는 자연적인 방법 중 가장 효과적인 방법 6가지

개미를 자연스럽게 퇴치하는 여러 가지 방법 중 가장 효과적인 몇 가지 방법을 소개하겠습니다. 이 방법들은 모두 집에서 쉽게 구할 수 있는 재료를 사용하여 개미를...

부심장을 지키는 올바른 식단: 먹으면 좋은 음식과 나쁜 음식

부정맥 환자는 심장 건강을 유지하고 증상을 관리하기 위해 특정 음식을 피하고, 심장 건강에 좋은 음식을 섭취하는 것이 중요합니다. 다음은 부정맥 환자가 피해야 나쁜 음식과...

부정맥 arrhythmia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 부정맥(Arrhythmia)은 심장의 정상적인 리듬이 불규칙해지거나 비정상적으로 빨라지거나 느려지는 상태를 말합니다. 이는 심장의 전기적 신호 전달에 문제가 생겨 발생하며, 다양한 원인과 증상을 가지고 있습니다. 원인 부정맥의 원인은...

폐렴 pneumonia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 폐렴(Pneumonia)은 폐의 폐포(air sacs)에 염증이 생겨 액체나 고름이 차는 질환입니다. 주로 세균, 바이러스, 곰팡이 등의 감염에 의해 발생하며, 심한 경우 생명을 위협할 수 있습니다. 원인 폐렴의...