'UTF-8'에 해당되는 글 2건

  1. 2010.02.22 아크로에디트, 파일 내용 변경 버그
  2. 2009.04.09 티스토리 인쇄CSS 적용하기 (3)

아크로에디트, 파일 내용 변경 버그

AcroEdit는 가끔 옛한글이 포함된 문서를 사용자의 동의 없이 수정하는 버그를 갖고 있습니다. 오래전에 발견했지만 줄곧 다른 버그 리포팅에 밀려 있던 벌레를 다시 발견했습니다. 나중에 올려야지 하다 보니 깜빡 잊고 있었죠.

  • 참고 : 이 문서는 많은 그림을 포함하고 있어서 읽어오는 데 오래 걸릴 수도 있습니다. 느긋하게 기다려 주십시오.

벌레의 유형

불러온 파일의 원형을 유지하지 못하게 만드는 벌레입니다. 이 벌레는 추가적인 다른 벌레를 발생시키고 있습니다.

아크로에디트에서 편집한 뒤에 뭉개진 글자 - ᄒᆞᆫ

아크로에디트에서 편집한 뒤에 뭉개진 글자 - ᄒᆞᆫ

개발자의 답변

2010년 2월 22일 버그 리포팅을 한 상태입니다.

벌레의 발견

옛한글을 텍스트 편집기에서 시험하다가 발견했습니다.(옛한글과 텍스트 편집기 참고) 그런데 그때 올리지 않았더니 오랫동안 기억 속에 묻혀 버렸습니다.

이 벌레는 파일 내용을 제멋대로 바꾸어서 사람을 화딱지 나게 만드는 벌레입니다. 크게 두 경우가 있습니다. 한 경우는 클립보드로 붙이기, 다른 한 경우는 파일을 불러왔다가 저장하기입니다.

클립보드에서 붙이기

예제 코드는 다음 문장입니다.

[code html] <span class="jamocomposed_block" style="font-family: '돋움 옛한글','Dotum Old Hangul','바탕 옛한글','Batang Old Hangul','궁서 옛한글','Gungsuh Old Hangul','굴림 옛한글','NewGulim Old Hangul','은 자모 바탕 확장','Un Jamo Batang Ex','UnJamoBatangEx','은 자모 바탕','Un Jamo Batang','UnJamoBatang','은 바탕','Un Batang','UnBatang',Code2002,Code2001,Code2000,serif; font-size: 105%;">ᄒᆞᆫ말ᄊᆞ미 듀ᇰ귁에 달아 문ᄍᆞᆼ와로 서르 ᄉᆞᄆᆞᆺ디 아니ᄒᆞᆯᄊᆡ</span> [/code]

위 내용을 텍스트 파일로 저장하면 536바이트가 됩니다. 이 htm 파일은 utf-8로 인코딩되어 있습니다.

시험용 파일 Test-1.htm : 536바이트

시험용 파일 Test-1.htm : 536바이트

위 파일을 메모장에서 열면 아래와 같습니다.

메모장에서 본 내용

메모장에서 본 내용

이상태에서 그대로 복사하여 티스토리에 편집창의 HTML 모드에서 붙여넣기를 하였습니다. 테스트 블로그에 있는 문서입니다.

옛한글이 잘 나타난 화면

옛한글이 잘 나타난 화면

그냥 Test-1.htm 파일을 파이어폭스에서 보면 다음과 같습니다.

잘 보이는 옛한글

잘 보이는 옛한글

위 그림에서 보이는 내용을 소스 보기 하면 다음과 같습니다.

소스 보기 : Test-1.htm

소스 보기 : Test-1.htm

위 소스 보기 화면에서 내용을 복사하여 아크로에디트에 붙여넣기를 하였습니다.

처참하게 깨져 버린 옛한글

처참하게 깨져 버린 옛한글

참고로 저 상태에서 utf-8로 저장하면 491바이트가 됩니다.

시험용 파일 Test-2.htm : 491바이트

시험용 파일 Test-2.htm : 491바이트

원인은 알 수 없지만 용량이 줄어 버렸습니다. 물론 파일 내용도 바뀌었습니다.

