레이블이 텍스트큐브인 게시물을 표시합니다. 모든 게시물 표시
레이블이 텍스트큐브인 게시물을 표시합니다. 모든 게시물 표시

2010년 4월 2일 금요일

텍스트큐브 주석 달기

텍스트큐브 알림판박쥐의 변신이라는 글이 나타났기에 단지 제목이 재미있어서 클릭했습니다.

왕미친놈이 본 추천 포스트

왕미친놈이 본 추천 포스트

그런데 주석(각주)을 달 수 없다는 푸념(?)이 있습니다.

얼마나 답답하셨을까?

얼마나 답답하셨을까?

태터툴즈 주석 달기

제 기억이 맞다면 태터툴즈의 형제들은 주석 다는 방법이 모두 같습니다. 바로 [footnote]내용[/footnote]과 같은 꼴로 나타내면 주석으로 바꾸어 줍니다.

텍스트큐브 편집 화면 1 - 주석이 달려 있습니다.

텍스트큐브 편집 화면 1 - 주석이 달려 있습니다.

참고로 예제로 보인 문서는 제 블로그의 GotD - Wondershare Photo Collage Studio 4.2.12 문서입니다.

텍스트큐브 편집 화면 2 - 위지위그 편집 모드

텍스트큐브 편집 화면 2 - 위지위그 편집 모드

역시 주석을 달린 부분만 잘라내어 빨간색으로 표시했습니다.

텍스트큐브 편집 화면 3 - HTML 편집 모드

텍스트큐브 편집 화면 3 - HTML 편집 모드

앞의 텍스트큐브 편집 화면 2 그림과 마찬가지로 주석이 달린 부분만 잘라내어 자주색으로 표시했습니다. 굳이 설명이 필요 없어 보입니다.

실제 적용

위와 같이 작업을 한 뒤에 저장을 하고 블로그 문서를 웹브라우저로 열면 됩니다.

웹브라우저에서 본 본문의 주석 위치

웹브라우저에서 본 본문의 주석 위치

위첨자로 처리된 숫자 2(2)에 주석이 링크되어 있다. 그 숫자를 클릭하면 주석 위치로 이동한다.

웹브라우저에서 본 문서 끝의 주석 내용

웹브라우저에서 본 문서 끝의 주석 내용

원래는 위의 그림과는 조금 다릅니다. 스크롤 바를 움직여서 위치를 약간 조절하였습니다.

좀 더 세련되게

BLUEnLIVE님이 블로그에 아주 좋은 방법을 제시해 놓으셨습니다. 각주(footnote) 풍선말 도우미라는 글입니다. 직접 가서 보시기 바랍니다. 참고로 보이는 모습은 아래와 같습니다.

풍선 도움말 예시

풍선 도움말 예시

관련 문서

내부 문서

외부 문서

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

2010년 3월 9일 화요일

블로그 이사했습니다.

블로그를 옮겼습니다. 새로운 주소는 http://salm.pe.kr/ 입니다. 서버는 TextCube.com 에서 제공해 주었습니다. 원래 있던 것인데, 이번에 두 블로그를 하나로 합쳤습니다. 방치 상태였음에도 무려 1만3천 명이나 방문해 주셨더군요. ^^a 아, 너무 감격스럽습니다.

티스토리 블로그는 없애지 않고 그대로 두기로 했습니다.

처음에는 없앨 생각이었습니다. 그런데 다시 생각해 보니 굳이 그럴 필요가 없겠더군요. 이번에 텍스트큐브닷컴으로 옮기고 보니 몇몇 그림 파일이 깨지거나 링크가 잘못되어 있었습니다. 결국 원본이 필요한 상황이 되었습니다.

또한 지금까지 적용한 스킨에 대한 정보가 그대로 남아 있는 상태입니다. 어제 데이터 수정만 하느라고, 정작 스킨은 손보지 못했습니다. 지금부터 예전에 적용했던 여러 가지를 다시 적용해 나가야겠습니다.

일단 글씨부터 키우고 나서 생각해 보렵니다. ㅡㅡ; 제 눈에는 안 보여요. 17인치 CRT 모니터라서 그런지 글씨가 너무 작아요. T,T

블로그 이전 안내문

