친절한효자손 취미생활

링크 색상은 스킨마다 다를 수도 있습니다. 보통은 파란색이 링크가 걸렸을 때의 색상이며, 한번 들어간 곳은 보라색으로 표시가 됩니다. 흔히 검색포털 사이트에서 이와 같은 방식을 따르는데, 티스토리 및 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) 스타일 태그 때문입니다. 그리고 오버가 된 상태에서 스샷했기 때문에 다른 링크 색상보다 다르다는 것을 알 수 있습니다. 마우스 오버 시 색상을 다른 코드로 넣었기 때문이죠. 이렇게 임의의 태그를 통해서 원하는 링크 색상 혹은 다른 설정들이 가능합니다. 한번 직접 해보시기 바랍니다. 끝.





이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band
4

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 글제목에 링크색상~ 이 링크색생으로 오타나셨네용 ㅎㅎ
    잘보고갑니다
    볼거리가 많은 블로그군요.
    비슷한 컨텐츠라도 스킨덕분에 훨씬 가독성도 좋고 보기좋아서 저도 이 스킨 적용하려구요^^ 감사해요
    2017.01.29 21:10 신고
    • 으악. ㅎㅎ 감사합니다. 정신없이 쓰다보니 오타도 몰랐네요 ㅠㅠ 감사합니다.
      2017.01.29 22:02 신고
  2. 안녕하세요 친효님 항상 잘 보고 잘 쓰고 있습니다.

    그런데 현재스킨에는 링크가 걸린 곳을 파란 색깔과 밑줄 표시를 하고 싶은데 어떻게하면 좋을지 잘 모르겠습니다!
    2020.02.12 10:23 신고
    • 안녕하세요, 본문에 업데이트 해놨습니다. 참고하시기 바랍니다.
      2020.02.12 17:25 신고
loading