노무현 대통령 배너
BLOG main image
왕미친놈의 왕미친세상입니다. 미친 소리는 써도 되지만, 근거 없는 소리는 쓰면 안 됩니다.
2017 JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC << >>
September 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


한컴오피스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이라는 뜻입니다. 주석 번호를 하나하나 지정할 필요가 없다는 뜻입니다. 아무튼 이것을 적용하는 문제는 ᄒᆞᆫ글 개발자가 해결할 일이겠지요.

관련 벌레

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

관련 문서

내부 문서

외부 문서

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


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

카테고리

분류 전체보기 (996)
스크립트 (22)
벌레와 팁 (124)
소프트웨어 (232)
아이폰 (10)
하드웨어 (2)
게임 (1)
그림 (6)
이야기 (24)
말의 나무 (506)
미쳐보자 (21)
일기 (48)

달력

«   2017/09   »
          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

티스토리 툴바

왕미친놈의 왕미친세상 :: ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제
노무현 대통령 배너
BLOG main image
왕미친놈의 왕미친세상입니다. 미친 소리는 써도 되지만, 근거 없는 소리는 쓰면 안 됩니다.

''에 해당되는 글 건


''에 해당되는 댓글 건

  1. _ by

위치로그


태그


방명록

  1. btnModifyDelete.gif btnReply.gif
    • btnModifyDelete.gif

Date :

보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.


2017 JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC << >>
September 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

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

트랙백 보낼 주소 ::

  1. from

댓글을 달아주세요:: 왕미친놈 욕은 해도 되지만, 근거없는 소리는 쓰지 말아 주세요.
BBCode 사용할 수 있습니다.

    • 댓글 주소 수정/삭제


카테고리

분류 전체보기 (996)
스크립트 (22)
벌레와 팁 (124)
소프트웨어 (232)
아이폰 (10)
하드웨어 (2)
게임 (1)
그림 (6)
이야기 (24)
말의 나무 (506)
미쳐보자 (21)
일기 (48)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

태그목록

달력

«   2017/09   »
          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

글 보관함