노무현 대통령 배너
BLOG main image
왕미친놈의 왕미친세상입니다. 미친 소리는 써도 되지만, 근거 없는 소리는 쓰면 안 됩니다.


Giveaway of the Day - Web Page Maker

하루에 하나씩 정품 소프트웨어를 주는 Giveaway of the Day 홈페이지에서 2010년 6월 24일Web Page Maker를 준다고 합니다.

Giveaway of the Day 홈페이지

Giveaway of the Day 홈페이지 - 오늘은 Web Page Maker 프로그램이 공짜!

프로그램 설명

Web Page Maker(웹 페이지 메이커) 프로그램은 사용하기 쉬운, HTML 문법을 알 필요없이 몇 분 만에 웹 페이지를 만들고 업로드할 수 있는 웹 페이지 편집기입니다. 간단히 오브젝트를 레이아웃 안의 페이지 및 위치에 자유롭게 드래그앤드롭합니다. 미리 디자인된 몇몇 템플릿이 사용자의 시작을 도울 것입니다.

페이지에 넣을 수 있는, 즉시 사용할 수 있는 네비게이션 바를 포함하고 있습니다. 추가적인 기능으로는 내장 색상 검출기(color picker) 및 자바 스크립트 라이브러리, 이미지 라이브러리, 내장 FTP 클라이언트 등이 있습니다.

주요 기능

  • HTML 코딩이나 에 대한 경험이 필요하지 않습니다.
  • 객체의 드래그앤드롭. 진정한 위지위그 레이아웃 디자인
  • 다중 페이지로 웹사이트 만들기 및 한번에 사이트 쉽게 관리하기
  • 위지위그 방법으로 존재하는 HTML 페이지 가져오기 및 편집 능력
  • CSS 이용 가능. 텍스트를 어떻게 웹사이트에서 보여줄는지를 조정
  • 미리 디자인한 웹사이트 템플릿 포함
  • 클릭 한 번으로 웹사이트 출판

프로그램 정보

  • 사용자 평가 (@날짜:오늘 현재) : 좋아 84 / 싫어 53 (사용자 평가 보러 가기)
  • 시스템 요구사항
    • 운 영체제 : Windows 7 및 Windows 95/98/ME/NT4/2000/XP/Vista
    • CPU : 최소 펜티엄급 이상 / 400 MHz 이상 권장
    • RAM : 최소 24 MB / 64 MB 이상 권장
    • 하드 디스크 여유 공간 : 7.1 MB (설치용) / 10 MB (작업용 공간)
    • 멀티미디어 요구사항 : 화면 색상 - 최소 16비트 하이컬러 및 24비트 트루컬러 권장.
    • 기타 요구사항 : 최소 Internet Explorer 5.0 이상 / Internet Explorer 6.0 이상 권장
  • 제공자 : Web Page Maker Software Inc. (웹 페이지 메이커 소프트웨어 Inc.)
  • 제공자 홈페이지 : http://webpage-maker.com/
  • 파일 크기 : 4.22 MB
  • 가격 : 이 프로그램은 49.95달러입니다. 그러나 Giveaway of the Day 방문자에게는 시간 제한(time-limited)으로 무료로 제공됩니다.
  • 시간 제한 : 2010년 6월 24일 오후 4시부터 25일 오후 4시까지 (한국 시간)

다운로드 및 설치

Giveaway of the Day - Web Page Maker 페이지에서 정해진 기간 동안 다운로드할 수 있습니다.

다운로드 받은 파일의 압축을 풀고, readme.txt 파일을 잘 읽고 실행하십시오. 이 readme.txt 파일은 다운로드 받은 모든 압축 파일 안에 들어 있습니다. 조심스럽게 소프트웨어를 설치한 뒤에 활성화하면 됩니다.

압축 푼 뒤의 디렉터리

압축 푼 뒤의 디렉터리

위 그림처럼, 압축을 풀면, 파일이 둘 또는 셋 나타나게 됩니다. 이때 readme.txt 파일과 Setup.exe 파일은 반드시 존재합니다.

설치한 뒤 첫 실행 화면 - 메인 화면

설치한 뒤 첫 실행 화면 - 메인 화면

활성화한 뒤 실행 화면 - About 화면

활성화한 뒤 실행 화면 - About 화면

약관 및 조건

