왕미친놈의 왕미친세상

스프링노트를 사용하면서 여러 벌레를 발견했지만, 재현에 성공한 것은 거의 없다. 그러다가 바로 어제(2009년 4월 24일) 2개나 재현에 성공했다. 바로 스프링노트의 태그 표기 벌레와 지금 소개하는 링크 편집 벌레이다.

벌레의 유형

• 수작업으로 만든 링크와 외부에서 복사하여 붙인 링크를 차별하는 벌레이다. 복사하여 붙인 링크를 편집하면 그것의 주소를 마음대로 바꾸어 버리는 벌레이다.

직접 만든 링크와 복사해 붙여넣은 링크가 다르게 해석되는 이유를 알 수 없다. 또한 어떤 경우에는 직접 만든 링크와 동등하게 취급하고, 어떤 경우에는 다르게 취급한다. 직접 만든 링크와 동등하게 처리하는 경우는 스프링노트에서 내 블로그로 발행한 문서에 포함된 링크가 대부분이었다. 그밖에 다른 웹페이지의 링크를 붙여 넣은 경우에는 모두 링크 주소를 바꾸어 버렸다.

벌레의 발견

벌레의 발견이라고 할 수도 있고, 링크의 비교라고 할 수 있는 작업이다. 

스프링노트의 링크 만들기 기능을 이용하여 만든 링크

가장 먼저 스프링노트의 링크를 HTML 코드로 살펴보자. 모질라 파이어폭스에는 선택한 소스 보기라는 기능을 제공하고 있다. 그것을 이용하면 링크 부분의 HTML 소스만 떼어 살펴볼 수 있다.

마우스 오른쪽 단추를 눌러 팝업 메뉴를 부른 화면

위의 작업을 통해 보게된 선택한 영역의 HTML 소스

1. <a href="http://salm.pe.kr/entry/Springnote-Tag-Bug" class="external newWindow" title="http://salm.pe.kr/entry/Springnote-Tag-Bug">스프링노트의 태그 표기 벌레</a>

스프링노트의 링크 만들기 기능을 이용하여 링크를 만들게 되면 위와 같이 class="external newWindow" 라는 클래스 선택자를 추가하게 된다.

다음과 같이 링크를 수정하면 링크 대상이 현재 링크된 곳을 가리키게 된다.

링크 수정/삭제를 선택하는 팝업

링크 수정/삭제 팝업에서 수정을 선택한 화면

스프링노트의 링크 만들기 기능을 이용해서 만든 링크는 링크를 고칠 때 위와 같이 원래 주소, 곧 링크 대상을 유지해 준다.

스프링노트의 링크 만들기 기능을 이용하지 않은 링크

스프링노트의 링크 만들기 기능을 이용하지 않은 링크는 class="external newWindow" 라는 클래스 선택자를 가지지 않은 링크를 말한다.

도아의 세상사는 이야기의 게시글에서 링크 하나를 복사했다. 그런데 그것이 블로그 기사 제목이라서 아래와 같이 나타났다.

좌우 폭이 좁은 까닭은 화면 크기가 800×600px이기 때문이다.

아무튼 단락제목2(HTML 태그로는 <H2>)에 해당하며, 녹색 글씨에 녹색 밑줄이 생긴 이유는 링크가 걸려 있기 때문이다. 이것을 위의 링크 수정하는 법대로 링크를 수정하는 과정은 아래와 같다.

우선 단락을 본문으로 바꾸었다.

그 뒤 링크 편집창(편집 애플릿?)을 띄우면 뜬금없이 "PermaLink :: 옥션의 어이없는 판매자"라고 나타난다. 저 글귀는 어디에서 나타났을까? 왜 웹 주소(URL 등)가 아닌 저런 문장이 나타났을까?

선택한 영역의 HTML 소스를 살펴보면 답이 나온다. 그렇다. 링크(A 태그)의 title 속성을 따다가 나타내 주고 있다.

이것을 확인하기 위해 다른 태그도 복사했지만, 역시나 title 속성을 따서 나타내 주고 있었다. 그렇다면 굳이 class="external newWindow" 클래스 선택자를 넣을 필요도 없었다는 말인데 왜 굳이 그렇게 하는지 이해하기 힘들었다.

기술적인 해석

