text-decoration
text-decoration은 글자 위로 밑줄을 긋거나 취소선을 표시할 수 있습니다.
기본형
text-decoration : none | line-through | overline | underline
- none : 선을 만들지 않습니다.
- line-through : 글자 중간에 선을 만듭니다.
- overline : 글자 위에 선을 만듭니다.
- underline : 글자 아래에 선을 만듭니다.
속성값을 여러개 사용하여 여러 선을 만들 수 있습니다.
예를 들어 다음은 글자 위와 아래에 선을 만듭니다.
text-decoration: overline underline;
예제 1
<p class="a"><code>text-decoration: none;</code></p>
<p class="b"><code>text-decoration: line-through;</code></p>
<p class="c"><code>text-decoration: overline;</code></p>
<p class="d"><code>text-decoration: underline;</code></p>
<p class="e"><code>text-decoration: overline underline;</code></p>
<p class="f"><code>text-decoration: overline underline line-through;</code></p>
.a {
text-decoration: none;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: overline;
}
.d {
text-decoration: underline;
}
.e {
text-decoration: overline underline;
}
.f {
text-decoration: overline underline line-through;
}
예제 2
none 속성으로 텍스트 링크의 밑줄을 없앨 수 있습니다.
<p><a href="javascript:;">HTML5 표준 규약 살펴보기</a></p>
<p><a class="no" href="javascript:;">CSS3 표준 살펴보기</a></p>
.no {
text-decoration: none
}