텍스트 꾸미기(text-decoration)

text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있습니다. 사실 옵션도 몇 가지 없고 딱히 예쁘지도 않지만 한 번 살펴봅시다.

Underline

underline 값을 사용하면 밑줄이 그어집니다.

 

HTML
<h1>Hello World!</h1>


CSS
h1 {
  text-decoration: underline;
}

 

 

Overline

overline 값을 사용하면 글 위에 줄이 그어집니다.

 

HTML
<h1>Hello World!</h1>



CSS
h1 {
  text-decoration: overline;
}

 

Line-through

line-through 값을 사용하면 줄이 글을 관통합니다.

HTML
<h1>Hello World!</h1>



CSS
h1 {
  text-decoration: line-through;
}

 

None

none 값을 사용하면 아무 줄도 없습니다. 이게 기본 값입니다!

HTML
<h1>Hello World!</h1>



CSS
h1 {
  text-decoration: none;
}

 

<a> 태그와 사용

사실 제가 text-decoration을 가장 많이 사용하는 경우는 텍스트를 꾸미기 위해서가 아니라 꾸밈을 없애기 위해서입니다. <a> 태그는 기본적으로 밑줄이 그어져 있는데, 이걸 없애기 위해서 text-decoration: none;을 사용합니다.

 

HTML
<a href="https://www.codeit.kr">구글로 가는 링크</a>
<a class="no-decoration" href="https://www.google.com" target="_blank">구글로 가는 링크</a>



CSS
.no-decoration {
  text-decoration: none;
}