오늘은 블로그에 글을 작성할때 이렇게 링크되어진 글에 밑줄과 더불어서 원하는 색상으로 표현하는 방법에 대해서 배울겁니다.
어렵지 않으니, 따라 해보세요!
여러분의 스킨에서 STYLE.CSS에서 다음과 같은 검색을 해서 찾습니다
CTRL + F 하시고 아래 단어를 찾으시면 됩니다.
검색을 .article a:link 이걸로 검색하시면 쉽게 찾으실수 있을겁니다.
순서는 약간 틀릴수 있습니다.
/*링크되어진 단어의 색상*/
.article a:link { color:#1E5893; border-bottom: 1px dotted; text-decoration:none;}
/*한번이라도 방문한 링크의 색상*/
.article a:visited { color:#222; text-decoration:none;}
/*마우스를 갖다 대었을 때 바뀔 색상 */
.article a:hover { color:#666; text-decoration:underline;}
/*현재 활성화 되어진 링크의 색상*/
.article a:active { color:#222; text-decoration:none;}
일단 기본적으로 위의 소스는 글 본문에만 적용되는 부분이라 본문을 제외한 다른 사이드바나 하단부분에는 적용이 되지 않습니다..article a:link { color:#1E5893; border-bottom: 1px dotted; text-decoration:none;}
/*한번이라도 방문한 링크의 색상*/
.article a:visited { color:#222; text-decoration:none;}
/*마우스를 갖다 대었을 때 바뀔 색상 */
.article a:hover { color:#666; text-decoration:underline;}
/*현재 활성화 되어진 링크의 색상*/
.article a:active { color:#222; text-decoration:none;}
위에서
.article a:link { color:#1E5893; border-bottom: 1px dotted; text-decoration:none;}
#1E5893;
이 부분은 링크가 걸려진 즉, 본문에서 보여지는 링크가 되어진 단어의 색상을 의미합니다. RED 나 YELLOW 등으로 한다면 링크되어진 색상은 적색이거나, 노랑색이겠죠~ 원하는 색상으로 변경하시면 됩니다.
이 부분은 링크가 걸려진 즉, 본문에서 보여지는 링크가 되어진 단어의 색상을 의미합니다. RED 나 YELLOW 등으로 한다면 링크되어진 색상은 적색이거나, 노랑색이겠죠~ 원하는 색상으로 변경하시면 됩니다.
border-bottom: 1px dotted;
이 부분은 링크가 걸려진 단어 아래에 밑줄을 긋는다는 부분입니다. 간다하게 결과물은 아래에 보시는데로입니다
이 부분은 링크가 걸려진 단어 아래에 밑줄을 긋는다는 부분입니다. 간다하게 결과물은 아래에 보시는데로입니다
재아넷
위처럼의 결과물을 얻을수 있습니다. 현재 제 블로그에 적용중입니다.^^
물론, 여러분이 링크에 색상만 주고 밑줄은 필요 없다 하시면 위에서 border-bottom: 1px dotted; 이 부분만 삭제 하면 됩니다.
응용을 한다면 반대로 마우스를 올렸을때 바뀔 색상을 지정한다면 마우스를 링크에 가져가면 원래는 없던, 밑줄이 생긴다거나 색상이 변한다거나 하는식으로 응용을 하셔도 되겠습니다. 원리를 알았으니 이제 응용하러 고고싱^^
그럼 오늘도 즐거운 블로그 생활 합시다!








댓글을 달아 주세요 "재아넷 블로그에 대한 프로필을 소개합니다."
저도 오늘 링크를 바꿨습니다.
스킨 정보와 꼬이는 바람에 많은 삽질이 필요했지만요 ㅠㅜ
어렵지 않은데, 생각할때는 어렵더군요~
저도 css를 잘 모릅니다.ㅠㅠ;
링크색 바꾸고 싶었는뎅~~ 감사합니다 ^^ 헤헤
도움이 되셨다니 기쁘네요^^//
본문 링크 색 바꾸고 싶었는데..
좋은 팁 감사합니다~ ^^
링크 된 부분에 밑줄은 어떻게 긋는거에용?? ^^;;;;
특히 점선이 탐나는데 소스를 모르겠어요..ㅠㅠ
위에서 설명했듯이
border-bottom: 1px dotted;
이 부분이 밑줄을 그어주는 부분입니다.점선으로..
알려주셔서 감사해요!
dotted였군요~~ +_+
우왓~좋은 팁 알려주셔서 감사합니다~^-^
꼭 필요하지는 않습니다만,
근데 막상 필요하면 찾아 해맬 팁입니다..