포스트에서 링크부분 밑에 다양한 선을 넣는 방법

스킨에 따라 링크를 표시하는 방법은 다양합니다.
밑줄을 긋는 경우, 점선을 긋는 경우, 글씨색을 다르게 하는 경우, 바탕색을 다르게 하는 경우, 기타등등.

그 중에서

그림처럼 점선을 긋는 방법을 먼저 한번 알아보고, 그 외 다른 방식도 한번씩 짚어보겠습니다.

이미 점선처리되어 있는 스킨인 Plain스킨의 css 부분을 보시면 이런 게 있습니다.

#content div.post div.content a { border-bottom: 1px dotted #10adb7; }

저거 한줄 복사해서 자기 css 소스에 그냥 붙이면 됩니다. 쉽죠? ^^*

.
.
.
...라고만 하면 돌맞을테니까 -_-;; 좀더 설명을 해봅시다.

이글루스 스킨 고치기에 들어가면 html 소스를 넣는 부분과 css 소스를 넣는 부분이 있습니다.
html이 포스트는 어디다 넣고 url은 어디다 넣고 사이드바는 어디다 넣고 하는 식으로 스킨의 요소들을 어디에 배치하느냐를 정해주는 부분이라면
css는 각 요소들의 성격을 정해주는 부분입니다. 포스트 글씨색은 이렇게 해라 제목 글씨 크기는 이렇게 해라 하고 말이죠.

그 css 소스 중에서 포스트의 성격을 규정해주는 부분은 대개의 이글루스 스킨에서 이렇게 표기하고 있습니다.

#content div.post div.content { 블라블라 }

거기에 하이퍼 링크를 표시하는 "a"(<a href="http://어쩌구"> 할 때 쓰이는 그 "a"요)를 추가한
#content div.post div.content a { } 를 넣음으로서, 포스트의 링크 부분의 성격을 별도로 지정해주는 것입니다. 이렇게 별도 지정하지 않을 땐 소스 맨 꼭대기 body {} 부분에서 정해준 a 요소의 성격이 적용됩니다. (css 소스 맨 위에 있는 이런 부분)

