티스토리에서는 PDF 플러그인을 별도로 지원해주지 않습니다.
PDF 파일을 첨부한 뒤에 다운받게 할 수는 있지만, 블로그 내부에 PDF를 쉽게 게시할 수 있는 방법은 없었습니다.
물론, 첨부 파일을 한번만 클릭하면 손쉽게 저장하거나
Acrobat Reader나
Foxit Reader 등으로 볼 수는 있지만, 브라우저 내에서 볼 수 있는 기능이 없다는 점이 아쉬운 것이 사실입니다.
게다가 이번에
스타워즈 해부학 사전을 연재하면서 브라우저 내에서 PDF를 보여주는 기능이 더욱 필요해졌습니다. (아무래도 명색이 연재인데, 다운받아 보는 것은 좀 어색합니다)
그래서, 약간의 삽질 끝에 알아낸 PDF를 티스토리 내부에 게시하는 방법을 소개합니다.
0. 사전 준비1. 블로그 본문 폭의 확인관리 메뉴의 스킨에서 style.css 파일을 보면 본문의 폭을 확인할 수 있습니다.
.article { width:710px; font-size:12px; font-family: Gulim; color: #666666; }.article을 찾으면 위와 같은 형식으로 본문의 스타일이 기록되어 있는데, 이 중 width의 값을 확인하면 됩니다.
여기서는 폭이
710 픽셀입니다.
첨부파일 기능을 이용해서 PDF 파일을 추가합니다. (
①번 버튼)
추가한 뒤에 미리보기를 하면 아래와 같이 첨부된 것을 확인할 수 있습니다.
HTML 편집 모드에서 첨부된 PDF 파일의 진짜 파일명을 확인합니다. (위 2번 그림의
②번 버튼)
여기서는 파일명이 gk150000000011.pdf 이라는 것을 볼 수 있습니다.
위의 1번에서 확인한 본문의 폭과 3번에서 확인한 진짜 파일명을 이용해서
<object> 태그를 적습니다.
이 때 진짜 파일명 앞에
/attachment/ 를 붙이면 브라우저에서 참조할 수 있는 진짜 주소가 됩니다.
<object type="application/pdf" data="/attachment/fk140000000004.pdf" width="710" height="800">
<param name="src" value="/attachment/fk140000000004.pdf">
</object>
이 코드 세 줄을 그대로 복사한 뒤에 pdf의 파일명만 그대로 바꿔주고 폭(
width)를 지정하면 됩니다.
(파일명은 두 번 적어야 한다는 점에 유의하세요)
높이(
height)는 적당한 값을 집어넣으면 되는데, 요즘 PC들의 해상도를 고려해보면 800이 적당할 것 같습니다.
4번 화면에서 맨 앞에 있는 첨부 코드를 삭제하고 나면 (즉,
<object> 태그만 남기면) 아래와 같은 화면을 볼 수 있습니다.
이제 기본적인 PDF가 삽입되었습니다.
하지만,
Acrobat Reader가 설치되지 않은 경우를 고려해서 별도로 다운받는 박스를 만들어두는 것도 필요할 것 같습니다.
[\#M_다운받아서 보려면 열기..|닫기..| [\##_1C|fk140000000004||_#\#]_M\#]
이런 식으로 말이죠…
덧1. width에는 원칙적으로
"100%"를 적는 것이 맞습입니다.
하지만, 티스토리에서는
"100%"를 적으면
"100"%로 알아서 바꿔주더군요. 뭐 하는 짓인지, 원…
덧2. 참고로, data와 src에 각각 같은 값을 저장하는 이유는
FireFox는
<param>을 제대로 인식하지 못하고,
IE는
<data>를 제대로 인식하지 못하기 때문입니다. (
CJ COMMUNICATIONS 참조)
덧3. 이 방법을 알아내는 과정에서
QAOS의
도아 님과
parankiho 님께서 정말 많은 도움을 주셨습니다.
두 분께 다시 한 번 감사드립니다.
