Styling links

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

21/190

안녕하세요! 프론트엔드 개발의 디테일을 살려주는 링크 스타일링(Styling links) 레슨에 오신 것을 환영합니다.

웹의 핵심은 문서를 서로 연결하는 '하이퍼링크'죠. 그런데 이 링크들을 아무렇게나 디자인하면 사용자들이 이게 클릭되는 글자인지 아닌지 헷갈리게 됩니다. 오늘은 웹의 기본 규칙을 해치지 않으면서도, 마우스가 올라가거나 클릭될 때(상태 변화) 예쁘게 반응하는 링크를 만드는 방법을 배워볼 거예요.

그리고 단순히 글자 링크를 넘어서, 링크를 네비게이션 메뉴나 진짜 버튼처럼 멋지게 꾸미는 실무적인 방법까지 제가 아낌없이 알려드릴게요! 자, 시작해 볼까요?

링크 스타일링 (Styling links)

이전 페이지 (Styling lists) | 개요: CSS 텍스트 스타일링 | 다음 페이지 (Web fonts)

링크(links)를 스타일링할 때 가장 중요한 것은 다음 세 가지를 이해하는 것입니다:
첫째, 기본 링크 스타일이 왜 중요한지.
둘째, 가상 클래스(pseudo-classes)를 사용해서 링크의 다양한 상태(상태 변화)를 어떻게 효과적으로 스타일링하는지.
셋째, 네비게이션 메뉴나 탭 같은 다양하고 일반적인 인터페이스 기능에 맞게 링크를 어떻게 응용해서 꾸밀 수 있는지.
이 글에서는 이 모든 주제를 다뤄보겠습니다.

사전 준비 지식: HTML로 콘텐츠 구조화하기 및 CSS 스타일링 기초.


사전 준비 지식:	HTML로 콘텐츠 구조화하기 및 CSS 스타일링 기초.
학습 목표:	기본 링크 스타일이 웹 사용성(usability)에 중요한 이유를 이해하기 — 사람들에게 친숙하며, 무엇이 링크인지 쉽게 알아볼 수 있게 해 줍니다. 링크의 상태 스타일링하기: `:hover`, `:focus`, `:visited`, `:active`. 접근성(accessibility)과 사용성을 위해 링크 상태 스타일링이 왜 필수적인지 이해하기. 링크 옆에 아이콘 추가하기. 리스트와 링크를 사용하여 네비게이션 메뉴 만들기.

학습 목표:

기본 링크 스타일이 웹 사용성(usability)에 중요한 이유를 이해하기 — 사람들에게 친숙하며, 무엇이 링크인지 쉽게 알아볼 수 있게 해 줍니다.
링크의 상태 스타일링하기: :hover, :focus, :visited, :active.
접근성(accessibility)과 사용성을 위해 링크 상태 스타일링이 왜 필수적인지 이해하기.
링크 옆에 아이콘 추가하기.
리스트와 링크를 사용하여 네비게이션 메뉴 만들기.

링크의 상태 (Link states)

가장 먼저 이해해야 할 것은 링크의 상태(link states)라는 개념입니다. 링크는 사용자의 행동에 따라 여러 가지 다른 상태로 존재할 수 있습니다. 이 각각의 상태는 서로 다른 가상 클래스(pseudo-classes)를 사용하여 독립적으로 스타일링할 수 있습니다:

Link (기본 링크): 목적지가 있는 링크 (단순한 이름 앵커가 아닌 진짜 링크). :link 가상 클래스로 스타일링합니다.
Visited (방문한 링크): 사용자가 이미 클릭해서 브라우저 방문 기록(history)에 남아 있는 링크. :visited 가상 클래스로 스타일링합니다.
Hover (마우스 오버): 사용자가 마우스 포인터를 링크 위에 올려놓고 있는 상태. :hover 가상 클래스로 스타일링합니다.
Focus (포커스): 링크가 선택(포커스)된 상태. (예: 키보드 사용자가 Tab 키를 눌러 링크로 이동했거나, 자바스크립트의 HTMLElement.focus() 함수로 강제 포커스 된 경우) :focus 가상 클래스로 스타일링합니다.
Active (활성화): 링크가 활성화된 순간 (예: 마우스로 클릭하고 떼기 전 그 찰나의 순간). :active 가상 클래스로 스타일링합니다.

