특정영역 print 시 @media query 이용하기
출처 : http://gumoisland.com/blog/media_print
css 가장 밑에 print 영역으로 사용할 css를 정의해두고,
@CHARSET "UTF-8"; @media print { #Head {display:none;} div.manage{display:none;} div.bottom{display:none;} div.segmental{margin-top:300px;} div.composition{margin-top:100px;} } @page { size: a4; page-break-after: always; counter-increment: page; @top-center { content: "Headline, yo!" } @bottom-right { counter-increment: page; content: "Page " counter(page); } } 이후각 영역별 틀어지는 부분들을 @media print 안에서 조절해서 맞춘다.
이미지 및 배경화면이 노출 안되는건 각 브라우저 옵션을 이용해서 조절해야 정상적으로 가능하다.**
media print가 궁금하다면 지금 바로 브라우저에서 파일>인쇄 혹은 단축키 Ctrl+P를 눌러보면 된다.
배경
웹사이트의 컨텐츠는 아무리 인터랙티브가 각광을 받는다고 하더라도 대부분의 형식은 텍스트로써 존재한다. 특히 블로그나 언론사 사이트 등은 따라서 실제 생활에서는 유용한 컨텐츠를 영구히 저장하거나 누군가에게 보고 등을 하기 위해서는 인쇄를 적잖이 하게 된다.
HTML5가 각광을 받으면서 의미와 표현의 분리가 활발히 진행되고 있는 와중에도 대다수의 사이트가 브라우저의 ‘기본 인쇄’ 미디어에 대한 지원을 대다수가 하고있지 않다. 이에 대해서는 1차적으로 대다수의 개발자(퍼블리싱 전문가들은 최근에야 등장했다는 가정하에)들이 css를 이용한 인쇄모드를 모르거나 관심이 없으며, 2차적으로는 대다수의 클라이언트는 그런 것이 있는줄도 모르고 그냥 넘어간 것이 아닐까한다.
사실 상황이 이렇다 보니 인터넷에서 맘에 드는 컨텐츠를 발견했을 때에 기본 인쇄모드를 거의 안쓰고 별도의 팝업을 띄우는 인쇄전용 버튼을 찾거나 그마저도 없으면 ‘복붙’하여 워드프로세스 등에서 인쇄하는 실정이다. 만약에 별생각 없이 브라우저 인쇄를 했는데 인쇄에 최적화되어 깔끔하게 나오면 그 사이트가 신기할 정도이다.
media print 장점
원칙에 맞는 사용
의미와 표현의 분리는 단순히 웹사이트나 반응형웹에 뿐만이 아니라 인쇄모드에도 적용이 가능하다. 인쇄모드 역시 반응형웹과 같이 동일한 컨텐츠를 표현되는 미디어에 최적화하는 연장선상에 있기 때문이다.
개발시간의 단축
media print에 대하여 경험이 없거나 이미 퍼블리싱이 상당부분 진행된 상황이라면 단순히 레이아웃만 없애고 조절한다고 해서 완성되지 않을 확률이 높을 것이다. 그럴 때에는 차라리 컨텐츠만 스타일 없이 컨텐츠만 표시되는 별도의 팝업(대다수가 쓰는 방법)을 제공하는게 더 속편할지도 모른다. 그러나 초기 개발부터 media print를 염두에두고 레이아웃을 구성했다면 추가적인 개발자원이 필요 없으며 단지 새로운 유형의 컨텐츠가 채워질 때마다 최초에 구성해놓은 스타일이 그 컨텐츠를 적절하게 커버하는지 정도만 확인하면 된다. 그리고 이마저도 기본 셋트를 구성해 놓는다면 추가 사이트 개발이나 추가 컨텐츠에도 비슷한 방식으로 대응할 수 있다.
이용자 편의성
아무리 이용자들이 인쇄버튼이 별도로 있는 것에 익숙해져 있다 하더라도 어느 경우에나 커버 가능한 브라우저의 ‘기본 인쇄’보다 편할 수는 없다. 모든 사이트마다 별도의 인쇄버튼이 제공될 리가 없으므로 사용자들은 어떻게든 브라우저의 인쇄모드를 메뉴에서 고르든 Ctrl+P를 눌러 부르든 띄워본 경험이 있기 때문이다. 또한 얼마나 인쇄에 최적화하여 보여주느냐에 따라 차이는 있겠지만 이용자가 현재 보는 모습을 최대한 유지하여 인쇄된다는 것도 장점이다.
※ 만약 한국 사용자들을 위해 인쇄버튼을 꼭 배치하여야한다면 인쇄버튼을 배치하고 기본 인쇄모드창과 연동하는 방법을 쓰면 된다.
Print 헤더 설정
보통 인쇄에 관한 스타일 설정은 양이 많지가 않다. 모든 스타일마다 인쇄가 필요한 것이 아니라, 웹(혹은 모바일웹)에 표현되는 기본 설정에 인쇄에 관한 스타일을 덮어씌우는(overwriting)는 형태로 진행되기 때문이다. 따라서 어떠한 개발자 스타일보다 가장 마지막에 불러들이는 것이 좋으며, 그렇게 진행하기 위해서 별도로 분리한 이후에 사용자 스타일시트보다 더 뒤에 위치시키는 방법을 이용하기로 한다.
- ※ 혹은 아예 custom.css에 media=”screen” 속성을 부여하고 screen과 print를 양분하는 방법도 있을 수 있다.
개발 도구
개인적으로 웹개발은 크롬에서 개발자도구를 통해서 하는 것을 선호하기에 여기에서는 크롬을 기준으로 설명한다. 물론 혼자 제멋대로인 익스플로러 저버전까지 고려하려면 IE6가 설치되어 있는 VM과 익스플로러의 개발자도구(IE7 ~ IE10)도 같이 준비하면 좋다. 개인적으로 ‘웹 > 반응형웹 > 크로스브라우징 > 프린트모드’의 순서로 점검을 진행하며 코딩하면 좋다.
[이미지가 만료되었습니다]
< 크롬의 개발자도구에서 설정에 들어가면 media 버전을 강제 지정할 수 있다. >
※ 크롬 이외의 브라우저는? 위에 print.css를 삽입하는 태그에서 media=print 속성을 잠깐 삭제하고 보면 된다.
영역의 지정
[이미지가 만료되었습니다]
가장 먼저 필요한 곳을 꾸미기보다 인쇄에 불필요한 영역을 지움으로써 인쇄의 낭비를 막고 점검을 간단하게 만드는 것이 좋다.
우측과 같이 일반적인 3단 레이아웃의 웹사이트를 기준으로 한다면 표시할 영역인 #content를 제외한 #header, #leftside, #rightside,#footer를 인쇄시에 표시하지 않게 하는 것이 좋다.
방법은 간단하다. print.css라는 빈 파일을 생성하고 아래와 같이 지정을 해주면 된다. 이렇게하면 인쇄모드에서 #content를 제외하고 모두 표시가 되지 않는다. 하지만
print.css
#header, #leftside, #rightside, #footer {display:none;} 그런데 실제 개발을 하다보면 인쇄시에 없애야할 것이 단순히 레이아웃에 국한되지 않는다. 컨텐츠 중간에 들어간 광고나 인터렉션을 위한 웹 전용의 요소들도 역시 표시를 할 필요가 없다. 역으로 화면에는 표시되지 않지만 인쇄시에만 나타나야하는 요소도 극히 일부 있다. 그래서 이러한 것들을 일일이 일일이 지정하지 않기 위해서 일반적인 스타일이 들어있는 custom.css(예제명)과 print.css에 아래와 같은 스타일을 지정해둔다.
custom.css
.visible-print {display:none;} print.css
.hidden-print {display:none;}.visible-print {display:block;} 위의 원리는 간단하다. 인쇄시에 제외해야할 고정 요소들에는 .hidden-print 클래스를 지정해주고, 역으로 인쇄시에만 나타나는 정보에는 .visible-print 클래스를 지정하면 된다.
※ 추가 : Bootstrap3.0에서는 visible-print와 hidden-print 클래스가 추가되었으니 별도의 조작없이 바로 사용하면 된다.
폭과 폰트 지정
컨텐츠만 생성한 이후에도 기본적으로 설정을 해주어야할 사항들이 있다. 사이드바를 어떤식으로 구성했느냐에 따라 다른데, 혹시 #content를 margin을 이용하여 지정한 경우나 폭을 지정한 경우에는 이모든 것들을 인쇄시에 무효화시켜야 한다. 인쇄 용지의 크기는 기본적으로 A4를 가정할 수 있지만 여백은 브라우저마다 다르기 때문에 실제 출력이 될 폭은 정확히 산정할 수가 없다. 그러나 경험상 650px을 기준을 폭으로 잡고 컨텐츠들을 배치하면 안정적으로 표시된다.
모니터상 출력을 할 때에는 산세리프 글꼴에 웹폰트도 많이 사용하지만 인쇄시에는 세리프체가 더 적합하다. 글꼴의 크기를 적당한 포인트의 단위로 잡고 줄간격 역시 가독성을 생각하여 재조정을 해주어야 한다.
body와 컨텐츠에 해당하는 요소에 대해서 지정을 해준다.
print.css
body, #content, .container .row {margin : 0;width:100%;font-family:'바탕', serif !important;font-size:10pt;_width:650px; /* IE6 */_font-size:9pt !important; /* IE6 */} ※ IE6의 경우에 아무리 폭을 100%로 잡아도 인쇄시 잘리는 경우가 있기에 650px로 고정한다. 인쇄시의 폭은 대략 650px~700px 사이에서 형성된다.
인쇄 최적화를 위한 컨텐츠 디자인
아무리 기본 설계를 잘 해놨다고 하더라도 요즘같이 위지윅 에디터를 통해 온라인상 컨텐츠를 제작하는 경우에는 향후 생성된 컨텐츠로부터 문제가 발생할 수 있다(이는 반응형웹에도 적용된다). 따라서 웹 설계시에 컨텐츠 디자인도 최대한 예상하여 스타일에 대한 가이드라인을 세워 두어야 한다.
테이블 디자인
대부분은 잘 쓰지 않는 와 를 적극 활용한다. 를 지정하는 경우 테이블이 한 페이지를 넘어갈 정도로 양이 많을 때에, 두 번째 페이지에 자동으로 열을 붙여서 각 열에 대한 정보를 쉽게 파악할 수 있도록 한다.
없어지는 배경색
인쇄시에는 스타일에 지정된 background 속성은 모두 무시된다. 따라서 어떤 사각형의 요소를 표현하기 위해서는 이미지 꼼수를 사용하는 방법이 있다. 이를테면 아래의 사각형을 단순히 background 속성으로 표시를 하면 인쇄시에 표현되지 않는다.
따라서 위의 경우에는 아래와 같이 파란색 큰 배경이미지를 만든 이후에 표시를 하면 이미지로 인식이 되어 출력이 가능하다.
 반응형웹 주의
사이트가 그리드 디자인을 갖추고 있다면 컨텐츠의 컬럼역시 1단 컬럼에서 4단 컬럼까지 다양하게 나올 수 있다. 컨텐츠 역시 전체적인 레이아웃의 그리드에서 벗어나지 않으므로 반응형웹이라면 컨텐츠 내의 컬럼역시 동일하게 반응을 하여야 한다. 이는 곧 일반적으로 700px 이하를 기준폭으로 삼는 인쇄모드에서는 모바일 폭으로 인식되어 레이아웃이 단조로워 질 수 있다는 말이다. 따라서 인쇄모드시에 모든 클럼이 폭 100%인 단일컬럼으로 변형되지 않도록 적절하게 고정시켜주는 요령이 필요하다.
[이미지가 만료되었습니다]
< 인쇄모드가 모바일모드로 인식되어 삑사리가 날 수 있다. >
정해진 방법이 없기에 이 부분은 간단히 설명만 한다.
사이트에 적용한 그리드 시스템이 있다면 해당 CSS 파일에서 980px 이상에 적용되는 그리드 스타일 부분을 복사해서 넣는 방법이 있을 수 있다.
- 그리드 자체를 인쇄모드에 맞추어서 새로 스타일을 지정해주는 방법이 있을 수 있다. 이를테면 4단 컬럼은 25% 폭으로, 3단컬럼은 33% 폭으로 지정하는 방식이다.
몇 가지 팁
숨겨진 h1 태그
`
태그는 하나의 웹페이지 전체 내용을 대표하는 제목이다. 무조건 하나씩 있는 것을 권장하지만 디자인상 제목이 보이지 않아야하거나, 프로그램 구조상 include 형식으로 인해서 태그가 페이지에 중복으로 들어갈 수가 있다. 이런일이 있다면 include로 들어가는 제목들은 모두 h2로 통일하고 검색엔진과 인쇄용을 위해서 숨겨진 태그를 작성하는 것도 한 방법이다.검색엔진 최적화(SEO)로 사이트를 설계한다면 에 페이지의 대표 제목을 사용할 텐데, 이 제목을 에도 그대로 활용을 하면 된다. 그리고 위에서 제안한 팁대로 .visible-print`를 지정해주어 스크린에서는 표시되지 않고 인쇄모드에서만 표시되도록 하는 방법이다.