메모장에서 본 내용 그림에 나타난 소스를 복사하여 아크로에디트에 복사하였습니다.

메모장의 내용을 아크로에디트로 복사하여 붙여넣기를 한 다음 저장한 화면

메모장의 내용을 아크로에디트로 복사하여 붙여넣기를 한 다음 저장한 화면

그런데 겉보기에는 아무런 이상이 없지만, 아무튼 이번에도 이상한 점이 발견되었습니다.

시험용 파일 Test-3.htm : 533바이트

시험용 파일 Test-3.htm : 533바이트

원본은 분명히 536바이트였는데, 지금은 533바이트입니다. 겨우 3바이트이지만, 내용이 바뀌었습니다.

옛한글을 제대로 나타내지 못하는 화면

옛한글을 제대로 나타내지 못하는 화면

어찌된 일인지 아크로에디트로 저장한 Test-3.htm 파일은 옛한글을 제대로 나타내지 못하고 있습니다. 앞서 나타난 옛한글이 깨지는 결과는 파이어폭스의 문제라고 생각할 수도 있으나, 지금 이 결과는 아크로에디트의 문제로 봐야 할 듯싶습니다.

파일을 불러왔다가 저장하기

클립보드는 복사되는 과정에서 변형이 일어날 수 있다는 의혹도 제기할 수 있습니다. 그래서 아예 파일을 직접 읽어오기로 했습니다.

메모장에서 본 내용 : 536바이트

메모장에서 본 내용 : 536바이트

위 내용을 아크로에디트에서 직접 불러오겠습니다. 불러오기에 앞서 메모장을 닫습니다. 이것은 혹시나 메모장에서 간섭이 생길 수도 있기 때문입니다.

아크로에디트에서 Test-1.htm 파일 불러오기

아크로에디트에서 Test-1.htm 파일 불러오기


아크로에디트에서 Test-1.htm 파일을 불러온 화면

아크로에디트에서 Test-1.htm 파일을 불러온 화면

위 그림은 앞서 나온 메모장의 내용을 아크로에디트로 복사하여 붙여넣기를 한 다음 저장한 화면 그림과 매우 비슷합니다. 이것을 Test-4.htm 파일로 저장했습니다.

아크로에디트에서 Test-1.htm 파일을 Test-4.htm 파일로 저장

아크로에디트에서 Test-1.htm 파일을 Test-4.htm 파일로 저장

Test-1.htm 파일과 Test-4.htm 파일은 모두 536바이트입니다. 그러면 이것을 파이어폭스에서 보면 어떻게 될까요?

Test-4.htm 파일은 미스테리를 담은 파일??

Test-4.htm 파일은 미스테리를 담은 파일??

편집도 않고 그냥 불러들였다가 다른 이름으로 저장만 했을 뿐인데 왜 이런 일이 생기는지 알 수 없었습니다.

아크로디프 프로그램에서 파일 비교

Test-1.htm 파일과 Test-4.htm 파일을 비교해 보겠습니다.

HxD 프로그램에서 비교한 Test-1.htm 파일과 Test-4.htm 파일

HxD 프로그램에서 비교한 Test-1.htm 파일과 Test-4.htm 파일

Test-1.htm 파일과 Test-4.htm 파일은 확실하게 다른 점이 있습니다. 원본인 Test-1.htm 파일을 아크로에디트에서 불러와서 아무런 수정도 없이 Test-4.htm 파일로 저장하기만 했을 뿐인데, 1바이트가 변형되어 있습니다.

이 두 파일을 아크로에디트에서 비교하면 어떻게 될까요? 정확하게는 AcroDiff(아크로디프)에서 비교하면 어떻게 될까요? AcroDiff 프로그램은는 파일 비교를 해 주는 유틸리티로서 아크로에디트에 포함되어 있습니다. 일종의 헬퍼 프로그램이죠.

AcroDiff(아크로디프) 프로그램 실행 화면

AcroDiff(아크로디프) 프로그램 실행 화면

여기에서 빨간 네모 표시를 클릭하여 파일을 왼쪽 창에 불러올 수 있습니다.

AcroDiff 프로그램에서 파일 불러오기

