[text] CSS - text-decoration-line 속성 - 텍스트라인위치종류 (= text-decoration-line속성 = 텍스트데커레이션라인속성)

1. text-decoration-line 예제 - 텍스트 라인위치 종류
2. text-decoration-line 정의
3. text-decoration-line 구문

text-decoration-line 예제 - 텍스트 라인위치 종류 

 

<style>

div {margin-bottom:20px;}

div.a {

   -webkit-text-decoration-line: overline; /* Safari */

   text-decoration-line: overline; 

}

div.b {

   -webkit-text-decoration-line: underline; /* Safari */

   text-decoration-line: underline; 

}

div.c {

   -webkit-text-decoration-line: line-through; /* Safari */

   text-decoration-line: line-through; 

}

div.d {

   -webkit-text-decoration-line: overline underline; /* Safari */

   text-decoration-line: overline underline; 

}

</style>

 

<div class="a">overline - Homzzang.com</div>

<div class="b">underline - Homzzang.com</div>

<div class="c">line-through - Homzzang.com</div>

<div class="d">overline underline - Homzzang.com</div>

 

결과보기

text-decoration-line 정의

 

텍스트 라인위치 종류 지정. (※ 한번에 2개 속성값을 띄어쓰기 해서 동시 지정 가능)

(예: underline, overline, line-through 등)

 

---

 

1. text-decoration 속성 이용해 아래 3가지 속성 한번에 정의 가능.

• text-decoration-line 속성 - 텍스트라인위치 종류
• text-decoration-style 속성 - 텍스트라인모양 종류
• text-decoration-color 속성 - 텍스트라인색상

 

2.

• 기본값 : none
• 상속여부 : X
• 애니효과 : X
• CSS버전 : CSS3
• JS구문 : object.style.textDecorationLine="overline"

 

3.

• IE 제외한 주요 최신브라우저 모두 지원.
• 일부 구형브라우저 경우, 브라우저 접두어 필요. (Firefox : -moz- / Safari : -webkit-)

 

4. MDN text-decoration-line 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line

 

text-decoration-line 구문

 

selector {text-decoration-line: none|underline|overline|line-through|initial|inherit;}

 

---

[속성값]

 

none

텍스트라인 사용 안 함. (기본값)

underline

밑줄

 

overline

윗줄

 

line-through

취소선. (= 텍스트 관통 가로선)

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.

---

PS.

• 한번에 2개 속성값을 동시 지정 가능. (예) text-decoration-line:underline overline
• blink (깜빡임) 속성값은 폐기예고됨. 사용금지.