• Q&A
  • 회원가입
  • 로그인

[text] CSS - text-decoration-line 속성 - 텍스트라인위치 (윗줄,밑줄 등..) (= 텍스트데커레이션라인속성, IE지원X)

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 정의 

 

텍스트 라인 종류 (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-


 

 

text-decoration-line 구문

 

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

 


 

[속성값]

 

none

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

underline

밑줄

 

overline

위줄

 

line-through

텍스트 관통 가로선

initial

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

 

inherit

부모요소의 속성값 상속.

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012