AcroDiff 프로그램에서 왼쪽 창에 파일 불러오기


AcroDiff 프로그램에서 왼쪽 창에 파일을 불러온 화면.

AcroDiff 프로그램에서 왼쪽 창에 파일을 불러온 화면. 이 상태에서는 내용은 나타내 주지 않습니다.

위 그림에서 파일 내용은 나타내 주지 않습니다. 파일 내용이 안 나타난다고 당황하지 마시기 바랍니다. 위 화면에서 빨간 네모 부분을 클릭하여 오른쪽 창에도 파일을 불러옵니다.

AcroDiff 프로그램에서 오른쪽 창에도 파일을 불러온 화면.

AcroDiff 프로그램에서 오른쪽 창에도 파일을 불러온 화면. 이 상태에서는 내용은 나타내 주지 않습니다.

오른쪽 창도 내용이 나타나지 않습니다. 이 화면에서 비교 실행(빨간 네모)을 클릭하여 파일 비교를 합니다.

두 창의 내용을 비교한 화면

두 창의 내용을 비교한 화면

놀랍게도 AcroDiff는 두 파일의 다른 점을 찾아내지 못하고 있습니다. 이로써 아크로에디트의 저장 과정이 아니라 불러오기에서 문제가 생김을 추측해 볼 수 있습니다.

벌레의 원인

벌레의 원인은 알 수 없었습니다. 다만 한글 깨짐 현상이 있습니다 문서와 관련이 있으리라 추측해 봅니다. 또한 아크로디프 프로그램에서 파일 비교 항목에서 보이듯이, 저장 과정에서 문제가 생긴 것이 아니라 파일을 불러왔을 때 파일 내용이 이미 변형되었으리라 추측할 수 있습니다.

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다. 다음 두 벌레는 ᄒᆞᆫ자의 화면 표시와 관련한 버그를 소개하고 있습니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.


Trackback 1 Comment 0

티스토리 인쇄CSS 적용하기

팁텍

티스토리는 인쇄 페이지 기능을 지원하지 않는다. 그러다가 인쇄CSS를 이용하면 어느 정도 자신이 바라는 부분만 인쇄할 수 있지 않을까 생각하여 이 팁을 작성하게 되었다.

팁의 발견

티스토리에서 인쇄 페이지를 지원하지 않는다는 사실은 우연히 알게 되었다. 그러다가 도아의 세상사는 이야기에서 블로그에 PDF 저장 단추를 달자 라는 글을 보게 되었다. 댓글로 의견을 나누는데, CSS 이야기가 나오게 되었고, 그것에서 힌트를 얻어 CSS를 적용해 보게 되었다.

프로그램 설명

CSS에 대한 기본 사용법은 각자 알아서 하기 바란다.

추천 사이트 - Learn CSS (한국어 사이트이지만, 글자가 깨질 수도 있다. 문자셋을 한국어 (UTF-8) 또는 유니코드 (UTF-8)로 맞추어야 한다.)

CSS 만들기

기본적인 부분 인쇄

CSS를 이용하지 않는 방법은 WWW이 생길 무렵부터 쓰던 방법인 드래그&프린트가 있다. 말 그대로 마우스로 화면에서 인쇄하고 싶은 부분을 주~욱 잡아당겨 선택한다. 그리고 메뉴에서 파일-인쇄를 누르면 된다.

마우스로 드래그한 화면

일단은 이렇게 마우스로 좌~악 그어서 선택한다.

파일 메뉴에서 인쇄 선택

파일 메뉴에서 인쇄 선택

페이지 범위-선택 영역, 그 다음에 인쇄를 콕! 눌러주면 된다.

페이지 범위-선택 영역, 그 다음에 인쇄를 콕! 눌러주면 된다.

그러나 이 방법은 웹페이지 방문자가 해야 하는 작업이지, 웹페이지 제작자가 할 수 있는 작업이 아니다. 더구나 마우스 드래그를 막아놓은 웹페이지에서는 통하지 않는다.

인쇄 CSS 이용하기 1

