Please Enable JavaScript!
Gon[ Enable JavaScript ]

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

블로그

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 

환경: Chrome

 

티스토리에는 블로그를 쉽게 꾸밀 수 있도록 스킨을 제공하고 있습니다. 티스토리 내부에서 제공하는 것도 있지만 사용자가 직접 제작한 것들도 있습니다. 이런 스킨들을 사용하다 보면 블로그 화면 디자인에서 변경하고 싶은 요소들이 나타납니다. 저 같은 경우 URL 링크 주소가 회색으로 나오더군요. URL 은 일반 텍스트와는 달리 강조 서식이 들어가는 것이 좋거든요. 오늘은 티스토리 블로그에서 URL 링크에 대한 CSS 값을 변경해 보도록 하겠습니다.

 

티스토리 블로그에서 제공하는 스킨을 적용한 결과 URL 링크가 회색으로 표현이 되었습니다. 이것을 눈에 잘 띄는 빨간색으로 변경해 보겠습니다.

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 

먼저 CSS 소스를 수정하기 전에 URL 주소 링크에 적용된 id, class 값을 알아야 합니다. 소스 보기로 HTML 을 뒤지는 무식한 짓은 하지 않아도 됩니다. 크롬의 개발자 도구만 있으면 쉽게 찾을 수 있습니다. 크롬을 실행하고 오른쪽 상단에 [더보기] > [도구 더보기] > [개발자 도구] 메뉴를 선택합니다

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 


브라우저 하단에 개발자 도구를 띄운 상태에서 URL 주소에 마우스를 가져갑니다. 그리고 오른쪽 마우스를 클릭해서 빠른 실행 메뉴창을 띄웁니다. 그럼 제일 하단에 [검사] 메뉴가 나타납니다

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 

검사 메뉴를 클릭하면 개발자 도구 화면에서 해당 HTML 소스를 바로 찾을 수 있습니다. 오른쪽 사이드바의 Styles 탭에서 적용된 CSS 클래스를 확인합니다. a 태그에 “.article” 이 적용됐네요. 이제 “.article” 을 티스토리 블로그에서 찾아 색상 값만 수정해 주면 됩니다

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 

티스토리 관리자 페이지로 이동한 후 CSS 편집창을 엽니다. 그리고 Ctrl + F 를 눌러 검색창으로 “.article” 을 찾습니다. 그림처럼 a 태그의 4가지 속성 값이 전부 회색임을 알 수 있습니다. 이것을 변경해 보도록 하겠습니다. 그런데 변경할 빨간색에 대한 16진수 색상 코드를 알아야 하잖아요

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 

HTML 색상 코드값을 쉽게 알 수 있는 사이트를 소개 하도록 하겠습니다. 아래 링크 주소를 클릭해서 홈페이지로 접속하면 HTML Color Picker 라는 서비스 화면이 나옵니다. 왼쪽 화면에서 적용하고 싶은 색상을 찍으면 오른쪽 하단에 16진수 RGB 값이 나타납니다.

http://html-color-codes.info/

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 

색상 추출 사이트에서 가져온 6자리 색상값을 입력하고 저장합니다. 저는 link, visited hover, active 색깔을 구분했습니다.

 

  • link : 방문 전 링크 상태

  • visited : 방문 후 링크 상태

  • hover : 마우스 오버했을 때 링크 상태

  • active : 릭했을 때 링크 상태

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법

 

그림은 a 태그의 4가지 속성 값을 변경한 결과 입니다. 회색이었던 것이 빨간색으로 바뀌었네요. 마우스를 오버하면 파란색으로 바뀝니다. 이상으로 티스토리 블로그 링크 주소에 대한 CSS 값 변경에 대해 알아 보았습니다

티스토리 블로그 본문 사이트 링크 색상 변경하는 방법


Posted by 녹두장군

댓글을 달아 주세요