body {
      margin: 0;
      text-align: center;
      background: url(http://......jpg);
      font-size: 12px;
      line-height: 1.6em;
      font-family: 굴림,Tahoma,APPLEGOTHIC;
      }
a:link { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color:#FF5A00; text-decoration: none !important; }
a:active { color: #FF5A00; text-decoration: none !important; }
)

자 그런데 이 a {} 에 넣을 수 있는 것이 점선만은 아니죠. 다른 것도 넣을 수 있습니다.

#content div.post div.content a { border-bottom: 1px dotted #C3000E; }

#content div.post div.content a { border-bottom: 3px dotted #C3000E; }

#content div.post div.content a { border : 1px solid #888888; }
(border-bottom/top/left/right를 따로 써주지 않고 border만 쓰면 상하좌우 모두에 선이 생깁니다)

#content div.post div.content a { background : #FFEDE2; }

#content div.post div.content a { background : url(http://그림주소); }

단, border로 선을 넣을 때에는 텍스트 영역 바깥에 선을 그으므로 글씨가 침범되지 않는데 반해
background로 그림을 넣을 땐 텍스트 영역 안쪽에 그림을 깔아주므로 글씨와 그림이 다소 겹칠 수 있습니다.
그 점 신경써서 그림을 넣을 땐 글씨가 가려지나 안 가려지나를 잘 테스트한 뒤 넣어주세요.


기본적인 내용은 이걸로 끝입니다.

그럼 응용편 나갑니다.

1) #content div.post div.content a { 어쩌구 } 을 복사해 붙였는데 적용이 안돼요!

→ 그 스킨의 post css가 저 이름(#content div.post div.content)이 아닐 수 있습니다. css 소스를 잘 살펴서 post에 해당하는 css 소스 이름이 뭔지 살펴보시고 거기에 a를 붙이세요.

2) ~~~ a { background : #FFEDE2; } 라고 했더니 태그에까지 적용되어버려요!

→ 포스트의 a속성 중에 text-decoration: underline과 border-bottom 외의 다른 속성은 본문뿐만이 아니라 밑에 달린 태그 목록에까지 미칩니다.
왜냐면 이글루스의 시스템 차원에서 posttaglist 의 a 속성을 이렇게 지정해놨기 때문이죠.

.posttaglist a:link { border-bottom : 0px !important; text-decoration: none !important;}
.posttaglist a:visited { border-bottom : 0px !important; text-decoration: none !important;}
.posttaglist a:active { border-bottom : 0px !important; text-decoration: none !important;}
.posttaglist a:hover { border-bottom : 0px !important; text-decoration: none !important;}

스킨 중에 "border-bottom : 1px dotted #******" 나 "text-decoration: underline"으로 링크 속성을 지정해준 스킨이 꽤 되기 때문에, 그것들이 태그에 영향을 미치지 못하도록 시스템 차원에서 border-bottom과 text-decoration: underline을 막은 겁니다.

그러니 그 둘 외의 다른 속성이 포스트 링크에 지정되어 있을 경우엔 그것은 태그목록에도 고스란히 영향을 미치게 되는 거죠.

요런 식으로 말이죠.

그럴 땐 별수 없습니다. posttaglist의 속성을 따로 지정해주는 수밖에요.

위와 같은 경우(#content div.post div.content a { background : #FFEDE2; })엔 css 소스에 이런 걸 추가해줍니다.

#content div.post div.content div.posttaglist a { background-color : transparent;}

태그리스트의 a속성을 따로 지정해주는 겁니다. "background-color : 투명"으로.

#content div.post div.content a { border : 1px solid #888888; }

이런 경우엔

#content div.post div.content div.posttaglist a { border : none;}

이렇게 한다던가 하는 식으로, posttaglist a {}에 content a {}와 반대되는 속성을 지정해주면 됩니다.


3) 내 스킨은 원래 링크에 밑줄이 그어져 있었어요. 그래서 저런 걸 했더니 밑줄은 그대로 살아있고 점선이 겹쳐져버려요. 밑줄을 없앨 방법이 없을까요?

→ 뭔 얘기냐.

원래 이런 스킨이었는데 점선을 그으니

이렇게 되어버린 겁니다.

그럴 땐 css소스를 쭉 훑어보세요.

[1] #content div.post div.content 밑에 이런 게 있나요?

#content div.post div.content a:link { color: #*****; text-decoration: underline; }
#content div.post div.content a:visited { color: #*****; text-decoration: underline; }
#content div.post div.content a:hover { color:#*****; text-decoration: underline; }
#content div.post div.content a:active { color: #******; text-decoration: underline; }

있으면 underline을 죄다 none으로 바꾸세요.

[2] 없나요? 깨끗한가요? 그럼 그 스킨은 content에 별도의 a속성을 지정하지 않고 body에서 지정한 a속성이 content에도 그대로 적용되고 있다는 얘깁니다.

그러니 그럴 땐 content 전용 a속성을 추가해주세요.

#content div.post div.content a:link { color: #******; text-decoration: none; }
#content div.post div.content a:visited { color: #******; text-decoration: none; }
#content div.post div.content a:hover { color:#******; text-decoration: none; }
#content div.post div.content a:active { color: #******; text-decoration: none; }

위 박스를 통째로 복사해 넣으세요. #****** 부분엔 원하는 컬러를 넣어주시구요.


.
.
.




이렇게 해서 [포스트 본문 링크에 점선 등등을 긋는 다양한 방법]에 대해 대강 훑어보았습니다.

posttaglist와 a:link/visited/hover/active에 대해서는 또 다른 스킨팁 포스트인 포스트 아래에 달린 태그 목록의 색과 여백을 바꾸는 방법을 읽어보시면 도움이 될 것입니다.

그럼, 원하시는 대로 포스트 링크를 꾸미시기 바랍니다 ^^