당신이 Giveaway 기간에 다운로드하여 설치한 소프트웨어에 대해 다음과 같은 중요한 제한이 있음을 기억하기 바랍니다.

  1. 무료 기술 지원을 받을 수 없습니다. (No free technical support)
  2. 다음 버전의 무료 업그레이드를 받을 수 없습니다. (No free upgrades to future versions)
  3. 엄격하고 순수하게 비상업적 사용만 허용됩니다. (Strictly non-commercial usage)

이 소프트웨어 제품은 묵시적이든 명시적이든 어떠한 종류의 보증없이 "있는 그대로"("AS IS") 제공됩니다. 제한 없이, 법률로써 허용되는, 다운로드한 소프트웨어 제품의 품질 및 성능을 비롯한 모든 위험을 최종 사용자가 부담해야 합니다.
THIS SOFTWARE PRODUCT IS PROVIDED "AS IS" WITHOUT ANY WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED. WITHOUT LIMITATION, TO THE FULLEST EXTENT ALLOWABLE BY LAW, END USER ASSUMES THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE DOWNLOADED SOFTWARE PRODUCT.

기타

  • 한글/한국어 지원
    • 설치 프로그램에서 한글/한국어 지원 : 아니오 (영어)
    • 실행 시 프로그램 메뉴에서 한글/한국어 지원 : 아니오 (영어)
  • 설치 시 및 실행 시 작업
    • 설치 시 프로그램 종료 : 아니오.
    • 설치 시 툴바 설치 : 아니오.
    • 설치 후 자동 업데이트 : 지원 안함
    • 설치 후 재시작 : 아니오.
    • 실행 시 재시작 : 예 - 프로그램을 활성화(등록)한 뒤에는 다시 시작해야 합니다.
  • 설치 시 사용자 등록 : 아니오.
  • 설치 및 실행 시 필수 프로그램 : 없음.
  • 설치 시 라이선스 : 15일 시험판
    • Help 메뉴에서 Register... 항목 클릭!
      활성화 1

      활성화 1 - Register... 항목 클릭!

    • 등록 화면에서 Enter Registration Code 단추 클릭.
      활성화 2

      활성화 2 - Enter Registration Code 단추 클릭.

    • Name 항목에는 readme.txt 문서의 Registration name 항목의 내용을 입력하고, Code 항목에는 Registration key 항목을 입력합니다. 그 뒤에 OK 단추를 클릭하고 나서 프로그램을 다시 시작하면 됩니다.
      활성화 3

      활성화 3 - 빈 칸을 채워 넣은 뒤 OK 단추 클릭!

  • 기타 : 프로그램 메뉴에서 한글 지원을 하지 않아서 아쉽습니다. 다만 이 프로그램으로 만든 웹페이지에서는 한글을 비롯한 다국어를 정상적으로 출력해 줍니다.

관련 문서

내부 문서

  1. GotD - Paragon Virtualization Manager 9.5 Personal (English) - 다운로드 등에 대한 설명
  2. GotD - YouTube Music Downloader 3.2 - readme.txt 파일 등에 등록번호가 들어 있을 경우 백업하는 방법에 대한 설명
  3. GotD - Wise Disk Cleaner 5.2 Professional - Activate.exe 파일을 실행함으로써 활성화하는 방법에 대한 설명
  4. GotD - Wondershare Photo Collage Studio 4.2.12 - 이메일로 등록 번호를 받는 경우 활성화하는 방법과 백업하는 방법에 대한 설명
  5. GotD - Audio Speed Changer Pro - 포터블 버전이 포함된 경우에 대한 설명

외부 문서

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

'소프트웨어 > Giveaway' 카테고리의 다른 글

GotD - Uconomix Encryption Engine 1.0  (0) 2010.06.26
GotD - Astroburn Pro  (0) 2010.06.25
GotD - Chameleon Startup Manager 3.0  (0) 2010.06.23
GotD - Photo Frame Show  (0) 2010.06.22
GotD - USB Stick Encryption  (0) 2010.06.21
글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

며칠 전부터 블로그에 떠다니는 메뉴를 달려고 지랄발광을 했음에도 성공하지 못했습니다. 될듯 될듯 하면서도 끝끝내 실패했는데, 왠걸 소스 하나를 보자 맥이 탁 풀리더군요. 간단하면서도 잘 동작하는 메뉴를 만들 수 있게 되었습니다. 다만 티스토리의 버그 때문에 추천 배너에 대한 사항은 정확하게 잘 작동하지는 않습니다.

  • 참고 1 : 이 글은 어디까지나 티스토리를 기준으로 설명하였습니다. 태터툴즈의 다른 형제들(텍스트큐브 및 태터툴즈)에서는 정상 동작을 보장하지 못합니다. 그러나 몇몇 설정만 바꾸면 적용할 수 있으리라 생각합니다.
  • 참고 2 : 이 글에서 추가한 CSS 코드 및 (X)HTML 코드의 저작권도아 님께 있습니다. 또한 자바스크립트 추가 부분강팀장 님께 저작권이 있습니다. 따라서 그 두 부분은 GFDL 및 CCL의 적용을 받지 않으므로 주의하기 바랍니다.