기술적인 측면으로 본다면 단순히 하이퍼링크(A 태그)의 title 속성을 따올 뿐이며, 벌레라고 보기는 힘들었다. 그러나 주소를 정상적으로 링크 대상에 나타내려면 링크 주소와 title 속성을 항상 같게 해야만 한다는 점에서는 문제가 있다고 하겠다. title 속성은 누구나 정할 수 있지만, 대부분 링크를 설명하는 문구를 넣게 된다. 위에서 예로 든 링크도 "PermaLink :: 옥션의 어이없는 판매자"와 같은 글귀가 그것이다. "옥션에서 본 어이없는 판매자에 대한 링크"임을 나타내기 위해 title 속성을 저렇게 주었음을 알 수 있다.

스프링노트 링크 대상을 표시하는 문제를 해결하기 위한 방법으로도 그다지 좋지 않다고 생각한다. 물론 title 속성을 참조함으로써 간단한 코드를 만들 수 있다는 점에서는 동의한다. 하지만 이번과 같은 상황에서는 너무 단순한 것을 찾다가 낭패가 생긴 경우이다. 외부 링크인지만 검사했더라도, 외부 링크이면 title 속성이 아닌 href 속성을 참조하게 만들었다면 이번 벌레는 애초에 생기지 않았으리라 생각한다.

회사 측 답변

2009년 4월 27일 현재 오류를 보고한 상태이며, 수정하겠다는 답변을 받았다.

관련 문서 및 페이지

• [벌레와 팁] - 스프링노트의 태그 표기 벌레
• 스프링노트 홈페이지 : http://www.springnote.com/ko

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

스프링노트를 자주 사용한다. 아니, 아예 끼고 산다고 해야 옳겠다. 블로그를 시작하면서부터 도아 님이 알려준 스프링노트를 써서 글을 발행하고 있기 때문이다. 처음 글 몇 개를 제외하고는 모두 스프링노트에서 작성했다.

그런데 최근에 자잘한 오류가 눈에 띄기 시작했다. 오류보고를 하려고 해도 재현을 하지 못해서 참고 있었다. 그러나 이번에 황당하게 재현하게 되어서 소개하고자 한다.

벌레의 유형

1. 이 벌레는 남의 영역을 침범하는 벌레이다.
2. 특정 웹브라우저에서는 자기 자신을 감추어버리는 은신술의 달인이다.

보통 경로명 등이 길어지면 경로명 일부를 ... (마침표 3개) 등으로 대치하는데, 이 벌레는 아예 태그가 있던 영역을 지워버렸다. 물론 인터넷 익스플로러에서는 다른 것이 표시되어야 하는 영역을 침범할 뿐 자기 자신의 일부를 그대로 나타내 주었다.

벌레의 발견

스프링노트에서 글을 작성하다가 너무 많은 태그를 입력하자 갑자기 태그 전체가 사라져 버렸다. 태그 고치기 단추와 태그 표시 단추가 모두 사라진 셈이다.

오류 없이 태그를 보여주는 화면

정상적인 상태에서는 위와 같이 나타난다. 이때 현재 편집하는 글의 상태를 알 수 있는 상태 표시줄만 따로 떼어내면 다음과 같다.

상태 표시줄 화면

글을 편집하다 보니 태그를 너무 많이 입력하게 되었다. 그러자 내 파이어폭스에서 태그 표시 아이콘, 태그, 태그 편집 아이콘이 사라졌고, 아울러 페이지 히스토리 아이콘과 CCL 표시도 사라져 버렸다.

모질라 파이어폭스에서는 너무 많은 태그를 입력하자 아예 사라져 버린 태그 목록과 태그 표시 및 태그 입력 아이콘. 그리고 그 오른쪽 구성물도 사라졌다.

왼쪽 내비게이션을 감추자 비로소 입력한 태그 목록과 태그 표시 및 태그 편집 아이콘이 나타났다.

인터넷 익스플로러에서는 태그 목록과 태그 표시 아이콘은 남았으나, 태그 편집 아이콘과 그 오른쪽 구성물이 사라졌다.

왼쪽 내비게이션을 감추자 태그 편집 아이콘과 페이지 히스토리는 나타났으나, CCL 표시는 다시 나타나지 않았다.

위와 같이 모질라 파이어폭스(3.0.9판)와 인터넷 익스플로러(v6 sp2)에서는 그 정도의 차이가 있지만 제대로 화면에 출력해 주지 못하는 상태였다. 구글 크롬이나 오페라 등의 웹브라우저에서도 그다지 다르지 않은 결과를 나타내리라 생각한다.

