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

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

 

환경: 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 값 변경에 대해 알아 보았습니다.