기본 스타일 (Default styles)

아래 예제는 아무 CSS를 입히지 않았을 때 링크가 기본적으로 어떻게 보이고 작동하는지 보여줍니다. (눈에 잘 띄게 글자 크기를 키우고 가운데 정렬을 하는 CSS만 조금 넣었습니다.)

이 페이지에 있는 다른 링크들과 어떻게 다른지 비교해 보세요. 기본 링크는 다음과 같은 속성을 가집니다:

링크에는 밑줄(underline)이 그어져 있습니다.
한 번도 방문하지 않은 링크는 파란색입니다.
방문한 적이 있는 링크는 보라색입니다.
링크 위에 마우스를 올리면(Hover) 마우스 포인터가 작은 손가락 모양 아이콘으로 바뀝니다.
포커스된 링크 주변에는 윤곽선(outline)이 생깁니다. — 키보드에서 Tab 키를 눌러서 이 페이지의 링크들을 차례대로 이동해 보세요.
활성화된 링크(Active)는 빨간색입니다. 마우스 왼쪽 버튼을 꾹~ 누른 채로 놓지 말아 보세요!

<p><a href="#">A simple link</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

📝 참고사항 (Note):
이 페이지의 모든 링크 예제는 href="#" (빈 프래그먼트)로 되어 있어서 클릭해도 다른 곳으로 이동하지 않고 현재 화면을 유지합니다. 이는 예제가 들어있는 <iframe>이 깨지지 않게 하기 위함입니다.

흥미롭게도, 이 기본 스타일은 1990년대 중반, 웹 브라우저가 처음 나왔던 초창기 시절과 거의 똑같습니다! 왜 아직도 안 바뀐 걸까요? 사용자들이 이 동작을 너무나 잘 알고, 그렇게 작동할 것이라 기대하기 때문입니다. 만약 기본 링크 스타일을 너무 기괴하게 확 바꿔버린다면 사람들은 그게 클릭할 수 있는 버튼인지 일반 글자인지 헷갈려할 것입니다.

이 말이 "링크를 스타일링하지 말라"는 뜻은 아닙니다. 다만, 사용자의 예상되는 동작에서 너무 멀리 벗어나면 안 된다는 뜻이죠. 최소한 다음 규칙은 지키는 것이 좋습니다:

링크에만 밑줄을 사용하고, 다른 일반 텍스트에는 절대 밑줄을 사용하지 마세요. 만약 디자인상의 이유로 링크의 밑줄을 꼭 없애야 한다면, 최소한 색상을 다르게 하거나 굵게 만들어서 그것이 링크임을 분명히 눈에 띄게(highlight) 만들어야 합니다.
링크 위에 마우스를 올렸을 때(hover)나 키보드로 포커스(focus) 했을 때 어떻게든 반응하게 만들고, 클릭하는 순간(active)에도 또 다른 시각적 피드백을 주어야 합니다.

기본 스타일을 끄거나 변경할 때는 다음 CSS 속성들을 주로 다룹니다:

color: 텍스트의 색상을 바꿉니다.
cursor: 마우스 포인터의 모양을 바꿉니다. (아주 특별한 이유가 없다면 링크의 기본 손가락 모양은 끄지 마세요!)
outline: 텍스트의 윤곽선을 바꿉니다. 윤곽선(outline)은 테두리(border)와 비슷하지만 결정적인 차이가 있습니다. 테두리는 박스 모델의 크기를 차지해서 주변 요소를 밀어내지만, 윤곽선은 크기를 전혀 차지하지 않고 그냥 배경 위에 둥둥 떠서 그려집니다. > 💡 강사의 실무 팁! (웹 접근성)

실무에서 디자이너분들이 :focus 때 나타나는 파란색이나 검은색 윤곽선(outline)이 못생겼다고 outline: none;으로 싹 지워달라고 요청하는 경우가 굉장히 많습니다. 절대 그냥 지우시면 안 됩니다! 마우스를 못 쓰고 키보드만 사용해야 하는 사용자들은 outline이 없으면 자신이 지금 화면 어디를 누르고 있는지 전혀 알 수 없기 때문입니다. 만약 기본 outline을 없애야 한다면, :focus 상태일 때 box-shadow나 짙은 background-color 등 다른 방식으로라도 무조건 포커스 상태를 시각적으로 명확히 표시해 주어야 합니다. 웹 접근성(a11y)의 핵심입니다!

