본문 링크의 색상을 바꿔봅시다!

블로그 글을 작성하다보면 필요에 따라 링크를 하게됩니다. 예전에는 기본적으로 링크는 파란색 그리고 링크를 한번이라도 본인이 클릭했다면 약간 자주색으로 변한것을 보았을겁니다. 대부분 파란색은 링크구나 하는 생각이 일반적이었죠!

오늘은 블로그에 글을 작성할때 이렇게 링크되어진 글에 밑줄과 더불어서 원하는 색상으로 표현하는 방법에 대해서 배울겁니다.

어렵지 않으니, 따라 해보세요!

여러분의 스킨에서 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;}

#1E5893;
이 부분은 링크가 걸려진 즉, 본문에서 보여지는 링크가 되어진 단어의 색상을 의미합니다. RED 나 YELLOW 등으로 한다면 링크되어진 색상은 적색이거나, 노랑색이겠죠~ 원하는 색상으로 변경하시면 됩니다.

border-bottom: 1px dotted;
이 부분은 링크가 걸려진 단어 아래에 밑줄을 긋는다는  부분입니다. 간다하게 결과물은 아래에 보시는데로입니다

재아넷

위처럼의 결과물을 얻을수 있습니다. 현재 제 블로그에 적용중입니다.^^

물론, 여러분이 링크에 색상만 주고 밑줄은 필요 없다 하시면  위에서 border-bottom: 1px dotted; 이 부분만 삭제 하면 됩니다.

응용을 한다면 반대로 마우스를 올렸을때 바뀔 색상을 지정한다면 마우스를 링크에 가져가면 원래는 없던, 밑줄이 생긴다거나 색상이 변한다거나 하는식으로 응용을 하셔도 되겠습니다. 원리를 알았으니 이제 응용하러 고고싱^^

그럼 오늘도 즐거운 블로그 생활 합시다!