text-decoration
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 :