이동 위치 및 메뉴 항목 정하기#

가장 먼저 할 일은 이동 위치메뉴 항목을 정하는 일입니다.

스킨의 구조와 이동 위치#

티스토리 스킨 제작 가이드에서 스킨의 구조를 살펴보면 스킨의 구조, 곧 태터툴즈로 만들어진 블로그의 구조는 다음과 같습니다.


티스토리 스킨의 구조 by 태터툴즈 스킨커뮤니티

대부분의 경우 header부터 footer까지 화면에 나타납니다. 이때 특별한 일이 없다면 sideinfo 영역(사이드바)은 이동 위치로 잡지 않도록 합니다. 왜냐고요? 위 그림에서 보듯이 본문에 해당하는 content 부분과 화면의 상하 위치가 겹치기 때문입니다. 대부분의 경우 화면의 좌우 이동을 고려하여 떠다니는 메뉴를 만들지는 않으므로 굳이 sideinfo 영역에 이동 위치를 잡을 필요가 없다는 말입니다.

대충 잡을 수 있는 이동 위치는 문서의 처음 또는 끝, 본문의 처음 또는 끝, 댓글의 처음 또는 끝(또는 댓글 보기 또는 댓글 쓰기) 등입니다. 거기에 더하여 블로그 홈이나 블로그 관리용 문서로 이동하게 만들 수도 있습니다.

이동 위치와 이동 메뉴#

이 부분은 제 블로그를 기준으로 설명합니다. 각자 자신의 블로그에 넣는다고 상상하면서 글을 읽어 주십시오.

왕미친 세상 블로그 구조

왕미친 세상 블로그 구조

위 그림에서 빨간색으로 표시한 부분이 화면에 나타나는 부분이며, 자주색 줄이동 위치입니다. 맨 위에서부터 차례대로 글로 나타내면, 문서 처음(top), 글 관련 태그(tag) 또는 추천 배너(recommend)[각주:1], 트랙백 / 댓글(comment1), 댓글 쓰기(comment2), 페이징(paging), 글끝(end) 등입니다.

그리고 위 그림에서 블로그 메뉴가 헤더와 꼬리에 모두 나타납니다. 그러나 여기에서는 원래 있던 블로그 메뉴는 그대로 두고 메뉴를 하나 더 추가하였습니다.

떠다니는 메뉴 구현 방법#

이 글에서는 떠다니는 메뉴를 스타일(CSS)을 이용하여 구현해 보았습니다. 소스코드는 Fixed Layer Hack for IE6에 나오는 코드를 참고하였습니다. 또한 자바스크립트를 최소로 하는 것이 호환성에 더 좋고, 코드도 더 간단하다고 생각하여 그렇게 결정했습니다. 실제로 그와 비슷하게 적용된 블로그는 도아의 세상사는 이야기입니다. 특히 도아의 세상사는 이야기 블로그에서는 표(테이블)이 아닌 리스트를 활용하고 있으므로 따라해 보았습니다.

스킨에 넣을 이동 메뉴(X)HTML 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#item1">항목1</a></li>         <li><a href="#item2">항목2</a></li>         <li><a href="#item3">항목3</a></li>         <li><a href="#item4">항목4</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

이동 메뉴만으로는 아무런 동작도 하지 못합니다.

[code html] <a name="top"></a> <a name="item1"></a> <a name="item2"></a> <a name="item3"></a> <a name="item4"></a> <a name="end"></a> [/code]

위의 코드를 스킨의 (X)HTML 코드에 추가해야 합니다.

item항목 대신 a 태그의 name(또는 id)이동 위치의 이름이 와야 합니다.

스킨에 넣을 CSS 코드는 다음과 같습니다. 이것을 CSS 부분(style.css)의 맨 끝에 넣으면 됩니다.

