와 은 무엇이 다른가요?

는 취소선을 그은 가격처럼 더 이상 관련이 없거나 맞지 않지만 맥락을 위해 남겨 둔 텍스트를 표시해요. 은 문서에서 삭제된 텍스트를 표시하고, 대체한 내용을 보여 주는 와 함께 쓰는 경우가 많으며, datetime과 cite 속성을 가질 수 있어요.

실행 가능한 HTML 문서: 밑줄과 취소선

Q: HTML에서 밑줄은 어떻게 긋나요?

로 감싸거나 CSS에서 text-decoration: underline을 적용하세요. 는 맞춤법 오류 표시처럼 고유한 의미가 있을 때만 쓰고, 순전히 시각적인 밑줄에는 이나 요소 자체에 CSS를 쓰세요.

Q: HTML에서 취소선은 어떻게 긋나요?

이전 가격처럼 더 이상 정확하지 않은 텍스트에는 를, 수정하면서 삭제한 텍스트에는 을 쓰세요. 둘 다 텍스트 가운데에 줄을 그어요. CSS에서는 text-decoration: line-through가 시각적으로 같은 일을 해요.

Q: 태그는 폐기되었나요?

아니요. 는 HTML 4에서 폐기되었지만 HTML5에서 새로운 의미로 돌아왔어요. 맞춤법 오류나 중국어 텍스트의 고유 명사처럼 텍스트가 아닌 주석이 달린 텍스트를 뜻해요. 올바른 태그지만 알맞은 선택인 경우는 드물어요.

HTML 밑줄과 취소선: u, ins, s, del 태그

HTML에서 밑줄은 나 CSS text-decoration으로, 취소선은 <s>나 <del>로 그어요. 각 태그의 의미, <ins>와 <del>로 수정 내역을 표시하는 법, 링크가 아닌 텍스트에 밑줄을 그으면 독자가 헷갈리는 이유를 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

HTML에서 밑줄 긋는 법

방법은 두 가지예요.  태그, 또는 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: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

밑줄의 문제는 세 번째 줄에 있어요. 독자는 밑줄이 있는 텍스트를 링크로 여기고 클릭해요. 일반 텍스트에는 분명한 이유가 있을 때만 밑줄을 그으세요.

u 태그의 의미

는 범용 "밑줄" 버튼이 아니에요. 현재 HTML에서는 명시되지 않은 주석이 달린 텍스트를 뜻해요. "여기 뭔가 특별한 게 있다"고 표시하되 그게 무엇인지는 말하지 않는 거예요. 실제로 흔히 쓰는 경우는 이래요.

워드 프로세서처럼(주로 빨간 물결선으로) 맞춤법 오류를 표시할 때,
중국어 텍스트에서 고유 명사를 표시할 때. 그곳의 조판 관례예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

강조에는 이나 을 쓰고(굵게 참고), 책 제목에는 <cite>를 쓰세요. 모양만 원한다면 CSS를 쓰세요.

취소선: s와 del

HTML에는 텍스트에 취소선을 긋는 태그가 두 개 있고, 뜻이 서로 달라요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

태그	의미	주요 용도
`<s>`	더 이상 정확하지 않거나 관련 없지만 맥락을 위해 남김	이전 가격, 매진된 티켓 종류
`<del>`	문서에서 삭제됨	수정 내역, 변경 기록, 할 일 목록의 완료 항목

ins와 del로 수정 내역 표시하기

<ins>는 <del>의 짝으로, 추가된 텍스트를 표시해요. 브라우저는 기본적으로 밑줄을 그어요. 둘 다 datetime(변경된 시각)과 cite(변경 이유를 설명하는 URL)를 받아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

이 빨간색과 초록색 스타일이 익숙한 diff의 모습이에요. ins에 text-decoration: none을 주면 기본 밑줄이 사라져서 링크처럼 보이지 않아요.

CSS로 밑줄과 취소선

text-decoration은 어떤 요소에든 시각적인 부분을 맡아요. 색과 스타일을 받고, 두께는 text-decoration-thickness로 정해요. 순전히 장식용 선에는 이게 맞는 도구예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

링크 밑줄 없애기, 밑줄 간격, 그 밖의 text-decoration 세부 사항은 CSS 밑줄 페이지에 있어요.

접근성

<s>, <del>, <ins>에 대한 스크린 리더 지원은 제각각이에요. 삭제나 삽입이라고 알려 주는 것도 있지만 많은 스크린 리더가 일반 텍스트로 읽어서, 듣는 사람은 어느 쪽이 현재 가격인지 알 수 없이 "가격 49달러 29달러"로 듣게 될 수 있어요. 차이가 중요하다면 말로도 전하세요. 예를 들어 화면에는 숨기고 소리로만 읽히는 텍스트를 쓰거나, 그냥 "원래 $49, 지금$ 29"라고 쓰세요.

자주 하는 실수

링크가 아닌 텍스트에 밑줄을 그음. 독자가 클릭하려고 해요. 강조하려면 대신 굵게, 색, 배경을 쓰세요.
강조에 를 씀. 이나 을 쓰세요.
<strike>를 씀. 더 이상 쓰지 않는 태그예요. <s>, <del>, text-decoration: line-through를 쓰세요.
문서 이력에서 삭제된 내용에 <s>를 씀. 그건 <del>이고, 언제 삭제했는지도 기록할 수 있어요.
선만으로 의미를 전하려 함. 많은 스크린 리더가 선을 알려 주지 않아요.

자주 묻는 질문

HTML에서 밑줄은 어떻게 긋나요?

로 감싸거나 CSS에서 text-decoration: underline을 적용하세요. 는 맞춤법 오류 표시처럼 고유한 의미가 있을 때만 쓰고, 순전히 시각적인 밑줄에는 이나 요소 자체에 CSS를 쓰세요.

HTML에서 취소선은 어떻게 긋나요?

이전 가격처럼 더 이상 정확하지 않은 텍스트에는 <s>를, 수정하면서 삭제한 텍스트에는 <del>을 쓰세요. 둘 다 텍스트 가운데에 줄을 그어요. CSS에서는 text-decoration: line-through가 시각적으로 같은 일을 해요.

태그는 폐기되었나요?

아니요. 는 HTML 4에서 폐기되었지만 HTML5에서 새로운 의미로 돌아왔어요. 맞춤법 오류나 중국어 텍스트의 고유 명사처럼 텍스트가 아닌 주석이 달린 텍스트를 뜻해요. 올바른 태그지만 알맞은 선택인 경우는 드물어요.

<strike> 태그는 어떻게 되었나요?

<strike>는 더 이상 쓰지 않는 태그예요. 브라우저는 아직 취소선으로 그리지만 올바른 HTML이 아니에요. 의미에 따라 <s>나 <del>을 쓰거나 text-decoration: line-through를 쓰세요.

<s>와 <del>은 무엇이 다른가요?

<s>는 취소선을 그은 가격처럼 더 이상 관련이 없거나 맞지 않지만 맥락을 위해 남겨 둔 텍스트를 표시해요. <del>은 문서에서 삭제된 텍스트를 표시하고, 대체한 내용을 보여 주는 <ins>와 함께 쓰는 경우가 많으며, datetime과 cite 속성을 가질 수 있어요.