링크 색상(색깔) 라인(밑줄) 속성 변경 설정 (티스토리블로그 등 설치형 오픈형)

링크 색상(색깔) 라인(밑줄) 속성 변경 설정 (티스토리블로그 등 설치형 오픈형)

 

다음이나 네이버 블로그처럼 가입형 블로그가 아닌 티스토리블로그나 이글루스, 워드프레스, 기타 개인홈페이지 등 어느 정도 기본적으로 HTML을 알고 직접 수정해야 하는 홈페이지(블로그)에서 이용할 수 있는 설정 방법입니다.

한번쯤 링크하는 곳(글씨, 텍스트 등)에 마우스를 올리면 색상이 바뀌는 것을 보고 궁금하게 생각하여 방법을 알고 싶은 분들이 계실 것입니다.  이 포스팅에서는 그렇게 링크를 걸어 둔 글자(글씨)에 색상(색깔)이나 밑줄(라인)을 설정하는 방법을 설명하려 합니다.

보통 <style.css>를 수정하기 때문에 티스토리를 기준으로 설명하겠습니다.

위의 이미지는 본인의 티스토리블로그 관지자메뉴의 <HTML/CSS 편집> - <style.css> 입니다.  혹시, 창의 높이가 작다면 화살표 부분을 클릭하며 높이를 크게 할 수 있습니다.

"a" 는 링크되는 글자의 색상 및 밑줄 등의 설정 내용을 나타내며, "a:hover"는 링크되는 곳의 글자(글씨, 텍스트)에 마우스를 올리면 어떻게 변경되는지 설정하는 것입니다.

저는 링크되는 글자의 색상이 일률적으로 보라색 계통으로 설정되어 있으며, 그 곳에 마우스를 올리면 글자(글씨)가 빨강색으로 바뀌며, 밑줄(라인)이 생깁니다.

 

해당 명령어 부분을 정리하자면 아래와 같습니다.

a:link {color: 색상코드; text-decoration:none;}

- 링크가 걸려 있는 텍스트(글자)의 색상, 밑줄 없음

a:visited {color: 색상코드; text-decoration:none;}

- 한번 이상 클릭하여 방문했던 링크 텍스트(글자) 색상, 밑줄 없음

a:hover {color: 색상코드; text-decoration:underline;}

- 마우스를 링크가 걸려 있는 글자에 올렸을 때 텍스트(글자)의 색상, 밑줄 있음

a:active {color: 색상코드; text-decoration:none;}

- 마우스로 링크가 걸려 있는 글자를 클릭할 때 텍스트(글자)의 색상, 밑줄 없음

저처럼, 첫번째 "a:link"를 "a"로 해도 되며, "text-decoration:none;" 을 그냥 삭제해도 밑줄(라인)이 생기지 않습니다.

변경해야 할 부분을 <style.css>에서 못 찾겠다면, Ctrl+F(찾기)로 "a {" 나 "a:link" 혹은 "a:hover"을 입력하면 쉽게 찾을 수 있을 것입니다.

 

이미지에 표시된 악바리블로그(akbaree.com)는 주소를 변경하기 전의 주소입니다.