인쇄용 CSS를 이용하면 웹페이지 제작자가 자신이 인쇄로 출력하고 싶은 부분을 정할 수 있다. 인쇄 CSS에서 인쇄하고 싶지 않은 부분에는 display: none 라는 속성을 주면 된다(참조 블로그에 PDF 저장 단추를 달자)

인쇄 CSS 이용하기 2

나는 티스토리에 적용할 때 주로 <div class="_ad"> 또는 <div class="noprint">와 같이 인쇄 금지 항목을 만들었다. 이것을 화면CSS에 응용하면, 화면에만 안 보이는 <div class="noseeing"> 또는 <div class="blind"> 항목을 만들 수도 있다.

참고로 현재 왕미친세상에 적용된 인쇄CSS는 다음과 같다.

  1. /* 이 파일에 적용된 설정은 http://www.w3.org/StyleSheets/home-import.css 파일을 참조하여 만들었습니다. */
  2.  
  3. /* ****************** 프린트 CSS ****************** */
  4. /* 아래에 설정값이 없으면 기본값을 따르게 됩니다. */
  5.  
  6. /* 개요 스타일 설정 */
  7. h1, h2, h3,
  8. h4, h5, h6     { page-break-after: avoid; page-break-inside: avoid }
  9.  
  10. /* 인용 스타일 설정 */
  11. blockquote,
  12. pre     { page-break-inside: avoid }
  13.  
  14. /* 목록 스타일 설정 */
  15. ul, ol, dl     { page-break-before: avoid }
  16.  
  17. /* 링크 스타일 설정 */
  18. a     { font-weight: normal }
  19.  
  20. /* 그림 파일 스타일 설정 */
  21. img     { border: 0; }
  22.  
  23. /* 인쇄에서 제외할 부분 */
  24. script     { display:none } /* 본문 안에 보일 내용을 script 태그 처리했을 경우 주의 요망 */
  25. div script     { display:none } /* IE6 버그가 있음. div.noprint / div._ad 태그 설정이 되어도 인쇄에서 나타남.
  26.                            그러므로 div 태그와 script 태그를 중첩하여 최대한 정돈하게 만듦. */
  27. .noprint     { display:none } /* 말 그대로 인쇄 안함. */
  28. ._ad     { display:none } /* 구글 광고 등은 인쇄 안 함. IE6은 오류가 있어서 그대로 인쇄됨. */
  29. #paging     { display:none } /* 문서 하단의 #paging 아이디는 인쇄 안함 */
  30. #header     { display:none } /* 문서 상단의 #header 아이디는 인쇄 안함 */

일단 저런 식으로 만들 수 있다.

저것을 티스토리에 적용한 다음 출력하고 싶지 않은 부분을 <div class="noprint"></div>로 감싸서 화면에서는 보이지만, 인쇄에서는 보이지 않게 했다.

  • 참고 1 : 모든 경우에 적용할 수 있는 클래스 이름을 만들려고 한다면, <div class="displaynone"> 또는 <div class="nodisplay">를 추천한다. 이것은 화면CSS, 인쇄CSS, 음성CSS 등에서 같은 이름으로 쓸 수 있기 때문이다. 이 display:none와 비슷해서 나중에 적용할 값을 기억하기에도 좋다. 참고로 display:none은 사용자에게 "보여주지 않는다."라는 뜻이 아니다. 이것은 "사용자에게 내보내는 출력이 없다."라는 뜻이다.
  • 참고 2 : div script  { display:none } 설정과 div, script { display:none } 설정은 서로 다르다. 앞엣것은 div 태그와 script 태그가 중첩될 경우에 출력을 없게 하라는 뜻이고, 뒤엣것은 div 태그와 script 태그 각각에게 출력이 없게 하라는 뜻이다.

티스토리에 적용

처음 적용 : 실패 1

처음에는 티스토리 스킨 편집 화면을 열었다.

HTML/CSS 편집은 두 부분으로 나뉘는데, 위가 skin.html 파일이고, 아래가 style.css 파일이다. 여기에서 style.css를 편집하였다. 위의 화면은 화면을 최대한 줄인 화면이다. skin.html과 style.css을 클릭하면 편집 영역이 아래로 길어지게 된다.

