Styling links

김동현·2023년 1월 18일

CSS

목록 보기

15/24

Let's look at some links

Link states

가장 먼저 이해해야 할 것은 link states이다.
link states는 pseudo-classes를 사용하여 스타일을 지정할 수 있다.

Link : <a> 가 아닌 <a href="목적지"> 처럼 목적지가 있는 링크의 상태이다.
pseudo-classes는 :link 이다.
Visited : 이미 방문한 링크의 상태이다.
pseudo-classes는 :visited 이다.
Hover : 호버된 링크의 상태이다.
pseudo-classes는 :hover 이다.
Focus : 포커스된 링크의 상태이다.
pseudo-classes는 :focus 이다.

포커스란?
포커스는 키보드의 탭 키 또는 프로그래밍적으로 HTMLElement.focus() 로 인해 움직여지는 상태이다.
Active : 활성화된 링크의 상태이다.
pseudo-classes는 :active 이다.

활성화란?
마우스 왼쪽 및 오른쪽 버튼을 누른 상태를 말한다.

Default styles

링크에 underline이 있다..
방문하지 않은 링크는 파란색이다.
방문한 링크는 보라색이다.
호버시 마우스 포인터가 손가락 아이콘으로 변한다.
포커스시 outline이 링크를 둘러싼다.
활성화된 링크는 빨강색이다.

링크의 스타일을 변경하려면 최소한 아래의 것들을 지켜야 한다.

링크에 underline을 표시하지 않으려면 다른 방법으로 링크를 강조 표시하도록 한다.

어떤사람들은 text-decoration: underline 대신 border-bottom 프로퍼티를 사용해서 밑줄을 표시하는걸 선호한다.
underline을 사용하면 "g" 나 "y" 같은 밑으로 내려가는 문자일 경우 라인이 잘려 보이기 때문이다.
그런데 wavy(물결무늬) 같이 text-decoration에만 있는 값들이 있으니 적절히 사용하면 좋다.

hover 및 focus 상태를 표시할 땐 active 상태와는 다른 방식으로 반응하게 한다.

기본 스타일은 다음의 CSS 프로퍼티들을 이용하여 해체 및 변경 할 수 있다.

color
cursor : 특별한 이유가 없다면 해체해서는 안된다.
마우스 포인터의 다양한 모양을 지정할 수 있다.
outline : border와 비슷하나, border와 달리 outline은 공간을 차지하지 않는다.
따라서 문서의 레이아웃에 어떤 식으로든 영향을 미치지 않는다.
outline은 유용한 접근성 보조 도구이므로 focus를 표시하는 다른 방법이 있지 않은 이상, 제거해서는 안된다.
outline은 outline-color , outline-style , outline-width 이 합쳐진 shorthand 프로퍼티이다.
하지만 이 외에도 outline에 영향을 미치는 프로퍼티가 있다.
- outline-offset : border와의 거리를 설정한다.
- border-radius : border의 모서리 각 뿐만 아니라 outline의 모서리 각에도 영향을 미친다.

Styling some links

link의 상태 스타일링을 할 때 pseudo-classes를 이용한다고 하였다.
하지만 CSS는 캐스케이드 특성으로 인해 rule의 순서에 따라 동작이 달라진다.
링크의 pseudo-claase를 잘못된 순서로 지정하고 각 rule에서 동일한 속성을 변경하는 경우 작업이 예상되로 작동하지 않는다.
아래와 같은 순서로 작성해야만 한다.

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

굳이 외우고자 한다면 LoVe Fears HAte (사랑은 증오를 두려워한다.) 문장을 기억하자.

Including icons on links

링크에 아이콘을 넣는 가장 보편적인 이유는 해당 링크가 어디를 가리키고 있는지 보여주기 위한 지표를 나타내기 위함이다.

예를 들어, 외부 사이트로 나가는 링크를 표시할 때 박스 밖을 가리키는 작은 화살표 모양의 아이콘을 사용한다.
external link 아이콘

MDN에서 알려준 아이콘 모음집 사이트

a[href^="http"] {
  background: url("external-link-52.png") no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

일반 링크와 외부사이트 링크가 같이 있는 문단
외부 링크는 absolute URLs로만 나타낼 수 있다.
따라서 "http"로 시작하는 attribute selector를 이용해서 외부 사이트 링크에만 이미지가 삽입되도록 설정할 수 있다.
이미지는 전에 list를 스타일링 할 때와 같이 background 프로퍼티와 padding 을 이용해서 나타내면 된다.

Styling links as buttons

링크는 특정 상황에서 버튼처럼 보이고 동작하도록 스타일링된다.
예를 들어, navbar에서의 버튼은 사실 버튼이 아니라 웹 사이트를 탐색하는 링크로 구성되어 있다.

<nav class="container">
  <a href="#">Home</a>
  <a href="#">Pizza</a>
  <a href="#">Music</a>
  <a href="#">Wombats</a>
  <a href="#">Finland</a>
</nav>

body,
html {
  margin: 0;
  font-family: sans-serif;
}

.container {
  display: flex;
  gap: 0.625%;
}

a {
  flex: 1;
  text-decoration: none;
  outline: none;
  text-align: center;
  line-height: 3;
  color: black;
}

a:link,
a:visited,
a:focus {
  background: palegoldenrod;
  color: black;
}

a:hover {
  background: orange;
}

a:active {
  background: darkred;
  color: white;
}