mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Monday, April 10, 2006

자동으로 현재 페이지의 링크 태그 생성하여, 웹페이지에 붙이기


업데이트: 이런 방식을 구글에서 좋아하지 않는 것 같아서 템플릿에서 삭제했습니다. 아래 설명은 참고로만 보시기 바랍니다.

업데이트: 이 포스트의 내용 중에, 주소가 길 경우, DIV 박스가 길게 늘어나서, 웹페이지가 깨지는 버그가 있습니다. 아래 주소의 게시물에 이 버그를 고치는 방법이 있습니다. DIV박스를 TEXTAREA 박스로 바꾸는 것입니다.
[HTML/CSS] 긴 URL 의 행갈이(Wrap)를 위한 TEXTAREA 태그(tag)




현재 읽고 있는 포스트 페이지 하단에, 그 페이지로 링크할 수 있는 HTML코드를 자동으로 붙여, 링크를 용이하게 하는 팁이다.

코딩 자체는 어렵지 않았지만, 색상과 여백 문제로 고심을 했다. 색이 너무 튀어도 안되고 너무 존재감이 희박해도 곤란했다.


다음은 블로거닷컴의 템플릿을 수정하는 방법이다:


이것을 아이템 페이지 하단에 추가:
<ItemPage>
 <div style="font:bold 10pt 'Tahoma'; text-align:right; color:#66CC66; margin-top:60px; margin-bottom:4px;">Link Code</div>
 <div id="link_code" style="background-color:#DEF7DE; color:#009966; padding:6px 1px 6px 6px; margin-bottom:10px;">&lt;a href="<$BlogItemPermalinkUrl$>" title="<$BlogTitle$>"&gt;<$BlogItemTitle$>&lt;/a&gt;</div>
</ItemPage>


다만, 이 코드에 문제가 있다. 만약 포스트 제목에 < > & 이 3개의 기호 중 하나가 들어간다면 HTML규약에 맞지 않게 된다. < > & 들은 HTML 태그와 특수문자 표현에 사용되는 것이어서, 문자열의 일부로서 HTML에 직접 쓰면 곤란하다.

< > & 은 각각 이렇게 &lt; &gt; &amp; 로 변환해 주어야 하는데, 블로거닷컴에서는 그렇게 해주지 않고 그냥 출력해 버린다. 물론 그렇게 해도 링크가 잘 작동하지만, 만에 하나 문제가 생길 수 있다. 그래서 포스트 제목에 < 나 > 나 & 나 이 3개의 문자 중 하나가 들어간다면, 그것을 더블바이트 전각 문자로 바꾸어 주어야 한다.

< => <
> => >
& => &

생긴 것은 비슷해도 앞의 것은 키보드로 직접 입력할 수 있는 영문 반각 문자이고, 뒤의 것은 한글 전각문자다. 브라우저로 "찾기"를 해보면, 반각과 전각을 가리지 않고 찾지만, 메모장 등 텍스트에디터에 붙여 넣고 "찾기"를 해 보면 엄연히 다른 문자라는 것을 알 수 있다. ("윈도 시작 버튼/프로그램/보조 프로그램/시스템 도구/문자표"로, 문자표 프로그램을 실행시키면 전각문자들을 찾을 수 있다.)

전각으로 된 이 < > & 문자들은 HTML 코드 안에서도 하나의 문자열로서 직접 사용할 수 있다. 다만, 에디터에 따라서 전각문자를 자동으로 반각문자로 바꿔 버리는 경우가 있기 때문에, 지금 쓴 것이 전각인지 반각인지 재차 확인할 필요가 있다.

쉽게 말해서, 전각기호는 기호가 아니라 한글의 일부이다. 따라서 HTML규약에 위배되지 않는다.


이것은 메인 페이지 (Home) 하단에 추가:
<MainPage>
 <hr style="margin-top:70px;" />
 <div style="font:bold 10pt 'Tahoma'; text-align:right; color:#C5C5E6; margin-top:40px; margin-bottom:4px;">Link Code</div>
 <div id="link_code" style="font:12pt 'Comic Sans MS'; background-color:#E5EBF7; color:#5B7484; padding:10px 1px 10px 6px; margin-bottom:40px;">&lt;a href="<$BlogURL$>"&gt;<$BlogTitle$>&lt;/a&gt;</div>
 <hr style="margin-top:20px;" />
</MainPage>


아카이브 페이지에 링크를 거는 경우는 극히 드물기에, 넣지 않았다.





(이것은 blogger.com에 만든 블로그에만 해당하는 팁이지만, 다른 블로그에서도 템플릿 수정이 허용된다면 어느 정도 응용이 가능할 것이다)


추가 설명:

HTML에서, < 기호 자체를 화면에 표현하기 위해서는 반드시
&lt;
이렇게 써 주어야 한다.

> 과 & 도 마찬가지로, &gt; 과 &amp; 로 써야 한다.




tag: html
HTML | CSS | 자바스크립트 JavaScript

4 Comments:
At April 12, 2006 at 10:47 AM, Blogger mwultong said...

이렇게 하니까, 자신이 쓴 포스트를 다른 포스트에 링크할 때에도 편리하더군요..

(∩_∩)

 
At July 31, 2006 at 11:04 AM, Blogger mwultong said...

블로그 템플릿을 고치는 일이 참 힘들더군요..

(∩_∩)

 
At December 16, 2006 at 3:27 PM, Blogger mwultong said...

수동으로 주소를 복사하여, 포스트 본문에 직접 붙이는 것입니다.

페이지 맨 아래에 Link Code 라는 곳의 박스에 있는 주소입니다.

자동으로 붙이는 기능은, 없더군요.

(∩_∩)

 
At April 1, 2007 at 2:18 PM, Blogger mwultong said...

랄라라님의 코멘트:

* 나중에 써야겠군요. ㅎㅎㅎ


ddakji님의 코멘트:

포스트 제목 링크가 안되서 고민했는데, 여기 내용 보고 해결 했습니다.
휴우... 아직은 갈길이 먼거 갔습니다.


gurumaru님의 코멘트:
mwultong 님.
쓰신 포스트 밑에 관련 포스트 라고 나오는 부분은 직접 입력하시는 건가요?

아니면 백링크를 이용하신 건가요?

흠... 어떻게 만드신 건지 궁금하네요 ^^



(새 블로거 버전에서는, 한글 아이디 글자가 깨져서, 다시 올립니다.)

 

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top