현재 이와 관련한 해결책은 태그를 많이 입력하지 않는 방법뿐이다. 응급책으로는 왼쪽 내비게이션과 오른쪽 책갈피를 모두 감추고 쓰는 것도 한 방법이 될 수 있다.

회사 측 답변

2009년 4월 26일 현재 오류를 보고한 상태이며, 태그 표시를 수정하겠다는 답변을 받았다.

관련 문서 및 페이지

• [벌레와 팁] - 스프링노트의 링크 편집 벌레
• 스프링노트 홈페이지 : http://www.springnote.com/ko

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

티스토리에서 이미지 갤러리를 넣으려고 했는데, 뜻밖에도 본문에 삽입된 것은 슬라이드쇼였다. 의도하지 않은 일이 생겨서 기분이 좋지 않았는데, 삽입된 슬라이드쇼가 정상 동작하지 않았다. 첫째 이미지와 마지막 이미지를 보여주지 않았다. 다시 말해 7개의 이미지로 이미지 갤러리를 만들어서 본문에 넣게 했는데, 실제로 본문에 들어간 것은 5개의 이미지를 가진 슬라이드쇼였다.

벌레의 유형

1. 맏이와 막내를 왕따시키는 별난 벌레이다. 아, 벌레는 원래 이상한 놈들이라고. 그 말도 맞다.
2. 실제로는 저와 관련없이 업로드 실패 시에 나타나는 벌레이다.

한편 티스토리나 다른 블로그에서 등장했던 변신술을 익힌 벌레가 여기에서도 등장한다고 생각했다. 이미지 갤러리를 만들라고 하니까 왜 슬라이드쇼를 만들어 버렸기 때문이다. 그러나 검색 결과 티스토리 매뉴얼 블로그에 [확장 업로드 기능] 업로드된 파일을 다양한 형태로 이용해 봅시다 및 [이미지] 슬라이드쇼의 사용법을 알고 싶어요라는 글이 있었다. 결국 이미지 갤러리를 만들게 되면 슬라이드쇼로서 그것을 구현한다는 사실을 알게 되었다. 그밖에 사항은 다음 고객센터에서 TISTORY > 글 관리 부분을 살펴보기 바란다.

벌레의 발견

[확장 업로드 기능] 업로드된 파일을 다양한 형태로 이용해 봅시다라는 블로그 기사에서 이미지 갤러리는 슬라이드 효과를 자바스크립트를 이용하여 갤러리로 생성한다고 설명하고 있다. 나는 그것을 몰랐지만, 아무튼 HxD 소개 기사를 쓰면서 이미지 갤러리 기능을 이용하여 슬라이드쇼를 만들었다.

위의 그림에서 빨갛게 표시한 부분(? (경)자처럼 보이는 부분)을 클릭하여 이미지 갤러리를 만들었다. 이때 파일을 7개 선택하였다.

그런데 실제로 만들어진 이미지 갤러리에서는 위와 같이 5개의 파일만 포함되어 있다고 나타나고 있었다. 참고로 저 저작권 화면은 2번째 파일이다. ▶▶ 아이콘을 클릭하여 다음 파일을 살펴보았다. 그럼으로써 알게 된 사실은 첫 파일과 마지막 파일이 나타나지 않는다는 점이었다.

위의 두 파일은 모질라 파이어폭스(v3.0.9)에서의 티스토리 편집창 화면이다. 두 화면 모두 오른쪽에 보면 파일이 7개임을 알 수 있다. 이미지 갤러리를 만들때 순서가 흩트러지기에 파일명 맨 앞에 숫자를 붙여두었다. 다시 말해 1번부터 7번까지 있다는 말이다. 첫 화면은 위지위그 편집기 모드이고, 두 번째 화면은 HTML 편집 모드이다.

첨부한 파일의 수를 세었다. 그러나 위와 같이 모두 7개였다. 결국 화면에 나타낼 때 오류가 생긴다는 사실을 알게 되었다.

혹시나 하는 마음에 인터넷 익스플로러(v6 sp2)에서도 시험해 보았다. 결과는 마찬가지였다.

결국 편집창 상단에 있는 슬라이드쇼 아이콘()을 클릭하여 이미지 갤러리를 삽입하게 되었다. 그 과정에서 알게된 이 버그가 이미지 파일을 정확히 인식하지 못해서 발생하고 있다는 심증을 갖게 하였다.

