티스토리 블로그 링크 색상 변경 방법
링크 색상은 스킨마다 다를 수도 있습니다. 보통은 파란색이 링크가 걸렸을 때의 색상이며, 한번 들어간 곳은 보라색으로 표시가 됩니다. 흔히 검색포털 사이트에서 이와 같은 방식을 따르는데, 티스토리 및 HTML 수정이 가능한 사이트는 이 부분에 대한 커스터마이징이 가능합니다.
보통 CSS 스타일 부분의 상단에 먼저 놓으면 순차적으로 읽기 때문에 적용이 될 것이라고 생각하고 진행했더니 역시 잘 적용이 되었습니다. 그래서 필자의 글 중 관련글 같은 링크가 걸린 글들을 보면 기본 색상이 주황색으로 바뀌어 있음을 알 수 있습니다. 어떻게 변경하는지 한번 알아보겠습니다.
HTML/CSS 편집 부분으로 들어가서 CSS 탭을 선택합니다.
위의 이미지에 나와있는 스타일 태그에 대한 자세한 설명은 다음과 같습니다.
a:link > 링크글 색상 설정
a:visited > 한번 클릭한 링크글 색상
a:hover > 마우스가 링크 글 위에 올라갔을 때 색상
a:active > 클릭했을 때 색상 (잘 보이지도 않음... 워낙 순식간에 넘어가기 때문에)
underline > 마우스가 링크글 위에 올라가면, 밑줄을 생성한다는 뜻
CSS의 적당한 공간에서 공간을 확보하고 위와 같은 코드를 넣도록 합니다. 예를 들어서 본문의 링크 기본 색상은 파란색으로 하고, 밑줄이 들어가게 하고 싶다면 다음과 같이 스타일 태그를 작성할 수 있을 겁니다.
.article a:link {
color: blue;
text-decoration: underline;
}
만약 적용이 안 된다면 이것은 해당 스킨의 CSS에서 다른 스타일 태그들이 적용되고 있다는 뜻 입니다. 이럴때는 해당 스타일 태그를 삭제하던지 주석처리를 하면 되지만, 이 방법으로도 사용이 가능합니다.
.article a:link {
color: blue !important;
text-decoration: underline !important;
}
이렇게 !important를 붙여서 강제적으로 적용시키는 방법이 있습니다. 단 이 방법은 본문의 모든 a 태그에 강제 적용이 되므로 부작용이 발생할수도 있습니다. 엉뚱한 곳에 이 스타일태그가 적용되어서 보기가 안 좋아진다거나 스킨이 틀어질 수 있습니다.
티스토리 링크 색상 변경.txt코드는 위의 첨부파일에 있습니다. 16진수 색상을 이용하는데, 코드를 어떤것을 선택할지 잘 모르겠다면 아래의 관련글을 참고하도록 합니다.
그러면 이렇게 원하는 색상으로 변경이 됩니다. 첨부파일도 파일로 링크가 걸려 있는 상황이기에 이렇게 파일명 색상이 바뀌게 됩니다. 그리고 아래 빨간상자 안쪽을 살펴보면 밑줄이 생기는데, 바로 언더라인(underline) 스타일 태그 때문입니다. 그리고 오버가 된 상태에서 스샷했기 때문에 다른 링크 색상보다 다르다는 것을 알 수 있습니다. 마우스 오버 시 색상을 다른 코드로 넣었기 때문이죠. 이렇게 임의의 태그를 통해서 원하는 링크 색상 혹은 다른 설정들이 가능합니다. 한번 직접 해보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