링크 스타일링 (Styling links)

기본 상태에 대해 꼼꼼히 살펴봤으니, 이제 전형적이고 세련된 링크 스타일 세트를 만들어 봅시다.

시작하기 전에, 텅 빈 규칙(rulesets)부터 쭉 적어놓을게요:

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

이 코드를 작성하는 순서(Order)가 매우, 매우 중요합니다! 왜냐하면 링크 스타일은 밑으로 갈수록 이전 스타일을 덮어쓰며 겹겹이 쌓이기 때문입니다.

예를 들어, 링크를 클릭하는 순간(active)에는 사용자의 마우스가 당연히 링크 위에 올라가 있는 상태(hover)겠죠? 만약 :hover를 :active 밑에 적어버리면, :hover 스타일이 :active 스타일을 이겨버려서 클릭할 때의 색상 변화가 전혀 나타나지 않는 불상사가 일어납니다!

이 순서를 쉽게 기억하기 위해 LoVe Fears HAte (사랑은 증오를 두려워한다) 같은 외우기 비법을 쓰곤 합니다. (:link, :visited, :focus, :hover, :active의 첫 글자입니다!)

자, 이제 이 뼈대에 살을 붙여서 제대로 스타일링해 보겠습니다:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline-color: transparent;
}

a:link {
  color: #6900ff;
}

a:visited {
  color: #a5c300;
}

a:focus {
  text-decoration: none;
  background: #bae498;
}

a:hover {
  text-decoration: none;
  background: #cdfeaa;
}

a:active {
  background: #6900ff;
  color: #cdfeaa;
}

테스트해 볼 HTML 샘플 코드도 제공해 드릴게요.

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefox</a>,
  <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>.
</p>

이 두 개를 합치면 이런 멋진 결과가 나옵니다. 마우스를 올려보고 클릭도 해보세요!

(화면 렌더링 결과: 클릭 시 배경색이 역전되고 호버 시 밝은 연두색 배경이 깔리는 텍스트 링크)

무슨 일이 일어났는지 분석해 볼까요? 기본 스타일과는 좀 다르지만, 사용자들은 여전히 이것이 링크라는 것을 단번에 알아챌 수 있습니다.

처음 두 규칙(body, p)은 텍스트 정렬을 위한 기본 설정이니 넘어갑시다.
세 번째 규칙 a 선택자에서는 outline-color: transparent;를 줘서 못생긴 기본 포커스 윤곽선을 숨겼습니다. (대신 아래에서 배경색으로 포커스를 표시할 겁니다!)
그다음에 a:link와 a:visited를 사용해 방문 전 링크(파란빛 보라)와 방문 후 링크(탁한 녹색)의 색상을 다르게 주어 구별되게 했습니다.
다음 두 규칙 a:focus와 a:hover에서는 사용자가 링크에 마우스를 올리거나 키보드로 선택했을 때, 밑줄을 없애고(text-decoration: none;) 밝은 연두색 배경(background)을 깔리게 만들었습니다. 피드백이 아주 확실하죠!
마지막으로 a:active를 사용하여, 링크를 클릭하는 찰나의 순간에 배경색과 글자색이 반전되게 만들었습니다. "클릭이 빡! 들어갔다"는 걸 완벽하게 알 수 있죠.

나만의 링크 스타일링 해보기 (Style your own links)

이번 과제에서는 저희가 만들어둔 빈 뼈대 규칙을 이용해, 여러분만의 창의력을 발휘해서 아주 멋진 링크를 직접 만들어 보시기 바랍니다. 상상력을 마음껏 펼쳐보세요. 위에서 저희가 만든 예제보다 훨씬 더 멋지고 기능적인 링크를 만드실 수 있을 겁니다!