[code css] /* 떠다니는 메뉴 (Floating Menu) */ #floatdiv {     position:fixed; _position:absolute; _z-index:-1;     width:65px;     overflow:hidden;     right:0px;     top:30%;     border: #5D5D5D 1px solid;     background-color: transparent;     font-size: 14px;     margin:0;     padding:0; }
#floatdiv ul  { list-style: none; } #floatdiv li  { margin-bottom: 2px; text-align: center; } #floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; } #floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; } #floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; } [/code]

기본적으로 위의 코드가 들어가며, 더 추가될 수도 있습니다.

블로그 화면과 이동 위치#

실제 블로그에서 위치를 찾아 보겠습니다. 자주색 가로선은 떠다니는 메뉴에서 이동하게 될 이동 위치를 가리킵니다.

이동 위치 1 : 맨 위

이동 위치 1 : 맨 위


이동 위치 2 : 글 끝 또는 추천 배너

이동 위치 2 : 글 끝 또는 추천 배너


이동 위치 3 : 트랙백/댓글 보기

이동 위치 3 : 트랙백/댓글 보기


이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)

이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)


이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)

이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)


이동 위치 6 : 맨 아래

이동 위치 6 : 맨 아래

위에서 보면 대충 어느 위치인지 감이 오지 않습니까? 일단 글의 맨 처음 부분에 이동할 수 있게 하고, 그 다음으로 추천 배너의 위치[각주:2], 트랙백/댓글 보기, 댓글 달기, 페이징, 문서의 맨 끝 등으로 구성할 수 있습니다.

이때 이동 위치 5 : 페이징 그림을 보면 사이드바에 파란색으로 이동 위치를 표시했습니다. 이것은 1단 스킨에서는 유용하지만, 2단 스킨이나, 3단 스킨에서는 조금 불합리한 점이 생깁니다. 여기에 이동 위치를 지정하면 페이지가 위아래로 왔다 갔다를 반복하게 될 수도 있으므로 꼭 필요하지 않다면, 그리고 1단 스킨이 아니라면, 이동 위치를 지정하지 않는 것이 좋습니다.

블로그 스킨 코드에서 이동 위치 찾기 및 코드 넣기#

스킨 소스와 관련한 기본 사항은 티스토리 스킨 가이드를 참조하기 바랍니다.

티스토리 관리 화면 - 스킨 편집 화면

티스토리 관리 화면 - 스킨 편집 화면

실제로 넣을 코드는 다음과 같습니다. 각각의 위치에 <a name="이름"></a>와 같은 식으로 붙여 주면 됩니다. 구성할 메뉴와 이동 위치에 넣을 코드는 아래와 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#recommend">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code] [code html] <a name="top"></a> <a name="recommend"></a> <a name="comment1"></a> <a name="comment2"></a> <a name="paging"></a> <a name="end"></a> [/code]

이것을 스킨에 실제로 적용하면 다음과 같습니다. 빨간 네모기준이 되는 (X)HTML 코드 또는 티스토리 치환자입니다. 그것을 찾은 뒤 알맞은 위치에 이동위치를 표시하면 됩니다.

이동 위치 (스킨) 1 : 맨 위

이동 위치 (스킨) 1 : 맨 위

맨 위로 이동하게 만들려면 위 그림의 자주색 줄이 있는 부분, 곧 body 태그의 바로 다음에 a 태그(앵커 태그)를 넣어야 한다.

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

이때 추천 배너를 플러그인에서 추가했기 때문에 위 화면에는 나타나지 않고 있습니다. 저와 달리 추천 배너의 코드를 직접 입력했다면 위 스킨 화면에 나타나게 됩니다. 또한 위와 같이 추천 배너의 코드가 나타나지 않는다면,[각주:3] 저 위치가 본문의 바로 다음인데, 블로그 소스 보기를 통해 정확한 위치를 찾아야 합니다.

다만 이 경우에는 임시로 저곳에 붙여 두겠습니다.

이동 위치 (스킨) 3 : 트랙백/댓글 보기

이동 위치 (스킨) 3 : 트랙백/댓글 보기

이동할 위치는 트랙백과 댓글의 내용이 나오기 바로 전입니다. 이동 위치 3 : 트랙백/댓글 보기 그림을 참조하십시오.

이동 위치 (스킨) 4 : 댓글 쓰기

이동 위치 (스킨) 4 : 댓글 쓰기

댓글 쓰기도 앞의 설명과 마찬가지입니다.

이동 위치 (스킨) 5 : 페이징

이동 위치 (스킨) 5 : 페이징