위의 그림은 슬라이드쇼에서 업로드시킨 이미지 파일이다. 그런데 조금 이상한 점이 보이지 않는가? 바로 첫째와 둘째 파일은 이미지의 크기와 파일 크기가 나타나고 있으나, 셋째 파일은 파일 크기만 나타나고 있다.

황당한 점은 이미지 갤러리로 만든 슬라이드쇼에서는 정확히 인식하지 못한 파일은 최종 결과에서 빼버리고 슬라이드쇼를 만들지만, 슬라이드쇼 아이콘을 클릭하여 만든 슬라이드쇼에서는 제대로 인식하지 못하는 파일도 최종 결과에 포함시켜 슬라이드쇼를 만들어준다. 이렇게 제대로 인식되지 않는 원인으로는 업로드 실패일 가능성이 가장 높다고 생각한다.

벌레의 제거

이 벌레를 제거하는 방법은 단순하다.

아무리 해도 안 되는 일은 그냥 포기하고 다시 업로드 하면 된다. 이미 업로드 된 파일로 이미지 갤러리를 만들려고 해도 안 된다면 그냥 다시 업로드하는 쪽이 낫다는 말이다. 어차피 내 예상대로 업로드 오류였다면, 다시 업로드함으로써 그 벌레는 사라지게 된다. 실제로 HxD 소개 기사는 현재 이미지 갤러리가 제대로 보이고 있다.

또한 애초에 슬라이드쇼 아이콘을 클릭하여 슬라이드쇼를 만들어도 된다. 엎어치나 메치나 같은 결과를 보여주기 때문이다.

회사 측 답변

이 문제는 버그 리포팅을 하지 않았다.

관련 문서

• [유틸리티] - HxD
• 티스토리 매뉴얼 블로그 :: [확장 업로드 기능] 업로드된 파일을 다양한 형태로 이용해 봅시다 및 [이미지] 슬라이드쇼의 사용법을 알고 싶어요
• JYONG Blog :: 티스토리 슬라이드쇼 업로드 에러
• TISTORY > 글 관리

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

팁텍

티스토리는 인쇄 페이지 기능을 지원하지 않는다. 그러다가 인쇄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="왕미친놈의 왕미친세상" href="https://koc2000.tistory.com/rss" />
6. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
7. <link rel="shortcut icon" href="https://salm.pe.kr/favicon.ico" />
8. <title>왕미친놈의 왕미친세상 :: '파이어폭스' 태그의 글 목록 (2 Page)</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="왕미친놈의 왕미친세상" href="https://koc2000.tistory.com/rss" />
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="https://salm.pe.kr/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="왕미친놈의 왕미친세상" href="https://koc2000.tistory.com/rss" />
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="https://salm.pe.kr/favicon.ico" />

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