아래의 코드 블록에서 "Play" 버튼을 눌러 MDN Playground 편집기를 엽니다.
a { } 규칙에 모든 링크에 기본적으로 항상 적용될 스타일을 줍니다. 꼭 글자색만 바꿔야 하는 건 아닙니다. (예: padding을 살짝 주거나 폰트를 굵게 해 보세요!) 단, 여전히 링크처럼 보이긴 해야 합니다.
방문한(visited) 링크에는 기본 색상과 살짝 다르게, 톤을 죽인 색상을 부여해 보세요.
focus와 hover 상태에는 다른 링크들보다 확 튀는 스타일을 줘 보세요. 그리고 마우스를 올렸을 때 기본 밑줄이 사라지도록 만들어 보세요.
active 상태에는 또 다른 피드백 스타일(예: 글자가 살짝 아래로 내려가게 하거나 색이 반전되게)을 줘 보세요.

💡 강사의 실무 팁!
부드럽고 고급스러운 느낌을 주고 싶다면 a { transition: all 0.3s ease; } 라는 속성을 제일 위에 추가해 보세요. 색상이나 배경색이 마우스를 올렸을 때 뚝! 하고 바뀌는 게 아니라 0.3초 동안 스르륵~ 변하게 된답니다. 모던 웹의 기본 스킬입니다!

링크 옆에 아이콘 넣기 (Including icons on links)

실무에서 아주 흔하게 쓰는 기법입니다. 이 링크가 나를 어디로 데려가는지 알려주기 위해 작은 아이콘을 붙여주는 거죠. 가장 대표적인 예가 바로 외부 링크(우리 사이트가 아닌 다른 사이트로 나가는 링크) 옆에 "네모 상자를 탈출하는 화살표" 아이콘을 붙여주는 것입니다.

여기서는 icons8.com에서 제공하는 외부 링크 아이콘을 사용해 보겠습니다.

먼저 우리가 꾸밀 간단한 HTML입니다:

<p>
  For more information on the weather, visit our <a href="#">weather page</a>,
  look at <a href="[https://en.wikipedia.org/](https://en.wikipedia.org/)">weather on Wikipedia</a>, or check
  out
  <a href="[https://www.nationalgeographic.org/topics/resource-library-weather/](https://www.nationalgeographic.org/topics/resource-library-weather/)">
    weather on National Geographic</a>.
</p>

그다음, 우리가 원하는 아이콘 효과를 만들어 줄 CSS입니다:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.25em;

  background-size: 100%;
  background-image: url("external-link-52.png");
}

이 CSS에서 무슨 마법이 일어난 걸까요?
대부분의 CSS는 익숙하실 테니 건너뛰고, 마지막 덩어리에 집중해 봅시다. 우리는 여기서 ::after 가상 요소(pseudo-element)를 사용했습니다!

::after는 앵커(<a>) 태그의 텍스트가 끝나는 바로 뒷자리에 0.8em x 0.8em 크기의 조그만 빈 박스(inline-block)를 가상으로 생성합니다.
그리고 background-image 속성을 이용해 그 빈 박스의 배경으로 아이콘 이미지를 싹 깔아준 것이죠.
아이콘과 글자가 너무 딱 붙지 않도록 margin-left로 살짝 틈을 벌려주었습니다.

여기서 가장 영리한 점은 너비와 높이에 픽셀(px)이 아니라 상대 단위인 em을 사용했다는 것입니다! em을 썼기 때문에, 나중에 전체 font-size가 커지거나 작아져도 이 아이콘은 항상 텍스트 크기에 완벽하게 비례해서 자동으로 커지고 작아집니다.

