링크 걸린 텍스트에 링크표시 다는 방법 (티스토리) :: external link

가끔 워드프레스나 텍스트큐브 가 제공하는 블로그에 갔을때 지금 제 블로그처럼 링크옆에 조그만 화살표나 작은 이미지가 달린 것을 볼 수 있었습니다. 아마도 '외부링크(external link)' 라는 플러그인(plugin)이 따로 제공되는 것 같습니만 티스토리 유저로서 그냥 부러울따름이었습니다.

왜냐하면, 링크를 걸어놓은 텍스트가 독자에게 뚜렷이 부각이 되지 않으면 글쓴이가 준비한 다양한 정보를 제대로 흡수하지 못할 수도 있고 링크가 걸린 텍스트를 본문내용과 '다른 색'이나 '밑줄'등으로 꾸몄다 해도 링크가 아닌 강조부분에서 사용된 '글자색', '밑줄'등과 혼동할 수도 있기 때문입니다.

덧) '무지개링크' 플러그인이 제공되긴 하지만 링크위에 마우스 커서를 올려놓아야 비로소 링크임을 알 수 있죠.

그러다 우연히 css를 수정하는 방법을 알게 되었고 시험삼아 블로그에 적용해봤습니다. 혹시 궁금해하는 분이 계시면 포스팅하려고 했었는데 때마침 PPoZZak님께서 질문을 해주셔서 글을 쓰게 되었습니다. (아싸!월척이다!ㅎㅎ)

단, 제가 하는 방법이 제대로 된 방법인지, 더 간단한 방법이 있는지는 잘 모르겠습니다. 더 나은 방법이 있다면 알려주세요. 제일 간단한 방법은 티스토리에서 공식 플러그인을 지원하는 것이겠죠. ^^


보통 티스토리 스킨의 style.CSS 파일을 보면 다음과 같이 링크걸린 텍스트를 꾸며주는 '앵커노드'(?)를 볼 수 있습니다.


link 는 링크걸린 텍스트, active는 마우스로 클릭(방문)하는 순간, visited는 방문(클릭)했던 링크, hover는 커서(cursor)를 링크위에 올렸을때의 액션을 지정해주죠.

처음엔 저도 이것을 변경해주면 될것이라 생각했는데 막상 적용한 결과는 실망이더군요. 블로그 페이지 전체의 모든 링크에 적용이 되어서 본문외에도 블로그제목, 사이드바의 카테고리, 태그, 최신글목록, 최신댓글목록, 등등 클릭하면 이동하는 모든 텍스트에 링크 이미지가 달려서 굉장히 지저분해집니다.

┌ 그럼 우짜란 말이여~

■ 포스트 본문내용내의 링크에만 링크표시를 다는 방법

Step1
☞ 역시 만에 하나를 위해서 HTML에 익숙하지 않으신 분들은 먼저 스킨을 백업해 주세요.

Step2
☞ 먼저, 티스토리 관리자 모드, 스킨 HTML/CSS 편집으로 이동합니다. skin.html 에서 " article_rep_desc " 를 검색(Ctrl+F)하여 해당 위치로 갑니다. 그리고 다음과 같이 앞뒤로 div를 지정해줍니다. (첨부된 txt 화일 참조, 복사후 붙여넣기 ctrl+c, ctrl+v 신공)

div.txt

Step3
☞ 그 다음, style.css의 가장 끝에다가 다음과 같이 입력해 줍니다. (첨부된 txt 화일 참조)

external.txt

Step4
☞ step3 에서의 background:url 뒷부분 ( ) 안의 주소는 넣고 싶은 이미지의 주소를 임의대로 넣으시면 됩니다. 단, 작은 이미지가 보기 이쁘겠죠. (화살표,네모,세모등 16x16 사이즈권장)

☞ padding-right: 와 padding-top: 뒤의 숫자를 조절해 가면서 텍스트와 이미지간의 배치를 적당히 조절하시면 됩니다.

☞ 4가지 (link, active, visited, hover) 모두 동일하게 하는 것이 깔끔하나 각자의 기호에 따라 조절해보세요.