Text-Decoration

 

개요 :

이 속성은 요소의 글자에 밑줄(underline)이나 윗줄(overline), 취소선(line-through) 등의 꾸밈을 지정합니다.

줄을 그어 꾸미는 효과는 글자를 읽기 어렵게 할 수 있습니다. 영어와 달리, 한글은 글자가 밑줄과 윗줄과 겹칠 수 있기 때문입니다.

 "잘"이라는 글자를 예를 들면, 자음 "ㅈ"과 윗줄(overline)이 겹치고, 받침글자 "ㄹ"과 밑줄이 겹칩니다.

또한, 취소선(line-through)은 del 태그를 사용하는 게 바람직합니다.

 

정의

 text-decoration

 설명

 값

 none | [underline || overline || line-through || blink ] | inherit

 기본값

 none

 적용대상

 모든 요소

 상속

 안됨

 백분율

 사용 불가

 미디어

 visual

 

값

 값

설명 

 none

 글자의 꾸임을 지정하지 않는다. 기본 형태로 출력됨.

 underline

 글자의 밑에 줄을 지정한다.

 overline

 글자의 위에 줄을 지정한다.

 line-through

 글자의 가운데에 줄을 지정한다.

 blink

 글자가 깜빡이도록 지정한다.

 inherit

 부모 요소의 값을 상속하도록 지정한다.

 

-----------------------------------------------------------------------------------------------------------------------------------------

 

예제

View Source :

<style>
 .lineA {text-decoration: underline;}
 .lineB {text-decoration: overline ;}
 .lineC {text-decoration: line-through;}
</style>
<body>
 <p>본문의 일부 단어에 <span class="lineA">밑줄(underline)<span>을 그어 꾸밉니다.</p>
 <p>본문의 일부 단어에 <span class="lineB">윗줄(overline)<span>을 그어 꾸밉니다.</p>
 <p>본문의 일부 단어에 <span class="lineC">취소선(line-through)<span>을 그어 꾸밉니다.</p>
</body>

Result :
25.PNG?type=w1
이 게시물을...