마지막으로 진짜 하이라이트! 우리는 어떻게 "외부 링크"에만 저 아이콘을 띄웠을까요?
HTML 링크 작성 원칙에 따르면, 우리 웹사이트 내부를 돌아다니는 링크는 보통 상대 경로(예: /about, #)를 쓰고, 외부 사이트로 나가는 링크는 무조건 http나 https로 시작하는 절대 URL을 써야 합니다.
그래서 우리는 속성 선택자(attribute selector)의 마법인 a[href^="http"]를 사용했습니다! 이 선택자는 해석하자면 "수많은 <a> 태그 중에서, href 속성값이 http로 시작하는(^=) 녀석들만 골라내라!"라는 뜻입니다.

💡 강사의 실무 팁!
"내부망이라 다 http로 시작하는데요?!" 혹은 "이력서 다운로드 링크에 PDF 아이콘을 달고 싶어요!"
그럴 때는 a[href$=".pdf"] 처럼 달러 기호($=)를 써보세요! 이러면 href 주소가 .pdf로 끝나는 링크에만 PDF 다운로드 아이콘을 예쁘게 달아줄 수 있습니다. 실무에서 정말 쏠쏠하게 써먹는 기술입니다.

링크를 진짜 버튼처럼 꾸미기 (Styling links as buttons)

이 글에서 지금까지 배운 도구들은 다른 용도로도 아주 훌륭하게 쓰일 수 있습니다. 예를 들어 :hover 같은 상태 선택자는 꼭 링크에만 쓸 수 있는 게 아닙니다. 문단(p), 리스트 아이템(li), 그 외 어떤 요소에 마우스를 올렸을 때 반응하게 만들 수 있죠.

가장 흔한 활용법은 링크를 진짜 버튼(Button)처럼 보이게 꾸미는 것입니다!
웹사이트의 상단 내비게이션 메뉴(GNB)는 HTML 구조상 거의 대부분 리스트(<ul>) 안에 들어있는 링크(<a>)들의 모음입니다. 하지만 디자인적으로는 이것들이 마치 클릭할 수 있는 큰 사각형 탭이나 제어 버튼처럼 보여야 하죠. 어떻게 하는지 살펴봅시다.

먼저, 간단한 메뉴 HTML입니다:

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

자, 이제 이 평범한 글자들을 CSS의 마법으로 진짜 버튼처럼 바꿔보겠습니다:

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

.container {
  display: flex;
  gap: 0.625%; /* 버튼 사이의 간격 */
}

a {
  flex: 1; /* 모든 버튼이 동일한 너비를 꽉 채워서 나눠 갖도록! */
  text-decoration: none; /* 못생긴 밑줄 제거 */
  outline-color: transparent;
  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; /* 텍스트도 흰색으로 반전! */
}

이 코드를 적용하면 짠! 멋진 메뉴 바가 탄생합니다.

(렌더링 결과: 노란색 배경에 글자가 중앙 정렬된 넓은 버튼들이 가로로 배치되며, 마우스를 올리면 주황색으로, 클릭하면 진한 빨간색으로 변함)

HTML에서는 <nav> 태그에 container 클래스를 주고 그 안에 5개의 앵커(<a>)를 넣었습니다.
CSS가 어떤 마법을 부렸는지 핵심만 짚어볼게요.

.container (부모 요소):
- display: flex;를 주어 부모를 플렉스박스(flexbox)로 만들었습니다. 이제 안에 있는 링크들은 가로로 나란히 서는 '플렉스 아이템'이 됩니다.
- gap: 0.625%;를 주어 버튼과 버튼 사이에 미세한 틈을 만들어 주었습니다.
a (링크 요소들):
- flex: 1; 이 한 줄이 핵심입니다! 5개의 버튼이 컨테이너의 남은 빈 공간을 1:1:1:1:1 비율로 공평하게 나누어 꽉 채우게 만들어 줍니다.
- text-decoration: none;으로 밑줄을 없애서 버튼처럼 보이게 했고,
- text-align: center;로 글자를 가로 중앙으로 보낸 뒤,
- line-height: 3;을 주어 폰트 크기의 3배만큼 상하 높이를 빵빵하게 키워주었습니다. (height와 padding을 따로 주지 않아도 세로 중앙 정렬까지 한 번에 해결되는 아주 똑똑한 팁입니다!)
나머지 상태들(hover, active 등)은 앞서 배운 대로 배경색(background)을 바꿔가며 버튼이 상호작용하는 느낌을 주도록 칠해준 것입니다.

요약 (Summary)

이 글이 여러분께 링크를 마음대로 다루기 위해 필요한 모든 기본기를 전수해 주었기를 바랍니다! (적어도 당분간은요!) 이 '텍스트 스타일링' 모듈의 마지막 글에서는 여러분의 웹사이트에 직접 가져와서 쓸 수 있는, 아름다운 커스텀 폰트인 웹 폰트(Web fonts) 사용법을 아주 상세하게 파헤쳐 볼 예정입니다. 기대해 주세요!

이전 페이지 (Styling lists) | 개요: CSS 텍스트 스타일링 | 다음 페이지 (Web fonts)