페이징은 보통 1~3줄로 나타납니다. 아무쪼록 페이징 영역의 맨 앞으로 이동 위치를 잡아야 합니다.

이동 위치 (스킨) 6 : 맨 아래

이동 위치 (스킨) 6 : 맨 아래

맨 아래는 </body>의 바로 앞에 이동 위치를 두면 됩니다.

각각의 위치에 앞서 설명했던 앵커 태그(a 태그)를 넣으면 됩니다. 이때 a 태그의 역할은 링크 걸기가 아닌 위치 지정입니다. 링크를 걸 때는 href 속성(href attribute)을 사용하며, 링크의 대상을 지정할 때는 name 속성(href attribute)을 이용합니다. 다만 링크 대상을 지정할 때 (X)HTML 공통 속성(Common attribute) 가운데 코어 속성(core attribute)에 속하는 id 속성을 사용할 수도 있습니다.

참고 1 : id 속성은 공통 속성이기 때문에 a 태그(a 엘리먼트) 이외에 다른 곳에도 쓰일 수 있습니다.

참고 2 : a 태그(a element / a 엘리먼트)는 앵커(anchor), 곧 을 가리킵니다.

위에서 추천배너에 대한 메뉴와 이동 위치 코드는, 앞서 설명했고 또한 보았듯이, 스킨에서는 넣을 수 있는 위치가 없습니다.[각주:4] 그러나 블로그 소스 보기를 통해서 그 위치를 찾아낼 수는 있습니다.

일단 여기까지 마친 뒤에 저장합니다. 저장은 선택이 아닌 필수입니다.

[저장]을 클릭하여 저장합시다.

[저장]을 클릭하여 저장합시다.

이동 메뉴 적용#

HTML 코드(skin.html) 적용#

일단 앞에서 이동할 위치를 스킨에 지정해 넣었습니다. 이번에는 그 위치로 이동하게 만들 메뉴를 넣어 보겠습니다.

빨간 네모 부분이 메뉴입니다.

빨간 네모 부분이 메뉴입니다.

저 부분을 스킨에서 찾으면 다음과 같습니다.

스킨(skin.html)에서 찾은 메뉴

스킨(skin.html)에서 찾은 메뉴

기준이 되는 것은 위치로그, 미디어로그, 방명록 등입니다. 각자 자신의 블로그 스킨에서 알맞은 문자열을 찾기 바랍니다. 때로는 메뉴가 그래픽 이미지 및 플래시 배너로 되어 있는 경우도 있습니다.

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

다 마쳤으면 일단 저장합니다.

CSS 코드(style.css) 적용#

style.css 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

style.css 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

제 경우는 맨 마지막 부분에 화면에 보이지 않을 부분이 자리 잡고 있습니다. 각자 자신의 CSS 설정의 맨 마지막 부분쯤에 코드를 넣으시면 됩니다.

넣은 뒤에는 저장하면 외형은 완성됩니다.

작동 확인 및 수정#

떠다니는 메뉴의 작동 확인#

떠다니는 메뉴에서 [처음으로]를 클릭했을 때의 화면

떠다니는 메뉴에서 [처음으로]를 클릭했을 때의 화면

하지만 저것이 정상 동작한다는 보장은 못합니다. 배경을 투명으로 했기 때문에 조금 이상하지만, 어쨌든 겉모양은 도아의 세상사는 이야기와 거의 같습니다. 왜? 그것을 베꼈으니까요.

떠다니는 메뉴에서 [추천배너]를 클릭했을 때의 화면

떠다니는 메뉴에서 [추천배너]를 클릭했을 때의 화면

추천배너를 클릭했으나 엉뚱한 곳으로 갔습니다. ^^a 다른 메뉴를 확인한 뒤 나중에 고치겠습니다. 아랫부분은 필요가 없어서 잘랐습니다.

떠다니는 메뉴에서 [댓글보기]를 클릭했을 때의 화면

떠다니는 메뉴에서 [댓글보기]를 클릭했을 때의 화면


떠다니는 메뉴에서 [댓글달기]를 클릭했을 때의 화면

떠다니는 메뉴에서 [댓글달기]를 클릭했을 때의 화면

이미 티스토리에 로그인했으므로 댓글 달기에서 이름이나 비밀번호 등을 묻지 않고 있습니다. 그러므로 다르게 나타날 수도 있습니다.

떠다니는 메뉴에서 [이동메뉴]를 클릭했을 때의 화면

떠다니는 메뉴에서 [이동메뉴]를 클릭했을 때의 화면