style.css 파일 맨 아래에 다음과 같이 끼워넣었다.

  1. @media print {
    h1, h2, h3,
    h4, h5, h6     { page-break-after: avoid; page-break-inside: avoid }

    blockquote,
    pre     { page-break-inside: avoid }

    ul, ol, dl     { page-break-before: avoid }

    a     { font-weight: normal }

    img     { border: 0; }

    /* 인쇄에서 제외할 부분 */
    script     { display:none }
    div script     { display:none }
    .noprint     { display:none }
    ._ad     { display:none }
    #paging     { display:none }
    #header     { display:none }

    }

그러나 작동하지 않았다. 다른 부분은 추가 작업이 필요했지만, 최소한 #paging 아이디 선택자와 #header 아이디 선택자를 사용한 곳에서는 적용이 되어야 했기 때문이다. 다시 말해 화면 인쇄를 하면 화면에 나타나지 않아야 하는 #paging 아이디 선택자와 #header 아이디 선택자를 사용한 곳이 버젓히 드러나 있었다.

나는 내 실수를 알지 못해 한참을 헤매야 했다.

참고로 내가 참조한 http://www.w3.org/StyleSheets/home-import.css 파일은 http://www.w3.org/StyleSheets/home.css 파일에서 @import 를 이용하여 불러왔고, http://www.w3.org/StyleSheets/home.css 파일은 http://www.w3.org/ 페이지 헤더 태그에서 link 태그를 이용하여 불러왔다.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  4. <head profile="http://www.w3.org/2000/08/w3c-synd/#"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   ... 생략 ...
  6.   <title>World Wide Web Consortium - Web Standards</title>
  7.   <link rel="meta" href="/Overview-about.rdf" />
  8.   <link rel="stylesheet" type="text/css" href="/StyleSheets/home.css" />
  9.   ... 생략 ...
  10. </head>

