실행 가능한 CSS 문서: CSS 밑줄

Q: CSS로 텍스트에 밑줄은 어떻게 긋나요?

요소에 text-decoration: underline;을 쓰세요. 선의 모양은 text-decoration-color, text-decoration-style, text-decoration-thickness, text-underline-offset을 추가해서 바꿔요.

Q: 링크의 밑줄은 어떻게 없애나요?

a 요소에 text-decoration: none;을 지정하세요. 많은 독자가 밑줄로 링크를 찾기 때문에, 다른 방법(색, 그리고 hover나 포커스 때의 밑줄)으로 링크가 여전히 눈에 띄게 하세요.

Q: 밑줄 색은 어떻게 바꾸나요?

text-decoration-color나 단축 속성 text-decoration: underline #f59e0b;를 쓰세요. 지정하지 않으면 선은 글자 색을 써요.

Q: 텍스트와 밑줄 사이에 간격은 어떻게 주나요?

text-underline-offset을 써요. 예를 들면 text-underline-offset: 4px;예요. 값이 클수록 선이 텍스트 아래로 더 멀어져요.

CSS로 밑줄 긋는 법

text-decoration: underline은 텍스트 아래에 선을 그려요. 따로 색을 주지 않으면 선은 글자 색을 가져가요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

두 번째 줄은 text-decoration 단축 속성으로 선 종류, 스타일, 색을 정하고, 두께와 간격은 각자의 속성으로 정해요. 명세상으로는 단축 속성 안에 두께를 넣을 수도 있지만, 그러면 Safari가 선언 전체를 버리니 text-decoration-thickness를 따로 쓰세요.

text-decoration 속성들

속성	값	기본값
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (조합 가능)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	모든 색	`currentColor` (글자 색)
`text-decoration-thickness`	길이, 퍼센트, `auto`, `from-font`	`auto`
`text-underline-offset`	길이, 퍼센트, `auto`	`auto`

text-decoration은 처음 네 가지의 단축 속성이지만, 두께는 넣지 마세요. Safari는 두께가 들어 있는 text-decoration 선언을 무시해요. text-underline-offset은 별도 속성이라 따로 적어야 해요.

스타일, 색, 두께

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

밑줄 옮기기: text-underline-offset

기본적으로 선은 글자에 가깝게 붙고 g, p, y 같은 아래로 내려가는 글자 둘레에서는 끊겨요. text-underline-offset은 선을 더 아래로 밀어서, 제목과 링크에서 더 깔끔하게 보일 때가 많아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

내려가는 글자 둘레의 틈은 기본으로 켜져 있는 text-decoration-skip-ink: auto에서 나와요. 끊기지 않는 선을 원하면 none으로 지정하세요.

링크 밑줄 없애기

링크는 브라우저 스타일시트 때문에 밑줄이 있어요. text-decoration: none으로 없애요. 많은 독자가 밑줄로 링크를 찾기 때문에, hover와 키보드 포커스 때 밑줄을 다시 보여 주고 링크에 텍스트와 다른 색을 주세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

내비게이션 바와 버튼은 위치만으로도 "링크"라는 걸 알 수 있으니 밑줄을 빼도 괜찮아요. 텍스트 문단 안에서는 남겨 두세요. 링크 상태는 hover 페이지에서 더 다뤄요.

윗줄과 취소선

text-decoration-line은 텍스트 위나 가운데에도 선을 그리고, 값을 여러 개 받아요.

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

CSS로 그은 취소선은 시각적인 효과일 뿐이에요. 텍스트가 삭제된 내용(바뀐 가격, 빠진 항목)이라면 HTML 밑줄 페이지에서 보여 주듯 <s>나 <del>로 마크업해서 의미가 스타일만이 아니라 마크업에 담기게 하세요.

자주 하는 실수

꾸미려고 <u>로 밑줄 긋기. <u>는 맞춤법 오류처럼 다르게 표시된 텍스트용이에요. 꾸미는 밑줄은 CSS를 쓰세요.
링크가 아닌 텍스트에 밑줄 긋기. 독자가 클릭하려고 해요. 강조에는 굵기, 색, 배경을 쓰세요.
다른 신호 없이 본문의 링크 밑줄 없애기. 차이를 볼 수 없는 독자에게 색만으로는 부족해요.
자식에서 부모의 밑줄 없애려 하기. 안쪽에서는 되돌릴 수 없어요. 부모를 바꾸거나 자식을 inline-block으로 만드세요.
단축 속성에 text-underline-offset이 들어갈 거라고 기대하기. 별도 속성이에요.
단축 속성에 두께 넣기. text-decoration: underline 2px는 Chrome과 Firefox에서는 동작하지만 Safari는 선언 전체를 버려요. text-decoration-thickness를 쓰세요.

자주 묻는 질문

CSS로 텍스트에 밑줄은 어떻게 긋나요?

요소에 text-decoration: underline;을 쓰세요. 선의 모양은 text-decoration-color, text-decoration-style, text-decoration-thickness, text-underline-offset을 추가해서 바꿔요.

링크의 밑줄은 어떻게 없애나요?

a 요소에 text-decoration: none;을 지정하세요. 많은 독자가 밑줄로 링크를 찾기 때문에, 다른 방법(색, 그리고 hover나 포커스 때의 밑줄)으로 링크가 여전히 눈에 띄게 하세요.

밑줄 색은 어떻게 바꾸나요?

text-decoration-color나 단축 속성 text-decoration: underline #f59e0b;를 쓰세요. 지정하지 않으면 선은 글자 색을 써요.

텍스트와 밑줄 사이에 간격은 어떻게 주나요?

text-underline-offset을 써요. 예를 들면 text-underline-offset: 4px;예요. 값이 클수록 선이 텍스트 아래로 더 멀어져요.

자식 요소에서 밑줄을 없앨 수 없는 이유는 무엇인가요?

부모가 그린 밑줄은 자식 위로 가로질러 그려져서 자식 안에서 없앨 수 없어요. 밑줄을 지정한 요소에서 없애거나, 부모의 장식이 닿지 않는 display: inline-block으로 자식을 만드세요.