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

[text] CSS - text-decoration 속성 ★ - 텍스트꾸미기 (= 밑줄추가/밑줄제거, 취소선,윗선 = 텍스트데커레이션속성, 상속 X)

text-decoration 예제1

 

<style>
.none {text-decoration: none red;}
.overline {text-decoration: overline solid red;}
.underline {text-decoration: underline dashed red;}
.overline_underline {text-decoration: overline underline wavy blue;}
.line-through {text-decoration: line-through dotted red;}
</style>
 
<h1 class="none">none 홈짱닷컴 (homzzang.com)</h1>
<h1 class="overline">overline 홈짱닷컴 (homzzang.com)</h1>
<h1 class="underline">underline 홈짱닷컴 (homzzang.com)</h1>
<h1 class="overline_underline">overline underline 홈짱닷컴 (homzzang.com)</h1>
<h1 class="line-through">line-through 홈짱닷컴 (homzzang.com)</h1> 

결과보기
 
 
text-decoration 정의

 

텍스트 꾸미기 단축 속성

 


 

1.
아래 속성들 한번에 정의 가능

text-decoration-line (필수)

text-decoration-color

text-decoration-style

 

2.

기본값 : none currentcolor solid

상속여부 : X

애니효과 : X

CSS버전 : CSS1, CSS3수정

JS구문 : object.style.textDecoration="underline"


3.
모든 브라우저 지원.

 

 
 
text-decoration 구문

selector {text-decoration: text-decoration-linetext-decoration-colortext-decoration-style|initial|inherit;}

 


 

[속성값 종류]

 

text-decoration-line

라인종류

 

none
꾸밈 없음 (기본값)

 

underline
텍스트 아래 밑줄.
 
overline
텍스트 위 윗줄

line-through

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

 

text-decoration-color

라인색깔

 

text-decoration-style

라인스타일 (단색, 물결 모양, 점선, 점선, 이중)

 


 
blink
텍스트 깜박임 
※ 브라우저에 따라 지원 여부 다름. 익스 크롬 파이어폭스 모두 작동 X

initial
이 속성의 기본값으로 설정. 
 
inherit 
부모요소의 속성값 상속, 
자식 요소에서 별도의 속성을 지정 안할 경우 부모 요소의 속성 자동 상속


 

text-decoration 예제2
부모 요소에서 none 이외의 별도 속성값을 지정하면
자식 요소에서 별도의 속성값을 지정해도 영향을 미침. 
자식 요소 속성값에 !important 줘도 마찬가지. ㅡㅡ; 
(즉, 두 가지 효과가 다 나타남)   (아래 예제 참고)
단, 자식 요소에 display:inline-block 속성 추가하면 별도 지정 가능. 
 
<style>
/* 부모요소 */
div {text-decoration: underline;}
 
/* 자식요소*/
.none {text-decoration: none !important;} /* !important 안 먹힘 */
.unde {text-decoration: underline;}
.over {text-decoration: overline; }
.line {text-decoration: line-through;}
.blin {text-decoration: blink;}
.inhe {text-decoration: inherit;}
</style>
 
<div>부모 요소 홈짱닷컴 (homzzang.com)
    <p class="none">none 홈짱닷컴 (homzzang.com)</p>
    <p class="unde">underline 홈짱닷컴 (homzzang.com)</p>
    <p class="over">overline 홈짱닷컴 (homzzang.com)</p>
    <p class="line">line-through 홈짱닷컴 (homzzang.com)</p>
    <p class="blin">blink 홈짱닷컴 (homzzang.com)</p>
    <p class="inhe">inherit 홈짱닷컴 (homzzang.com)</p>
</div>

 

자식 요소 밑줄 제거 방법1 : 자식 요소에 display:inline-block 추가

- 도움: 웹사이팅 님 -

 

<style>

div:hover{text-decoration:underline;}

div:hover span{text-decoration:none; display:inline-block;}
</style>

<div><span>홈짱닷컴</span> Homzzang.com</div>

 

결과보기


 

자식 요소 밑줄 제거 방법2 : 부모 요소에 padding , 자식요소에 position:absolute 각각 추가

- 도움: bonobono 님 -


<style>

div {position:relative;padding:0 0 0 100px; }

div:hover {text-decoration:underline;}

div>span {position:absolute;left:0}
</style>

 

<div><span>홈짱닷컴</span> Homzzang.com</div>

 

결과보기

 

text-decoration 예제3 - 한번에 여러 속성값 적용하기

<style>
.all {text-decoration: underline overline line-through;}
</style>
 
<p class="all">all  홈짱닷컴 (homzzang.com)</p>


결과 보기

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

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