Seapy's Blog


WIRED마이크로소프트웨어의 글을 보면 기사 본문의 링크가 마치 책에 형광펜으로 밑줄 그은것처럼 되어 있는데 이게 이뻐서 블로그에도 적용해보았다.

WIRED, 마이크로 소프트웨어의 형광펜효과

위 이미지 처럼 링크 밑에 푸른색 밑줄이 들어가서 마치 형광펜으로 밑줄을 그은것 같다.

기존의 링크는 텍스트가 파란색으로 되어 있고 이미 클릭한 링크는 보라색으로 보이는게 기본이고 마우스를 오버하면 검정색 밑줄이 보이게 된다. 모바일 디바이스에서는 마우스 오버 개념이 없어져서 마우스 오버시 보여주는 밑줄은 의미가 없어졌고, 텍스트 색상을 변경하는것보다도 밑줄 효과와 색상효과를 동시에 주는 이런 방식이 마음에 들었다.

WIRED는 마우스 오버시에도 마우스 커서 모양만 변경되도록 했지만, 마이크로소프트웨어는 마우스 오버시 검정색 밑줄이 추가되는건 없애지 않았다. 아무래도 웹 유저가 많은 경우 기존 처럼 마우스 오버했는데 밑줄이 안가면 링크인지 모를수도 있을것 같아서 그렇게 한것 같다. 나는 모바일에서 어차피 마우스 오버는 없는기능이니 경험을 동일하게 하기위해 제거했다.

이런 방식은 WIRED, 마이크로소프트웨어, 블로그와 같은 컨텐츠 형식에는 어울리겠지만 일반 서비스에서까지 어울릴것같지는 않아서 블로그에서도 컨텐츠 영역에만 적용했다.

적용하는법은 다음과 같이 CSS 몇줄이면 된다.

.content a {
  border-bottom: 1px solid #cbeefa;
  box-shadow: inset 0 -4px 0 #cbeefa;
  color: inherit;
  text-decoration: none;
}