CSS 링크 스타일링 가이드 (HTML <a> 요소)

웹이 지금과 같이 대중적인 플랫폼이 되는데 서로 다른 웹페이지를 무한대로 연결해주는 HTML의 링크(link)가 중요한 역할을 했을텐데요. 이번 포스팅에서는 HTML의 <a> 요소로 마크업이 되는 링크(link)를 CSS로 스타일하는 방법에 대해서 알아보겠습니다.

브라우저 기본 링크 스타일링

우리가 굳이 링크를 스타일해주지 않더라도 대부분의 브라우저에서는 링크를 유관으로 구분하기 쉽도록 기본적으로 스타일을 제공하는데요. 보통 이렇게 브라우저 자체에서 지원하는 기본 스타일을 User Agent Stylesheet이라고 합니다.

크롬 브라우저의 예로 들면 링크에 아래와 같은 기본 스타일이 적용된 것을 확인할 수 있습니다.

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

이렇게 브라우저의 기본 스타일이 적용된 링크는 아래와 같이 상당히 투박하고 못 생겨 보이는데요. 아마도 많은 사용자가 이러한 웹페이지를 접하게 되면 바로 브라우저 창을 닫을 것 같죠? 😂

그래도 브라우저에서 기본적으로 적용해주는 링크 스타일을 자세히 관찰해보면 글자색이 다양하게 변하는데요.

링크를 클릭하기 전에는 파랑색이다가 링크를 클릭한 후에는 보라색으로 변합니다. 링크 위에 마우스 포인터를 두고 좌측 버튼을 계속 클릭하고 있으면 링크가 빨간색으로 표시되는 것도 볼 수 있으실 거에요.

또한 마우스 포인터를 링크 위에 가져가면 클릭이 가능하는 것을 나타내기 위해 커서가 👆 모양으로 바뀌며 링크가 걸린 텍스트에는 밑줄이 그어져있는 것도 확인할 수 있습니다.

사실 이러한 브라우저의 기본 스타일은 시각적인 아름다움 보다는 접근성 측면에서 바라볼 필요가 있을 것 같습니다.

기본 링크 스타일 제거하기

브라우저의 기본 스타일은 너무 강렬해서 링크에 별도로 스타일을 해주는 경우가 대부분일 것입니다. 무엇보다 링크 스타일이 웹사이트의 전반적인 디자인과 잘 조화를 이루는 것이 중요하겠죠?

브라우저의 기본 스타일이 적용된 링크가 도드라져보이는 이유는 뭐니뭐니 해도 글자색과 밑줄 때문 일텐데요. 이 때문에 링크를 스타일할 때 흔히 범할 수 있는 실수가 바로 브라우저의 기본 스타일을 완전히 없애 버리는 것입니다.

예를 들어, color 속성을 inherit로 설정하고 부모 요소의 글자색이 적용되도록 하고, text-decoration 속성을 none로 설정해주면 링크에 밑줄을 제거할 수 있는데요.

a {
  color: inherit;
  text-decoration: none;
}

이렇게 3의 CSS 속성을 살짝 조정해주면 링크랑 일반 텍스트랑 아예 구분이 되지 않게 됩니다. 즉, 링크 위로 마우스를 가져가서 커서가 👆 모양으로 바뀔 때까지 해당 텍스트가 링크인지 알 수가 없는 것이지요. (여기서 cursor 속성까지 auto로 설정해준다면 더 끔찍한 일이 벌어지겠죠? 😱)

이러한 극단적인 스타일 방법은 웹 접근성 측면에서 매우 바람직하지 못한데요. 적어도 사용자가 웹페이지 상에서 링크가 링크라는 것을 알 수 있을 정도로는 스타일을 해주는 것이 좋겠습니다.

링크 상태 별 스타일링

링크를 CSS로 스타일하는 것이 까다롭게 느껴지는 이유는 아무래도 HTML에서 <a> 요소가 여러 가지 상태를 가질 수 있기 때문일 것입니다.

링크에는 (더 세부적으로 들어갈 수도 있지만) 크게 link, visited, hover, active, focus 상태가 있다고 보시면 되는데요. 링크를 상태별로 스타일링하려면 아래와 같이 CSS의 의사 클래스(pseudo class)를 사용해야 합니다.

a {
  /* 기본 상태 */
}

a:link {
  /* href 속성이 명시된 상태 */
}

a:visited {
  /* 링크를 클릭해본 상태 */
}

a:focus {
  /* 링크 위에 키보드 포커스가 위치한 상태 */
}

a:hover {
  /* 링크 위에 마우스 포인터가 위치한 상태 */
}

a:active {
  /* 링크 위에 마우스 포인터를 두고 좌측 버튼을 계속 클릭하고 있는 상태 */
}

