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 :