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

[javascript]트리 구조의 객체를 재귀적 함수로 평면화하는 방법

const getItems = (items) => { const flattenItems = (currentItems) => { let flatItems = ; for...

[javascript]객체를 복사하고 특정 키를 제외하여 객체를 생성하는 방법

const obj = { name: 'markettraders', age: 20, address: { city: 'seoul', zip: '12345' ...

[javascript]!! 연산자 not not 연산자

"!!" 연산자는 값을 boolean으로 형변환하는 데 사용됩니다. 이를 "not not" 연산자라고도 합니다. 이 연산자는 값을 true 또는 false로 간단히 변환하여 반환합니다. 예를 들어, JavaScript에서 다음과...

Youtube 오디오 라이브러리에서 가장 많이 사용하는 음악 TOP20 을 알려드립니다.

YouTube 오디오 라이브러리는 콘텐츠 제작자가 저작권 침해에 대한 걱정 없이 동영상에 사용할 수 있는 방대하고 다양한 무료 음악 및 음향 효과 라이브러리입니다. 아래 URL...