link 상태는 href 속성이 명시된 링크에만 다른 스타일을 적용하기 위해서 사용하는데요. (<a href="https://...">링크</a> vs. <a>링크</a>) 사실 상 href 속성없이 <a> 요소를 쓰는 것은 거의 무의미하기 때문에 크게 유용하지는 않은 상태입니다.

hover와 focus 상태는 링크 위에 마우스 포인터나 키보드 포커스가 위치했을 때 약간의 시각적인 효과를 주기 위해서 사용하는데요. 특히 클릭을 유도하는데 도움이 되겠죠?

visited 상태는 타인이 내가 클릭해본 링크를 쉽게 알 수 있다는 사생활 침해 우려가 있어서 많이 안 쓰는 추세인 것 같습니다.

이해를 돕기 위해서 한 번 모든 상태 별로 배경색을 다양하게 지정해보았습니다.

a {
  color: inherit;
}

a:link {
  background: yellow;
}

a:visited {
  background: pink;
}

a:focus {
  background: orange;
}

a:hover {
  background: skyblue;
}

a:active {
  background: red;
}

이렇게 여러 상태를 스타일을 해줄 때는 매우 조심해야 부분이 있는데요. 반드시 위에 내열된 순서대로 스타일을 해줘야한다는 점입니다. 예를 들어, a.hover가 a.visited보다 위에 나오면 a.hover에 명시된 CSS 속성값들은 모두 무시됩니다.

링크 스타일 기본 패턴 1

실제로 웹사이트에서 가장 흔하게 볼 수 있는 링크의 스타일 방식은 단순하게 글자색을 통해서 링크가 걸린 텍스트와 일반 텍스트를 구분해주는 것입니다. 이 경우, 링크 위에 마우스 포인터 또는 키보드 포커스가 위치한 상태에서는 살짝 글자색이 바뀌도록 스타일해주는 것이 좋습니다.

a {
  color: green;
}

a:hover,
a:focus {
  color: lightgreen;
}

이 방식은 최대 장점은 수많은 인터넷 사용자가 밑줄이 있으면 링크라고 무의식적으로 오랫동안 학습해왔기 때문에 무엇보다 직관적이라는 것입니다.

링크 스타일 기본 패턴 2

요즘에는 링크가 걸린 텍스트에 밑줄을 그어지는 것을 기피하는 경우를 어렵지 않게 볼 수 있는데요. 아무래도 링크에 밑줄을 긋는 것이 웹 초창기부터 사용되었던 스타일 방식이기 때문에 다소 올드해 보일 수 있다는 단점이 있기 때문입니다.

그래서 이렇게 모던한 디자인을 매우 중시하는 웹사이트에서는 밑줄을 없애고 글자색으로만 링크를 스타일하기도 하는데요. 이 경우, 적어도 링크 위에 마우스 포인터 또는 키보드 포커스가 위치한 상태에서는 밑줄을 표시해주는 것이 좋겠죠?

a {
  color: green;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

링크 스타일 응용 패턴

이 밖에도 다른 CSS 속성들을 활용하여 좀 더 다채롭게 스타일을 할 수 있을 것 같은데요.

예를 들어, 글자색과 밑줄색을 동시에 바뀌거나, 링크가 살짝 올라오도록 할 수도 있겠죠? 😄

a {
  color: green;
  text-decoration: underline lightgreen;
}

a:focus,
a:hover {
  display: inline-block;
  color: lightgreen;
  transform: translateY(-2px);
  transition: 1s;
}

개인적으로 링크 스타일에 지나치게 힘을 준 웹사이트보다는 링크가 적당히 담백하게 스타일된 웹사이트에서 전반적으로 더 좋은 사용자 경험을 얻을 수 있는 것 같아요. 링크가 너무 튀어서 사용자의 주의를 분산시키면 곤란하겠습니다. 😵‍💫

마치면서

지금까지 CSS로 링크를 스타일하는 방법에 대해서 살펴보았습니다. 사실 링크는 웹사이트의 본문 텍스트의 일부로 등장하기도 하지만 네비게이션 메뉴나 페이지네이션(pagination), 브레드크럼(breadcrumbs) 등 다양한 UI에서 사용될 수 있습니다. 이러한 경우 링크에 배경색과 같은 추가적인 스타일링을 하여 마치 버튼처럼 보이게 만들기도 하죠. 하지만 본 포스팅에서 다룬 기본적인 스타일링 가이드는 크게 변하지 않을 것입니다. 너무 시각적인 부분에 치중하기 보다는 사용자가 어떻게 하면 좀 더 쉽게 링크를 발견하고 클릭할 수 있을지 생각해보시면 도움이 될 것 같습니다.