'footnote'에 해당되는 글 3건

  1. 2010.02.05 ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제
  2. 2010.01.11 블로그 - (X)HTML 태그 표기 문제
  3. 2009.05.28 티스토리에서 주석이 제대로 인식되지 않는 현상 (1)

ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제

한컴오피스2010 베타버전 버그 31 - ᄒᆞᆫ에서 다른 이름으로 저장하기와 주석 표기 문제

ᄒᆞᆫ글2010 베타버전에서 다른 이름으로 저장하기를 통해 HTML 문서를 만들거나 블로그로 올리기를 통해 블로그에 올린 게시물에 나타나는 주석과 관련한 HTML 태그 표기 때문에 약간의 오류가 생기고 있음을 발견했습니다.

  • 참고 : 본문에서는 블로그로 올리기 문제만 다루었으나, 다른 이름으로 저장 - 인터넷 문서도 같은 벌레가 나타나고 있습니다.

벌레의 유형

ᄒᆞᆫ글 씨! 이 버그는 반드시 고쳐 주셔야겠습니다. 이 버그가 고쳐지지 않으면 ᄒᆞᆫ글에서 작성한 주석은 HTML로 고쳤을 때 대부분 자리 표시에 불과하게 됩니다.

개발자의 답변

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

벌레의 발견

이 벌레는 우연히 블로그 - (X)HTML 태그 표기 문제 문서를 다시 살피다가 발견했습니다. 그 문서에서 주석의 링크를 클릭했음에도 이동하지 않아서 문제가 있음을 알게 되었습니다.

티스토리 및 텍스트큐브의 주석

티스토리와 텍스트큐브는 태터툴즈를 사용하는 블로그이므로 주석의 동작도 거의 비슷합니다.

일단 제 블로그의 7-Zip 소개 글을 살펴보겠습니다.

블로그에 나타난 주석 (빨간 동그라미 안쪽)

블로그에 나타난 주석 (빨간 동그라미 안쪽)

위 그림에서 빨간 동그라미 안쪽에 주석이 있습니다. 이 주석을 클릭하면 주석을 나타내는 부분으로 이동합니다.

주석 부분으로 이동한 뒤의 화면

주석 부분으로 이동한 뒤의 화면

주석 부분으로 이동하면 위와 같은 화면이 됩니다. 이때 [본문으로](파란 네모 부분)를 클릭하면 이 주석을 호출한 곳으로 이동합니다.

[본문으로]를 클릭했을 때의 화면

[본문으로]를 클릭했을 때의 화면

앞서 [본문으로]를 클릭하면 위와 같이 이동을 해 줍니다.

ᄒᆞᆫ글 2010 베타에서 출력한 주석의 동작

테스트 블로그의 예제 문서를 이용하여 테스트하겠습니다. 참고로 이 예제 문서는 IE6와 파이어폭스에서 서로 다른 결과를 보여줍니다. 여기에서는 파이어폭스 3.5 버전을 이용하겠습니다. 첨언하자면, 여기에 사용한 HTML 코드가 올바르지 않기 때문에 동작하지 않아야 정상입니다. 다시 말해 동작하는 IE6의 경우가 틀린 경우이지 파이어폭스가 틀린 것은 아닙니다.

ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서

ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서

위의 ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서에서 주석을 클릭하면? 아래 그림처럼 됩니다.

이동은 않고 주소 표시줄만 바뀐 화면

이동은 않고 주소 표시줄만 바뀐 화면

위 그림처럼 이동은 하지 않았습니다. 그저 주소 표시줄만 바뀌었죠.

벌레 분석

코드 보기

앞서 발견한 두 경우의 HTML 코드를 분석해 보겠습니다.

티스토리 주석의 HTML 코드

티스토리 주석은 아래와 같습니다.

티스토리의 주석 표시 부분의 HTML 코드

티스토리의 주석 표시 부분의 HTML 코드


티스토리의 주석 내용 부분의 HTML 코드

티스토리의 주석 내용 부분의 HTML 코드

ᄒᆞᆫ글에서 블로그로 올린 문서의 HTML 코드

예제 문서의 HTML 코드는 다음과 같습니다.

블로그로 올린 문서의 주석 표시 부분의 HTML 코드

블로그로 올린 문서의 주석 표시 부분의 HTML 코드

앞서의 실험에서는 주석 내용 부분은 나타나지 않았지만, 여기에서는 주석 내용 부분도 HTML 코드를 나타내 보겠습니다.

블로그로 올린 문서의 주석 내용 부분의 HTML 코드

블로그로 올린 문서의 주석 내용 부분의 HTML 코드

코드 간략화 및 구조 분석

코드가 복잡하므로 간략하게 구조만 나타내 보겠습니다. 아울러 생략된 부분도 함께 나타내겠습니다.

먼저 티스토리 주석의 HTML 구조입니다.

