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

Posted on 2008.09.24 09:58 | under 블로그 | permalink :: http://krang.tistory.com/253
가끔 워드프레스텍스트큐브 가 제공하는 블로그에 갔을때 지금 제 블로그처럼 링크옆에 조그만 화살표나 작은 이미지가 달린 것을 볼 수 있었습니다. 아마도 '외부링크(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 신공)



Step3


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



Step4


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

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

☞ 4가지 (link, active, visited, hover) 모두 동일하게 하는 것이 깔끔하나 각자의 기호에 따라 조절해보세요.
저작자 표시 비영리 변경 금지
신고

이전 댓글 더보기
BlogIcon 야이노마
2009.05.13 22:15 신고
정말 좋은 팁이네요.
본문 상단의 이미지를 써도 괜찮나요?

BlogIcon Krang
2009.05.14 03:18 신고
네 물론 상관없습니다~~
BlogIcon 스트링
2009.08.12 10:15 신고
감사합니다.^^
본문 상단의 이미지 넣어서 해봐야겠어요.

BlogIcon Hare
2010.05.09 14:35 신고
뒤늦게 검색으로 보고 해봤어요. 잘 되네요 ^-^ 나중에 실력이 된다면 링크 이미지를 하나 만들어서 해보고 싶어요 0_0 감사합니다!

BlogIcon water damage escondido
2012.01.15 17:17 신고
죽으려고 하더만요. 차가운 바닥에 얼굴을 그대로 대고.

BlogIcon insurance maryland commissioner
2012.02.02 18:23 신고
Outstanding write-up. I merely ran into your site plus tried to state that We have actually beloved reading through your web site discussions. Any approaches I'll be opt-in in your feed so i we do hope you posting once more before long

BlogIcon health insurance louisiana cheap
2012.02.02 18:29 신고
Good web-site with straight answers and i'm glad to read some of them with your weblog.

BlogIcon pac insurance maryland
2012.02.04 18:33 신고
I recently came across your current post and get been reading combined. I need to exhibit this affection of the composing expertise and also ability to make readers go through from the beginning towards the conclude.

BlogIcon insurance USA commissioner
2012.02.06 14:13 신고
Wonderful blog site having wonderful info. sometimes we all pay no attention to these kinds of things & likewise put up with considerably too.

BlogIcon water storage tanks
2012.10.31 15:34 신고
당신은 매우 전문 블로거입니다. 내 피드에 가입하여 큰 게시물의 여분의 탐구에에 남아있다. 또한 당신의 웹사이트 내 소셜 네트워크의를 공유합니다!

BlogIcon cost of owning a dog calculator
2012.11.05 16:54 신고
전문 블로거입니다. 내 피드에 가입하여 큰 게시물의 여분의 탐구에

BlogIcon powdered buttermilk brands
2012.11.26 21:22 신고
원래는 앞발로 꼭 붙잡고 먹으라고 수건도 깔아주었는데, 자꾸 침대위로 올라가서 먹으려고 하는 바람에.. 내 앞발을 빌려주었다. 흠.. 근데 다른 강아지들은 등뼈 주면 살살 갈아 먹는다는데 코니는 이빨이 절단기 수준이네? 뭐 이건 씹는대로 장작 패듯이 뼈가 으스러지니..

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

BlogIcon invisible fence installation tools
2012.12.16 20:23 신고
사이드바의 카테고리, 태그, 최신글목록, 최신댓글목록, 등등 클릭하면 이동하는 모든 텍스트에 링크 이미지가 달려서 굉장히 지저분해집니다.

BlogIcon emergency supply
2012.12.19 20:51 신고
테마’ 항목을 통해 확인할 수 있습니다. 더 많은 테마선택권을 부여하겠다는 예고대로 이용자 맞춤형 테마제작이 가능해지겠네요.

BlogIcon flexpetz
2012.12.22 16:42 신고
자꾸 침대위로 올라가서 먹으려고 하는 바람에.. 내 앞발을 빌려주었다. 흠.. 근데 다른 강아지들은 등뼈 주면 살살 갈아

BlogIcon canine fence coupon
2012.12.26 22:44 신고
등으로 꾸몄다 해도 링크가 아닌 강조부분에서 사용된 '글자색', '밑줄'등과 혼동할 수도 있기 때문입니다.

BlogIcon food for survival list
2013.01.01 19:54 신고
최신글목록, 최신댓글목록, 등등 클릭하면 이동하는 모든 텍스트에 링크 이미지가 달려서 굉장히 지저분해집니다.

BlogIcon led glow sticks for glowstringing
2013.01.09 19:32 신고
속속 등장하는 대선 관련 웹서비스들이 코앞에 다가온 미국 대통령 선거 열기를 실감케 하네요. 우리나라에서 이런 서비스가 있었다면 잡아갔을라나. -_-;;


2013.09.12 18:39
비밀댓글입니다

BlogIcon ze.law
2017.08.09 14:31 신고
right no-repeat의 의미를 알수 있을까요? 저는 텍스트 아래에 이미지를 넣고 싶은데요.

체크시 주인만 볼 수 있습니다.

* 티스토리 단축키를 활용하세요. [A:다음글 S:이전글 Q:로그인]
« previous : [1] : [···] : [325] : [326] : [327] : [328] : [329] : [330] : [331] : [332] : [333] : [···] : [483] : next »