text-decoration 편집

Table of Contents (보이기↓)

edit

개요

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

줄을 그어 꾸미는 효과는 글자를 읽기 어렵게 할 수 있습니다. 영어와 달리, 한글은 글자가 밑줄과 윗줄과 겹칠 수 있기 때문입니다. "잘"이라는 글자를 예를 들면, 자음 "ㅈ"과 윗줄(overline)이 겹치고, 받침글자 "ㄹ"과 밑줄이 겹칩니다.

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

edit

정의

text-decoration설명
값none | [ underline || overline || line-through || blink ] | inherit
기본값none
적용대상모든 요소
상속안됨
백분율사용 불가
미디어visual?

edit

값

값설명
none글자의 꾸임을 지정하지 않는다. 기본 형태로 출력됨.
underline글자의 밑에 줄을 지정한다.
overline글자의 위에 줄을 지정한다.
line-through글자의 가운데에 줄을 지정한다.
blink글자가 깜빡이도록 지정한다.
inherit부모 요소의 값을 상속하도록 지정한다.

edit

예제

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

브라우저 호환성

Wiki Trail: < letter-spacing | 문서 목록 | text-transform >

blog comments powered by Disqus

 
Be Friend~! Be Friend~!