CSS 로 하이퍼링크 기본 스타일 초기화 하기

HTML 페이지의 기본 하이퍼링크 속성은 스타일이 좋지 않기로 유명합니다.

눈에 잘띄는 목적에는 잘 맞지만, 우리가 만드는 대부분의 웹 페이지에서는 전혀 어울리지 않습니다.

대부분 웹브라우저에서 표현하는 기본 하이퍼링크 스타일은 다음과 같습니다.

하이퍼링크의 기본 색상은 "진파랑", 방문한 링크의 색상은 "진보라" 입니다.

단, 이 값은 구글 크롬을 기준으로 한 것입니다.

웹 표준으로 정해진 것이 아니라 웹 브라우저에서 기본 값으로 제공되는 것이기 때문에 웹 브라우저에 따라서는 색상이 약간씩 다를 수 있으므로 불변하는 절대 색상이 아닙니다. 

:link { color: #0000EE; }
:visited { color: #551A8B; }

이 두 가상 클래스를 제외한 "hover", "active" 가상 클래스에 대한 기본 색상은 정의되어 있지 않습니다.

하이퍼링크를 초기화하는 공통적인 CSS 정의는 다음과 같습니다.

장식 속성을 모두 초기화("text-decoration: none;") 한 후 마우스 호버("a:hover") 속성만 추가해줍니다.

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}
a:hover{
    color: #a00;
}

하이퍼링크 마우스 호버 속성 부여시 주의할 점

하이퍼링크에 텍스트 스타일을 부여할 때 "bold" 속성을 사용하는 것은 피해야 합니다.

눈에 잘 띄게 만드는데는 좋은 속성이지만, "bold" 속성은 글꼴에 따라서는 하이퍼링크 텍스트가 차지하는 공간이 넓어지면서 전체 텍스트 레이아웃이 밀리는 현상이 발생합니다.

텍스트를 읽는 가독성을 현저히 떨어뜨리기 때문에 "bold" 속성은 마우스 호버 속성으로 사용하는 것은 피해야 하며, 강조를 위해 사용해야 하고 싶은 경우에는 모든 하이퍼링크 가상 클래스에 추가해서 차지하는 영역이 변하지 않도록 해야 합니다.