티스토리 블로그에는 블로그 이전 안내문을 올릴 생각입니다. 현재는 60초 리프레시를 이용한 주소 이동을 시켜 두었습니다.

[code html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Refresh" Content="60; url=http://salm.pe.kr/"> ... 이하 생략 ... [/code]

여기에 약간의 문장을 더 넣었습니다. 원래 있던 IE6 No More 배너를 새 블로그에 넣고, 그 자리에 이전 배너로 교체하였습니다.

[code html] <!-- 블로그 이전 배너 시작 --> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>    <div style='width: 640px; margin: 0 auto; text-align: center; padding: 0; overflow: hidden; color: black;'>        <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>블로그를 옮겼습니다.!</div>        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'><a href='http://salm.pe.kr/' target='_blank'>이곳을 클릭하시면 새 블로그로 이동합니다.</a></div>    </div> </div> <!-- 블로그 이전 배너 끝 --> [/code]

고친 배너는 다음과 같은 모양을 가집니다.

블로그 이전 알림

블로그 이전 알림

IE6 No More 배너

IE6 No More 배너

저작권 변경

2010년 3월 9일 현재 블로그 저작권 규칙은 GFDL 1.3CC-BY-SA 3.0 Unported를 따르고 있습니다.
그러나 2010년 3월 10일 이후에 올라오는 글은 GFDL 1.2CC-BY-SA 2.0를 따르도록 변경합니다.
나중에 다시 공지문을 올리겠습니다.

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

2010년 1월 10일 일요일

블로그 - 주석 사이의 간격

한컴오피스 베타버전 버그 17 - ᄒᆞᆫ글과 블로그 7 - 주석 1 - 주석 사이의 간격

한컴오피스2010 베타테스트를 하면서 가장 아쉬운 점은 너무 자사 제품을 위주로 작업을 처리한다는 점이었다. 물론 한글과컴퓨터사라는 회사에서 만들었으므로 그것은 당연할 수도 있다. 하지만 블로그에 글을 올릴 때 스타일을 따로 만들어서 올리면서, 그것도 제대로 적용도 안 되게 올리는 일은 그러한 자사 중심주의가 빚은 최악의 버그(벌레) 가운데 하나라고 생각합니다.

이번에도 한 가지 벌레를 발견하게 되었습니다. 그런데 이게 좀 이상합니다. 아, 벌레는 원래 이상한 놈이었죠. 실수했습니다.

1. 벌레의 유형

ᄒᆞᆫ글 씨! 주석과 주석 사이에는 굳이 빈 줄이 필요하지 않습니다. 오히려 페이지 레이아웃(편집 배정)을 흩트리는 주범이 됩니다. 물론 이것이 벌레인지 아닌지 알 수 없습니다만, 저는 단호하게 벌레라고 말하겠습니다.

2. 개발자의 답변

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

3. 벌레의 발견

3.1. 블로그에서 보이는 주석 사이의 줄 간격(?) 문제

ᄒᆞᆫ글의 기능을 모두 사용해 보고 싶은 마음에 블로그에 올릴 글에도 각주(주석)를 넣게 되었습니다. 그러다가 혹시나 하는 마음에 테스트 블로그에 먼저 올려 보았습니다.

그림 1 각주를 블로그에 나타나게 만든 화면

위 각주를 보면 각주 사이가 지나치게 넓습니다. 아니, 저 공간에 짧은 각주 하나 정도는 들어갈 수 있어 보입니다.

소스코드를 살펴보기로 하죠.

그림 2 증거용 스크린샷

저 소스는 누구나 확인할 수 있습니다. 위 코드를 분석하면 다음과 같습니다.

<hr>
<a name="name1">
        <p>Text1</p>
</a>
<br>
<a name="name2">
        <p>Text2</p>
</a>

이때 한 가지 문제가 있다. 바로 br 태그이다. 도대체 왜 저게 들어 있는지 알 수 없었다. 바로 저것이 위 그림 1에서 보이는 주석 사이의 간격을 만드는 범인이었다. 어찌 보면 주석 사이가 너무 붙어 있으면 갑갑해 보이기 때문이라고 말할 수도 있으나, 이미 ᄒᆞᆫ글이 내보내는 스타일이 전혀 지정되지 않음을 확인한 상황에서는 그것도 말이 되지 않는다. 다시 말해 주석의 글꼴이 본문보다 작고, 줄 간격도 본문의 160%보다 좁은 130%이기 때문에 저렇게 했다는 답변은, 물론 그 말을 할 사람들―대부분 한글과컴퓨터사의 개발진이리라 생각한다.―에게는 옳은 말이겠지만, 현재 상황에서는 말이 안 되는 소리가 되어 버렸다.

3.2. HTML 문서에서 보이는 줄 간격 문제

지금까지 블로그로 올리기 기능을 사용하여 발견한 문제는 다른 이름으로 저장 > 인터넷 문서에서도 발견되었다는 점을 생각하면 HTML 문서도 확인할 필요가 있습니다.

그림 3 [다른 이름으로 저장]에서도 나타난 각주 사이의 이상 간격 벌레

위 그림에서 파란색 테두리로 나타낸 부분입니다. 주황색으로 된 부분이 바로 br 태그가 있는 곳이죠. 굳이 저렇게 해서 보기 싫게 바꾸어야 할까요?

지금까지 경험으로 웹서버로 보내기웹브라우저로 보내기 기능에서도 나타나리라 생각합니다.

그림 4 br 태그를 제거한 모습

위 그림에서 보면 줄 간격이 확연히 줄어 있습니다.

4. 벌레의 원인

주석과 주석 사이를 구분하려고 빈 줄을 넣는 시도는 좋았습니다. 그런데 그게 실제로 어떻게 보일는지는 생각해 보지 않았을까요? 그것을 오히려 보기 흉하게 여길 사람도 분명 존재한다는 사실을 그들은 알았을 것입니다. 또한 웹문서를 책처럼 인쇄하고 싶은 사람에게도 그러한 빈 줄은 그리 좋지 않은, 아니 흉한 모습을 보일 뿐입니다.

게다가 블로그로 올리기 기능은 다른 이름으로 저장 기능이나 웹브라우저로 보내기웹서버로 보내기 기능과는 차별화된 기능입니다. 블로그는 로그(log, 기록)입니다. 기록은 정보(information)일 수도 있지만, 기본적으로 자료(data)입니다. 그 자료를 잘 나타내기 위한 시스템이 여럿 존재하며, 그들 나름대로 장단점을 가지고 있습니다. 예컨대 텍스트큐브 블로그나 티스토리 블로그는 텍스트큐브라는 블로그 시스템을 기반으로 작동합니다. 그렇다면 주석 기능 등은 텍스트큐브에서 지원하는 주석 기능([footnote] [/footnote])을 이용하여 나타내는 것이 더 낫지 않을까요? 주석은 단순히 그림을 나타내는 것과는 다르니까요.

달리 말하자면, ᄒᆞᆫ글에서 블로그로 올리기 기능은 지나치게 ᄒᆞᆫ글을 중심으로 HTML 데이터를 만들어내고, 그것을 블로그에 적용하려고 했다는 점을 지적하고 싶습니다. 앞서 지적한 적용되지 않는 CSS 버그나 이번에 나타난 각주 사이의 너무 넓은 줄 간격 버그도 그와 같은 맥락에서 볼 수 있습니다.

기왕에 블로그로 올리기 기능을 만들었다면, 블로그를 만들어주는 시스템―텍스트큐브, 워드프레스 등―을 벤치마크할 필요가 있다는 말입니다.

5. 비슷한 벌레

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

6. 관련 문서

6.1. 내부 문서

[벌레와 팁/버그] - 한글과컴퓨터 사전에서 탈자 하나

[벌레와 팁/버그] - 한글과컴퓨터 사전에 나타난 이상한 모양의 글자

[벌레와 팁/버그] - 맞춤법과 글자 모양

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 3

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 기본은 지켜야죠!

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 맞춤법 도우미로 엉뚱한 곳을 표시하면 어떡해요?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요?

[벌레와 팁/제안] - 한컴오피스 베타버전의 공백과 이동 기능

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 글을 하나만 올리란 말입니다.

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

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

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

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

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

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

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

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

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

6.2. 외부 문서 - 테스트 블로그

예제 3

예제 5

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