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

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

업데이트: 이 포스트의 내용 중에, 주소가 길 경우, DIV 박스가 길게 늘어나서, 웹페이지가 깨지는 버그가 있습니다. 다음의 포스트에 이 버그를 고치는 방법이 있습니다. DIV박스를 TEXTAREA 박스로 바꾸는 것입니다.

[HTML/CSS] 긴 URL 의 행갈이(Wrap)를 위한 TEXTAREA 태그(tag)

---

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

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


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


이것을 아이템 페이지 하단에 추가:


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

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

< => ＜
> => ＞
& => ＆

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

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

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


이것은 메인 페이지 (Home) 하단에 추가:


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

---

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


추가 설명:

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

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


☞ HTML | CSS | 자바스크립트 JavaScript