[code html] <p>본문 내용 1<sup class="footnote"><a id="footnote_link_208_1" href="#footnote_208_1"><span style="display: none;">[각주:</span>1<span style="display: none;">]</span></a></sup>)</p> <p>본문 내용 2</p> <p>본문 내용 3</p> <div class="footnotes">     <ol class="footnotes">         <li id="footnote_208_1">주석 내용 1<a href="#footnote_link_208_1">[본문으로]</a></li>     </ol> </div> [/code]

다음은 블로그로 올린 문서의 HTML 구조입니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="#FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

위 두 코드에서 차이점은 (1) id와 name의 차이, (2) 링크를 이용한 왕복과 편도, (3) 링크 대상을 가리키는 이름의 차이(# 표시가 있느냐 없느냐)입니다. 일단 id와 name의 차이는 여러 문서를 함께 볼 경우에는 문제가 생기지만, 예제 문서는 오직 1개의 문서만을 화면에 표시하고 있으므로 이게 문제는 아닙니다. 그 다음으로 링크를 이용한 왕복이나 편도 이동이냐는 전혀 문젯거리가 아닙니다. 넘어가죠. 마지막으로 링크 대상을 가리킬 때 # 표시를 붙이느냐 마느냐는 상당히 차이가 큽니다.

일단 # 표시는 문서 내부의 이동 표시임을 나타내고 있습니다. 보통 # 표시 다음에는 id나 name로 표시하는 객체 이름(Object name)이 오게 됩니다. 그렇다면 # 자체가 객체 이름이냐? 그렇지는 않습니다. #은 문서와 문서 내부의 객체 이름과의 구분을 해 주는 표시일 뿐입니다. 다시 말해 #을 붙여서 id나 name을 표시하지는 않는다는 뜻입니다. 과거에는 #을 붙여서 표시하여도 호환성에 문제가 없었으나, 지금은 이 부분에 대해 엄격히 검사하고 있습니다. 현재 # 표시가 붙어 있어도 이동이 가능한 웹브라우저는 IE 계열뿐이며, 파이어폭스 등의 모질라/게코 계열이나 오페라 계열의 웹브라우저는 # 표시가 붙은 객체로의 이동을 지원하지 않습니다.

그러므로 위의 코드는 다음과 같이 고쳐야 합니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

맨 마지막 줄에서 # 표시를 떼었습니다.

참고로 테스트 블로그에 이 부분에 대해 시험할 예제 문서(예제 - 주석과 위치 이동)를 올려 두었습니다. 직접 보시고 시험해 보시기 바랍니다. 참고로 주석 1은 정상적으로 이동이 가능하고, 주석 2는 IE 계열에서면 이동이 가능합니다.

결론

링크를 표시하면서 앵커(A 태그)에 name 속성에 # 문자가 들어간 이름을 넣었기 때문에 발생한 문제입니다. 그 문자를 떼면 정상적으로 이동이 가능합니다. 추가로 본문으로의 이동을 지원하도록 바꾸고, 아울러 앵커(A 태그) 때문에 밑줄이 생기는 현상도 제거하려면 다음과 같이 고치면 됩니다.

[code html] <p class="HStyle0">본문 내용 1<a id="FOOTNOTE_HWP_ARTICLE_[문서번호]_1" href="#FOOTNOTE_HWP_1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <div class="HStyle11">     <hr align="left" width="300px">     <ol start="1">         <li id="FOOTNOTE_HWP_1">주석 내용 1<a href="#FOOTNOTE_HWP_ARTICLE_[문서번호]_1">[본문으로]</a></li>     </ol> </div> [/code]

위와 같이 바꾸면 좀 더 구조적이고 효율적인 코드가 됩니다. 참고로 [문서번호]에 해당하는 값으로 치환해야 합니다. 그밖에 <ol start="1">의 경우는 시작하는 주석 번호1이라는 뜻입니다. 주석 번호를 하나하나 지정할 필요가 없다는 뜻입니다. 아무튼 이것을 적용하는 문제는 ᄒᆞᆫ글 개발자가 해결할 일이겠지요.

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다.

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 0

블로그 - (X)HTML 태그 표기 문제

한컴오피스 베타버전 버그 18 - ᄒᆞᆫ글과 블로그 8 - 주석 2 - (X)HTML 태그 표기 문제

주석에 대한 사항을 점검하면서 한 가지 더 이상한 점을 발견하였습니다. 바로 (X)HTML 태그 표기 문제였습니다.

1. 벌레의 유형

ᄒᆞᆫ글 씨! (X)HTML 태그에서 a 태그 안에는 p 태그가 오지 않습니다.

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 태그 문제뿐만 아니라 다른 문제가 들어 있었습니다. 바로 a 태그와 p 태그의 중첩 문제였습니다. 얼핏 보면 아무 문제도 없습니다. 대부분의 웹브라우저도 a 태그 안에 p 태그가 중첩되어도 제대로 보여줍니다. 하지만 엄밀히 말해 위와 같은 구조는 아래처럼 바뀌어야 합니다.

<hr>
<p>

        <a name="name1">Text1</a>

</p>
<br>
<p>
        <a name="name2">Text2</a>
</p>

3.2. Markup 검사 서비스

테스트 블로그 문서에 대해 Markup 검사 서비스를 해 보았습니다. 바로 저 부분을 체크하는지를 알기 위해서입니다. (검사 결과 보기)

그림 3 에러 부분만 잘라낸 화면

<a>와 같은 인라인 요소 안에는 <p>와 같은 블록 단위 요소를 넣을 수 없음을 알려주고 있습니다.

4. 벌레의 원인

HTML 데이터를 만들 때 HTML 문법에 어긋나게 구성하였기 때문에 발생한 벌레입니다. 이는 ᄒᆞᆫ글 측에서 좀 더 주의를 기울였다면 사전에 막을 수 있는 벌레라는 점에서 아쉬움이 남습니다.

5. 비슷한 벌레

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

[벌레와 팁/버그] - 블로그 - 주석 사이의 간격

6. 관련 문서

6.1. 내부 문서

더보기

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

예제 3

예제 5


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

Trackback 0 Comment 0

티스토리에서 주석이 제대로 인식되지 않는 현상

나는 스프링노트에서 글을 작성하여 티스토리에 글을 올리고 있다. 그런데 가끔 엉뚱한 현상을 보이는 일이 생기곤 한다. 바로 주석[각주:1]의 화면 표시에 대한 문제이다.

벌레의 유형

자기 본모습을 헷갈려하는 벌레이다.

벌레의 발견

[벌레와 팁] - ISO/UDF 이미지 파일 보기 및 풀기 1 문서에서 이상한 현상을 발견하였다. 백 번 듣기보다 한 번 보는 것이 낫다.

주석(각주) 표지가 그대로 드러나는 화면

주석(각주) 표지가 그대로 드러나는 화면

위 그림에서 없어서Tistory-X-Footnote-0.png 라는 부분이 그것이다. 주석 표시인 Tistory-X-Footnote-0.png은 원래 편집 화면에서만 보이고, 웹에 게시한 뒤에는 주석의 실제 내용으로 치환되어야 한다. 또한 Tistory-X-Footnote-0.png 표시 대신에 주석을 나타내는 수가 나타나야 한다.

그러나 주석(각주)은 어디에도 보이지 않는다.

그러나 주석(각주)은 어디에도 보이지 않는다.

위와 같이 보이며 애써 작성한 각주는 나타나지 않는다. 정상 작동할 때는 아래와 같다.

정상 표시되는 주석(각주)

정상 표시되는 주석(각주)

위 그림에서 Tistory-X-Footnote-1.png 부분이 정상적으로 나타난 주석이며, 그 아래에 주석의 실제 내용이 나타나 있다.

벌레 분석

이것은 스프링노트에서 티스토리의 주석을 나타내 주지 못해서 아래 그림처럼 입력하는 일과 관련이 있어 보인다.

스프링노트에서 티스토리의 주석을 표시하는 방법

스프링노트에서 티스토리의 주석을 표시하는 방법

다시 말해 위 그림처럼 [footnote] 치환자를 직접 입력하고 있어서 당장은 문제가 없어도 나중에 문제가 생긴다고 볼 수 있다. 이것을 따로 떼면 아래와 같다.

빨강 네모로 표시한 부분이 주석을 입력한 부분이다.

빨강 네모로 표시한 부분이 주석을 입력한 부분이다.

그러나 티스토리에 게시/출판하였을 때 편집창에서 나타나는 HTML 코드는 스프링노드에서 [footnote]를 수동으로 입력했을 때나, 티스토리에서 주석(각주) 기능을 이용해서 달았을 때나 같다.

주석 표시에서 오류가 났을 때의 편집화면의 HTML 모드

주석 표시에서 오류가 났을 때의 편집화면의 HTML 모드

문제가 생긴 주석 표시 부분 (파란색 네모 부분)

문제가 생긴 주석 표시 부분 (파란색 네모 부분)

위 그림에 보면 footnote 부분에 조금 특별함이 있기는 하다. 그렇다고 이것이 주석을 잘못 나타내는 이유로 보기는 힘들다.

주석 표시를 정상적으로 했을 때의 편집화면의 HTML 모드

주석 표시를 정상적으로 했을 때의 편집화면의 HTML 모드

비교하기 위해 잘라낸 주석 표시 부분 (파란색 네모 부분)

비교하기 위해 잘라낸 주석 표시 부분 (파란색 네모 부분)

정상적으로 보일 때도 오류가 났을 때와 같은 방식으로 편집창에는 나타난다.

벌레 잡기

이 벌레를 잡기 위해서는 특별한 방법이 없다. 그저 주석이 정상적으로 표시될 때까지 해당 문서를 편집 창에 보였다가 저장하기를 반복하는 수밖에 없다.

제작자/제공자의 답변

2009년 5월 29일 아침에 오류를 보고한 상태이다.

관련 문서

내부 문서

외부 문서

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


  1. Footnote라는 영어를 "각주"로 번역하고 있다. [본문으로]
Trackback 0 Comment 1
prev 1 next