떠다니는 메뉴에서 [맨끝으로]를 클릭했을 때의 화면

떠다니는 메뉴에서 [맨끝으로]를 클릭했을 때의 화면

[맨끝으로]를 클릭했을 때는 반응이 조금 다릅니다. 이는 이동 메뉴는 화면에서 전체 높이의 30% 되는 곳에 둥둥 떠 있게 되지만, 이동 위치맨끝은 화면 전체 높이 100% 되는 곳입니다. 따라서 항상 떠다니는 메뉴보다 아래쪽에 위치하게 되므로 위의 그림은 정상입니다.

추천 배너 관련 수정 1#

앞서 추천 배너는 스킨에서 나타나지 않았습니다. 이것을 제가 임의로 지정하였는데, 그 위치는 추천 배너의 위치가 아닌 글의 끝이었습니다. 따라서 옳게 작동하게 만들려면, 떠다니는 메뉴의 항목을 글끝으로라고 고치거나, 또는 추천 배너의 올바른 위치를 지정해야 합니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#ccl-icon-[\##_article_rep_id_##]-0">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

처음에는 위와 같이 고쳤습니다. 그런데 작동을 안 했습니다. 태터툴즈에는 분명히 [##_article_rep_id_##]라는 치환자가 있지만, 티스토리에는 없기 때문입니다. 저렇게 할 수 있다면 매우 간단하게 이동 메뉴를 만들 수 있게 되지요.

추천 배너 관련 수정 2#

해결책을 찾아서 검색하다가 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2라는 페이지는 발견했습니다. 그곳에서는 자바스크립트로 처리하였으며, 저도 그것을 따라했습니다. 이 방법의 단점은 항상 CCL 마크를 달아야 합니다. 실수로 안 달면 추천배너는 작동하지 않게 됩니다.

강팀장 님의 게시글을 참조하여 고친 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><script type="text/javascript">             //<![CDATA[                var str1 = "[\##_article_rep_link_##]";                str2 = str1.slice(1,str1.length);                str2 = "ccl-icon-"+str2+"-0";                document.write("<a href='#"+str2+"'>추천배너</a>");             //]]>             //</script>         </li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

그런데 안 되더군요. ㅡㅡ;; 분명히 강팀장 님의 게시글에서는 잘 작동하는데, 왜 제 블로그에서는 안 될까요?

여러 가지 실험을 반복하여 티스토리에 문제가 있음을 알게 되었습니다. 고유주소permanant link, 곧 permalink를 뜻하므로,고유주소는 항상 블로그주소/아라비아수의 꼴(예컨대, http;//xyz.tistory.com/12345)로 이루어져야 합니다. 그런데티스토리가 제 블로그의 고유주소를 정의하지를 않았습니다. 다시 말해 티스토리의 버그 때문에 제 블로그에는 저 코드가 작동하지 않았다는 뜻입니다.

그런데 분명히 정의된 경우도 있습니다. 글제목에는 정의되어 있는데, 막상 자바스크립트에 적용하려고 보니 정의되지 않았다고 나옵니다. 이런 현상은 트랙백에서도 나타납니다. 스킨에서 트랙백과 관련한 부분에서는 잘 작동하는데, 사용자가 임의로 설정하면 작동하지를 않습니다. 미치고 환장할 노릇이죠. 테스트 블로그를 보시면 이 버그가 나타남을 볼 수 있습니다.

결국 버그 때문에 적용할 수 없게 되었습니다. 당분간 저 부분을 적용하지 않기로 했습니다.

덧붙이는 말#

팁을 적용하면서 발견한 버그는 티스토리에 정나미가 떨어지게 만들었습니다. 오죽하면 블로그를 (텍스트큐브닷컴으로) 합쳐야 하나?라는 생각을 했겠습니까?

다음과 통합된 뒤에 가입해서 그런지, 티스토리 버그 리포팅 등을 티스토리가 아닌 다음에서 처리한다는 것도 마음에 안 드는데, 버그 리포팅을 해도 답변이 없는 것은 진짜 열 받습니다. 제가 버그 리포팅을 한 것 가운데 맨 처음 한 번만 답변을 받았고, 나머지는 지금까지 수정이 안 되고 있고, 답변도 못 받았습니다.

그들은 사용자를 언제까지 기다리게 만들어야 직성이 풀리려는지 모르겠습니다.

관련 문서#

내부 문서#

외부 문서#

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


  1. 왕미친세상 블로그에서는 추천 배너를 글 끝과 태그 사이에 넣고 있습니다. [본문으로]
  2. 내가 생각하기에는, 추천 배너 위치로 이동하기는 블로그 방문자보다는 블로그 주인(블로거)의 입장을 고려한 위치 선정으로 보입니다. 하지만 대부분 추천 배너 위치로 이동하도록 메뉴를 구성하고 있으므로 저도 추가했습니다. [본문으로]
  3. 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않습니다. [본문으로]
  4. 다시 강조하건대, 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않고, 그러므로 스킨만 참조해서는 넣을 방법이 없습니다. [본문으로]
글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

한컴오피스 베타버전 버그 7 - ᄒᆞᆫ글과 블로그 4 : ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니? 2

지난번에 이어 이번에도 글자가 손상되는 현상을 발견했습니다. 지난번에는 그저 글꼴 문제로 글자가 엉뚱하게 보이는 현상이었습니다. 하지만 이번에는 아예 글자를 뭉개 버렸습니다.

1. 벌레의 유형

이보세요, ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’이라는 이름만 제대로 나타내 주면 안 되겠습니까? 아니, 이제는 그저 그 엉뚱하게 보이던 그 글자라도 그냥 놔두었으면 합니다. 사용자가 직접 span 태그를 써서 모양을 나타낼 수 있도록 말입니다.

그림 1 글자가 나타나야 할 자리가 뭉개져 있습니다.

위 그림처럼 되면 정말 난감합니다. 그 자리에서 바로 수정할 수 없다면 나중에 그게 무슨 글자인지조차 알 수 없게 될 수도 있기 때문입니다.

2. 개발자의 답변

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

3. 벌레의 발견

3.1. 처음에는 몰랐습니다.

처음에는 캡션에까지는 신경 쓰지 못하였습니다. 나중에 블로그의 CSS를 고친 뒤에 보니까 옛한글이 캡션에 들어가면 그 부분이 뭉개진 형태(???)로 나타납니다.

3.2. HTML로 저장한 경우

HTML로 저장한 경우에는 이 벌레가 생기지 않습니다. 그러니 더욱 모를 수밖에요.
제 경우는 다른 이름으로 저장 >> HTML로 저장을 하여 살펴본 뒤에 블로그로 올리기 기능을 사용합니다. HTML로 바꾸었을 때 이 현상이 일어났더라면 좀 더 일찍 알아차렸을 테지요.

4. 벌레의 원인

이 벌레의 원인에 대해서는 현재로서는 알 수 없습니다.
다만 제 예상으로는 '유니코드 문자표에 없는 문자'인 ᄒᆞᆫ자가 포함되어 있기 때문에 생기는 현상으로 여겨집니다. 이때 물음표 하나(?)는 ᄒᆞᆫ자에 포함된 음소 하나를 가리킨다고 여겨집니다. 제 예측이 맞다면 ᄉᆞᆱ과 같은 글자는 물음표 4개(????)가 될 것입니다.

ᄒᆞᆫ글이 잘 보였으면 좋겠습니다. (올린 뒤 수정했음)

5. 비슷한 벌레

[벌레와 팁/버그] - 다음뷰, 옛한글도 한글이란다.

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니?

6. 관련 문서

6.1. 내부 문서

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그 카테고리는 어디에?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 게시판이 없거든요.

[벌레와 팁/버그] - HTML 태그 해석 오류 문제

[벌레와 팁/버그] - 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

[프로그램/스크린샷] - 한컴오피스2010 베타버전 실행화면

[벌레와 팁/버그] - 한컴오피스2010 베타 설치 작업과 버그 몇 개

[프로그램/설치] - 한컴오피스2010 베타버전 설치기

이 글은 ᄒᆞᆫ글 2010 베타버전에서 작성하였습니다.

글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

1. 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

한컴오피스2010 베타버전에 포함된 ᄒᆞᆫ글이 가진, 버그라고 하기에는 조금 그렇지만, 아무튼 미흡한 점을 지적하고자 합니다.

1.1. HTML은 구조적 문서이거든요.

ᄒᆞᆫ글 씨! 여보세요! HTML은 구조적 문서이거든요. 내가 만든 구조는 어디에다 팔아먹으셨나요?

그림 1 index.html 파일을 읽어온다.

그림 2 인터넷 익스플로러에서 불러온 모습

그림 3 ???글2010에서 불러온 모습

언뜻 보면 ᄒᆞᆫ글2010은 HTML을 잘 불러왔다고 여겨집니다. 하지만 인터넷 익스플로러에서 불러온 모습과는 많이 다릅니다. 그래서 혹시나 하는 마음에 스타일을 불렀습니다.

그림 4 깡그리 무시된 문단 관련 태그

HTML 문서를 읽어 올 때 문단 관련 태그를 모두 바탕글 스타일로 읽어오고 있습니다. 원래 HTML은 스타일이 없지 않느냐고요? 아니요. HTML은 스타일이 없더라도 존재합니다. 그 자체로 구조적 문서를 이루기 때문이죠. 그리고 문단 관련 태그가 각각의 기능을 가지고 있는 기능성 구조를 이루고 있습니다. 예컨대 P 태그는 당연히 문단 태그입니다. 그것만 있느냐? H1, H2, …, H6 태그도 문단 기능이 있어서 P 태그 없이도 문단을 구성할 수 있습니다. 그밖에 인용문을 가리키는 blockquote 태그, 입력 내용을 그대로 보여주는 PRE 태그 등도 P 태그 없이 문단을 구성할 수 있습니다. 제가 아는 태그만 주워섬겨도 이 정도네요.

그런데 지금 ᄒᆞᆫ글 씨께서는 모조리 뭉개버리고 바탕글이라는 스타일 하나만 남겼습니다. 구조적인 문서를 읽어다가 비구조적인 문서를 만들어 버린 셈이 되었네요.

1.2. CSS도 좀 챙겨!

ᄒᆞᆫ글 씨! 여보세요! CSS는 HTML의 스타일이거든. 그건 도대체 어디에다 팔아먹은 거냐고? 도대체 알 수가 없는 일입니다.

게다가 HTML 문서를 읽어 올 때나 저장할 때 CSS 파일을 전혀 인식하지 않습니다. 저장할 때야 HTML 문서 안에 스타일을 포함시키기 때문이라지만, 읽어올 때는 CSS 내용을 읽어 와야 옳다고 생각하는데요.

요(要)는 HTML은 구조와 내용이 분리된 언어입니다. 그것을 ᄒᆞᆫ에서 읽어왔는데, 그 구조를 모두 없애버리면(문단 태그와 DIV 태그를 모두 없애 버리면) 굳이 읽어 들여야 할 이유가 없지 않을까요? 그것을 다시 저장하면 “구조적 문서”가 “비구조적 문서”로 바뀌므로 오히려 손해가 되는 측면도 있습니다.

더구나 다른 이름으로 저장에서 HTML 문서로 저장하거나, 웹브라우저로 보내기를 하거나, 웹서버로 올리기를 하거나, 모두 HTML 문서의 형태가 중시되는데, 아예 CSS는 전혀 고려하지 않는 모습을 보이고 있습니다. 특히 ᄒᆞᆫ글2010에서 새로 추가된 블로그로 올리기 기능도 실제로는 HTML 형식으로 보내게 되어 있으니 더욱 문제는 심각하다고 할 수 있습니다.

1.3. 결론

ᄒᆞᆫ글 씨! 여보세요! HTML 문서 읽어오기나 HTML 저장하기 등의 기능은 빛 좋은 개살구거든. 그냥 읽어오기에 앞서 “이 기능은 그저 내용만 확인할 수 있습니다.”라고 안내문이나 넣지 그래.

그게 아니라면 좀 더 확실히 지원하라고. CSS도 읽어서 ᄒᆞᆫ글 스타일로 변환하고. HTML로 저장할 때도 CSS 이용할 수 있는 옵션을 좀 만들어 달라고.

이 글은 한컴오피스2010에 포함된 ᄒᆞᆫ글에서 작성한 문서입니다.
일부 깨져 보이는 글자는 일부러 수정하지 않고 두었습니다. 그에 대한 팁은 나중에 올리겠습니다.

글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

팁텍

티스토리는 인쇄 페이지 기능을 지원하지 않는다. 그러다가 인쇄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>왕미친놈의 왕미친세상 :: 'CSS' 태그의 글 목록</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 적용 전 인쇄 미리보기

    • 인쇄 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 클래스 및 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 클래스 모듬이라고 하겠다. [본문으로]
글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

카테고리

분류 전체보기 (1005)
스크립트 (22)
벌레와 팁 (126)
소프트웨어 (240)
하드웨어 (6)
이야기 (24)
말의 나무 (506)
미쳐보자 (22)
일기 (48)
아이폰 (10)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

글 보관함