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

1. text-decoration 예제 - 글자꾸미기 (밑줄, 윗줄, 취소선 등)
2. text-decoration 정의
3. text-decoration 구문
4. text-decoration 예제 - 자식요소로의 상속 막기 ★
5. text-decoration 예제 - 한번에 여러 속성값 적용

text-decoration 예제 - 글자꾸미기 (밑줄, 윗줄, 취소선 등) 

 

<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 속성 - (선택) 텍스트라인 모양
• text-decoration-thickness 속성 - (선택) 텍스트라인 굵기

 

2.

• 기본값 : none currentcolor solid auto
• 상속여부 : X
• 애니효과 : X
• CSS버전 : CSS1, CSS3수정
• JS구문 : object.style.textDecoration="underline"

3.
모든 브라우저 지원.

 

4.

MDN text-decoration 예제 보기

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

 

text-decoration 구문

text-decoration 예제 - 자식요소로의 상속 막기 ★

 

부모요소에서 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 예제 - 한번에 여러 속성값 적용

<style>

.all {text-decoration: underline overline line-through;}

</style>

 

<p class="all">all  홈짱닷컴 (homzzang.com)</p>

결과 보기