좀 더 추가

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

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

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

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

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

    CSS 적용 전 인쇄 미리보기

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

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

    

    CSS 적용 후 인쇄 미리보기 1 (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 클래스 및 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 파일로 변환하였다.

• 인쇄CSS 적용 전 PDF 파일 :
  invalid-file
• 인쇄CSS 적용 후 PDF 파일 :
  invalid-file

관련 문서

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

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

읽기에 앞서

이 문제는 티스토리 시스템의 문제가 아님을 확인하였다. 이 글에 나타난 현상을 겪는 사람은 자신의 불여우에 확장 기능 MR Tech's Link Wrapper 가 설치되어 있는지를 먼저 살피기 바란다. 혹시 그것을 설치하였다면, 삭제하기 바란다. 그 확장 기능은 한메일 및 티스토리 시스템과 약간의 충돌을 보이고 있다.

벌레의 유형

티스토리 파일 첨부 창이 파이어폭스에서 제대로 표시되지 않는 문제가 있다.

좀 짓궂게 이야기하면 파일 첨부 창을 잘라먹는 벌레로서, 과식을 자주 하는 듯이 보인다.

벌레의 발견

벌레 정보

티스토리에 가입한 뒤 곧바로 발견할 수 있었다. 그때는 티스토리 그림 파일 업로드 벌레 건에 매달려 있던 때라 이것은 그다지 신경을 쓰지 않았다. 그러나 매번 그림을 올릴 때마다 파일 첨부 창을 아래로 늘여야 하기에, 귀찮음이 더해져서 결국 올리게 되었다.

우선 이 벌레가 익스플로러에서 발견된 적은 없다. 한메일 프리징 현상처럼 파이어폭스에 특정 확장 기능을 잘못 설치하여 나타나는 문제도 아니었다. 다시 말해 파이어폭스를 설치한 뒤 3.0.4판부터 3.0.7판까지 나타나는 문제이며, 아무 확장 기능도 설치하지 않았을 때에도 발생했다. 참고로 3.0.8판에서는 확인하지 못하였다.

벌레 찾기

아래는 티스토리 글쓰기 화면이다. 오른쪽 파일첨부를 클릭하여 파일 첨부 창을 보이게 한다.

아래 파일 첨부 창은 아래 부분이 조금 이상하다. 맨 마지막 줄에서 "음원 필터링 시스템은 저작권 침해로 인한 문제로부터 회원 여러분을 보호하"라고 나온 뒤 잘려 있다. 오른쪽 아래 파란 화살표가 가리키는 부분을 클릭한 뒤 아래로 드래그 하면 파일 첨부 창이 늘어남을 알 수 있다.

아래 그림은 파일 첨부 창을 아래로 늘인 모습이다. 결국 아래 그림처럼 되어야 하는데, 위의 그림처럼 아랫부분을 잘라먹고 있었던 셈이다.

제작자/제공자의 답변

4월 7일 현재 회사 측으로부터 답변이 왔다. 회사 측에서는 이 문제를 재현하지 못하였으나, 지속적으로 개선안을 찾고 있다고 하였다. 아울러 이 문제가 발생하는 원인으로는 창의 크기을 변화시키는 스크립트를, 창을 읽어들인 나서 불러오기 때문에 일어난 문제로 보고 있었다.

관련 문서

• 2009/03/21 - [벌레와 팁] - 티스토리 그림 파일 업로드 벌레

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

MinTrayR은 "MinimizeToTray revived"의 약자로 여겨진다. 그 뜻은 " 'MinimizeToTray'가 되살아났다."이다. 이름과 뜻에서 보듯이 불여우의 부가 기능(Add-on) MinimizeToTray을 최신버전에서 사용할 수 있게 해주는 유틸리티이다. MinimizeToTray는 불여우를 최소화했을 때 작업표시줄이 아닌 트레이로 보내주는 기능을 한다. 다시 화면에 보여줄 때는 트레이에 있는 불여우 아이콘을 더블 클릭하면 된다. MinTrayR도 기본적으로 MinimizeToTray와 같은 기능을 한다. 한편 좀 더 나은 호환성을 보여준다.

이 프로그램도 좋지만 홈페이지도 상당히 잘 만들어져 있다. 요즘은 거의 없는 640×480 화면에서도 거의 오류 없이 보여준다. 웹페이지 제작에 관심 있는 사람은 한 번쯤 들르기를 바란다.

• 프로그램 이름 : MinimizeToTray revived (MinTrayR) / 민`트레이`알
• 버전 : 0.3.5 (2009년 3월 4일자)
• 저작권자/제작자 : 닐스 마이어 (Nils Maier) / 닐스 마이어 및 공헌자 3명
• 분류 : 확장 기능 / Add-on
• 지원 프로그램 : 파이어폭스 3.0.*, 선더버드 3.0.*, 송버드(Songbird) 0.7-1.1*, 플록(Flock) 2.0
• 지원 운영체제 : 윈도 2000, XP, Vista
• 홈페이지 : http://tn123.ath.cx/mintrayr/
• 저작권 : MPL 1.1 / GPL 2.0 이상 / LGPL 2.1 이상
• 평가 : @@@@@@@@@@ ( 9 / 10 )
• 스크린 샷 :
  

  확장 기능 화면

  
  
  

  확장 기능 환경 설정 화면

  
  
  

  트레이에 불여우 아이콘이 보인다. 저것을 두 번 클릭하면 원래 화면으로 복귀한다.

  
  
  

  MinTrayR 홈페이지. 640x480 화면에서도 잘보이도록 구성되어 있다. 빨간 줄은 내가 표시한 것이다.

• 설명 :
  모질라 파이어폭스를 작업 표시줄이 아닌 트레이로 보낼 수 있게 해 준다.
• 기타 :
  현재 업데이트가 되지 않는 MinimizeToTray를 대체할 수 있는 프로그램이다. 별다른 벌레는 없으나, 아쉬운 점이 눈에 조금 띈다.