그런데 내가 쓰는, 그리고 이전에 썼던 티스토리 스킨의 헤더에서 공통적인 부분만 뽑아내면 다음과 같았다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  6. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
  7. <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
  8. <title>[##_title_##] :: [##_page_title_##]</title>
  9.  
  10. </head>

차이가 나는 부분은 빨간색으로 처리했다. 저 부분을 발견하지 못해서 헤매고 말았다.

다시 말해 내가 style.css 내용에 아무리 인쇄에 대한 내용을 넣어서 반응하지 않을 수밖에 없었다.

  1. @media print {
  2.     ... 인쇄 CSS 내용 ...
  3. }

위와 같은 설정은 처음부터 무시되었다는 뜻이다. 왜? 처음 읽어들일 때부터 화면(screen)에 맞게 읽어들였다는 뜻이고, 인쇄(print)음성(aural)은 무시한다는 뜻이다. 위에 빨간색으로 된 media="screen"은 그런 뜻이다.

실패 2

HTML/CSS 편집이 안 된다면 파일로 처리하자는 생각을 가지게 되었다. 이때 위의 화면에 있는 "파일 업로드" 탭이 눈에 들어왔다.

흠, 파일업로드를 클릭하여 파일을 찾아 올렸다. 여기에서도 또 실수를 하고 만다. 바로 print.css 파일이 올라간 곳을 확인하지 않아 버렸다. 아무튼 다음과 같이 입력했다.

  1. <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  2. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
  3. <link rel="stylesheet" media="print" type="text/css" href="./print.css" />
  4. <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />

아무 생각 없이 당연히 style.css와 같은 경로에 있겠거니 생각하고, 써넣어 버린 무지막지한 실수였다.

당연히 실패!

그렇다면 파일은 어디에 있을까?

인쇄CSS 적용 성공

인쇄 CSS 파일을 찾아서 다시 파일업로드 탭을 쿡 눌러주었다. 스크롤바를 아래로 주~욱 내리자 보였다.

어라, preview.gif는 다른 파일과 달리 앞에 images/ 가 없었다. 물론 print.css도 다른 파일처럼 images/ 가 붙어 있었다. 결국 preview.gif 파일만 빼면 같은 디렉터리에 있다는 말이었다. 

다시 HTML/CSS 편집 탭으로 넘어가서, 아까 편집했던 부분을 적당히 고쳤다.

  1. <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  2. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
  3. <link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
  4. <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />

위와 같이 고치자 드디어 작동했다.

좀 더 추가

아까 서버에 올린 인쇄CSS 파일에는 .noprint 및 ._ad 클래스에 대한 설정이 있었다. 이것은 곧 인쇄하지 않을 부분과 광고 부분을 <div></div>로 감쌀 수 있다는 뜻이다. 

또한 마지막으로 화면에는 안 보이지만 인쇄에서만 보일 부분도 설정하였다.

최종적으로 인쇄 CSS 적용 전과 적용 후의 화면 인쇄(일부)는 다음과 같다.  

  • 인쇄CSS 적용 전 인쇄 미리보기 화면 (전체 7쪽[각주:1]) : 삭제할 내용을 분홍색으로 표시하였다.[각주:2]

    • 처음 두 쪽은 쓸모 없는 내용이다. 아니 쓸모는 있지만, 인쇄에서는 굳이 필요하지 않다.
    • 3쪽 위의 내용은 "My 블로거 뉴스"이다. 역시 방문자에게는 필요하지 않은 내용이다. 가운데 있는 내용은 구글 광고라서 역시 인쇄에서는 필요하지 않다.
    • 6쪽에서 보이는 것은 위젯이다. 역시 인쇄에서는 필요하지 않다.
    • 7쪽은 티스토리 저작권 정보이다. 화면이 아닌 인쇄 결과는 티스토리 회사에서 만든 페이지 구성대로 되지 않으므로 인쇄할 필요가 없는 부분이다.
      CSS 적용 전 인쇄 미리보기

      CSS 적용 전 인쇄 미리보기

    • 인쇄 CSS 적용 후 화면 (전체 4쪽[각주:3]) : CSS 적용 전 화면과 비교하면, 헤더 부분이 모두 사라져서 앞부분이 아주 깔끔해졌다.[각주:4] 또한 화면에는 나타나지 않지만, 맨 마지막 쪽에 위젯이 사라지지 않고 남아 있다. 이 부분도 script 태그와 embed 태그의 영향으로 보인다.[각주:5]
      CSS 적용 후 인쇄 미리보기 (IE)

      CSS 적용 후 인쇄 미리보기 (IE)

      CSS 적용 후 인쇄 미리보기 1 (FF)

      CSS 적용 후 인쇄 미리보기 1 (FF)

      CSS 적용 후 인쇄 미리보기 2 (FF)

      CSS 적용 후 인쇄 미리보기 2 (FF)

위와 같이, 인터넷 익스플로러 6 환경에서는 구글 광고 및 위젯 사이에는 인쇄CSS 적용에서 약간의 문제가 있다.

적용 및 원리

티스토리에서는 게시글 부분이 따로 분리되어 있다. 그 점을 이용하여 인쇄할 때 나타날 부분만 골라낼 수 있다. 또한 내가 했던 것처럼 자세히 할 필요도 없다. 그저 본문만 남겨도 된다.

이때 몇 가지를 중시해야 한다. 우선 티스토리 HTML 파일은 들여쓰기가 되어 있다. 이때 같은 단계끼리 짝을 짓도록 노력하라. 화면에서 보이지 않게 할 부분을 찾아, 그것이 HTML 코드의 어느 부분인지를 알아내야 한다. 그 뒤에 알맞은 곳에 noprint 클래스를 삽입하여야 한다. 아래 그림에서는 <s_tb> 태그에 noprint 클래스를 삽입하였다.

가장 중요한 것은 본문을 잘 찾아야 한다는 점이다. 왜냐하면 본문은 반드시 인쇄할 때 종이에 출력되어야 하기 때문이다. 자세한 사항은 티스토리 스킨 제작 가이드에 나오는 스킨의 구조를 살펴보시기 바랍니다. 간단히 말한다면, 구글 광고가 없다면, <div class="article"> 태그를 찾아야 합니다. 구글 광고가 있다면 <div class="article">를 찾고, 그 뒤에 <div class="article_post"> 태그를 찾아야 합니다. 특히 <div class="article_post"> 부분은 티스토리 글쓰기에서 입력한 내용이 나타나는 부분입니다. [##_article_rep_desc_##] 치환자가 바로 본문을 만들어 주는 부분입니다. 이때 article 클래스 및 article 클래스 모듬[각주:6]이 화면에서 "게시글"을 이루게 됩니다. 앞서 말한 "본문"은 그러한 의미입니다. 따라서 인쇄할 때도 이 article 클래스 모듬 부분이 주를 이루게 해야 합니다.

그 다음으로 중요한 것은 paging 아이디 선택자와 header 아이디 선택자를 찾아야 한다. 이 두 부분은 반드시 인쇄할 때 출력하지 않아야 하기 때문이다. header 부분은 방문객에게는 쓸모가 없는 부분이 많고, paging 부분은 저작권 정보에 해당하는데 화면 구성에서는 옳지만, 인쇄에서는 그 저작권 정보가 그다지 유용하지 않다. 그러므로 인쇄할 때는 나타나지 않게 해야 한다. 하지만 이 부분을 모두 인쇄에서 나타나지 않게 하려면 굳이 HTML에서 찾기보다 인쇄CSS 파일에 아래와 같이 처리하면 된다.

  1. #paging     { display:none }
  2. #header     { display:none }

나머지 부분은 스스로 잘 찾아서 잘 처리하기 바란다.

PDF 저장

원래 인쇄CSS에 관심을 가지게 된 까닭이 바로 웹페이지를 PDF로 저장해 주는 기능 때문이었다. 이것은 도아의 세상사는 이야기의 게시글 블로그에 PDF 저장 단추를 달자를 읽고 나서 생각했다. 자신의 홈페이지나 블로그에 PDF 단추를 다는 기능은 도아의 세상사는 이야기를 참고하기 바란다.

각설하고, 이 PDF 저장 단추도 인쇄CSS를 이용하기 때문에 자신의 홈페이지에 인쇄CSS를 적용해 두면 PDF 저장 기능에서 더 짧은 시간에 그 기능을 이용할 수 있다. PDF 저장 기능은 외국 사이트에 웹페이지 정보를 보내면, 그곳에서 PDF로 저장해서 자신의 컴퓨터로 내려받을 수 있게 해 주는 서비스이기 때문이다.

아래 다운로드는 왕미친세상에 달아둔 PDF 저장 단추를 클릭하여 만든 PDF 파일이다. 참고하기 바란다.

다운로드

다음과 같이 아이디 페이지를 PDF 파일로 변환하였다.

관련 문서

  • 도아 님의 블로그 도아의 세상사는 이야기 : 블로그에 PDF 저장 단추를 달자
  • Learn CSS : CSS 문법을 한국어로 번역해 놓은 사이트. 글자가 깨질 수도 있다. 문자셋을 한국어 (UTF-8) 또는 유니코드 (UTF-8)로 맞추면 해결된다.

이 글은 스프링노트에서 작성되었습니다.

  1. 참고로 파이어폭스는 전체 5쪽이었다. [본문으로]
  2. 인터넷 익스플로러 6은 CSS를 제대로 지원하지 못하고 있다. 이는 모질라 파이어폭스도 비슷하나, 인터넷 익스플로러에 비하면 매우 양호하다. 또한 인터넷 익스플로러 사용자가 많으므로 자료화면은 인터넷 익스플로러에서 따왔다. [본문으로]
  3. 참고로 파이어폭스는 80% 축소 인쇄로 전체 3쪽, 100% 인쇄로 전체 4쪽이었다. [본문으로]
  4. 파이어폭스에서는 아예 구글 광고가 사라져 있다(두 번째 그림) [본문으로]
  5. 파이어 폭스에서는 위젯 없이 공백으로 남아 있다. 이 부분에 대해 좀 더 연구가 필요하다. [본문으로]
  6. article 및 article_ 로 시작하는 클래스를 편의상 article 클래스 모듬이라고 하겠다. [본문으로]
Trackback 1 Comment 3
prev 1 next


티스토리 툴바