글자 위로 밑줄 긋기 - text-decoration

text-decoration은 글자 위로 선을 그을 수 있게 해주는 속성입니다. 문법 text-decoration: none | line-through | overline | underline none : 선을 만들지 않습니다. line-through : 글자 중간에

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
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

기타 CSS 참조

Post a Comment