[text] CSS - text-decoration-thickness 속성 - 텍스트라인 두께 지정 (= text-decoration-thickness속성 = 텍스트데커레이션씩니스속성) ※ 라인두께/라인굵기

1. text-decoration-thickness 예제 - 텍스트라인 두께 지정
2. text-decoration-thickness 정의
3. text-decoration-thickness 구문

text-decoration-thickness 예제 - 텍스트라인 두께 지정

 

<style>

h1 {

  text-decoration: underline;

  text-decoration-thickness: auto;  

}

h2 {

  text-decoration: underline;

  text-decoration-thickness: 5px;  

}

h3 {

  text-decoration: underline;

  text-decoration-thickness: 50%;    

}

/* 단축속성 사용 경우 */

h4 {

  text-decoration: underline solid red 50%;    

}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<h2>홈짱닷컴 Homzzang.com</h2>

<h3>홈짱닷컴 Homzzang.com</h3>

<h4>홈짱닷컴 Homzzang.com</h4>

 

결과보기

text-decoration-thickness 정의

 

텍스트라인 두께 지정.

 

---

 

1. cf.

• text-decoration 속성 - 텍스트라인 관련 속성 일괄 지정.
• text-decoration-line 속성 - 텍스트라인 위치 종류
• text-decoration-style 속성 - 텍스트라인 모양
• text-decoration-color 속성 - 텍스트라인 색상

 

2.

• 기본값: auto
• 상속여부: X
• 애니가능: X
• CSS버전: CSS4
• JS구문: object.style.textDecorationThickness="5px";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

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

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

 

text-decoration-thickness 구문

 

selector {text-decoration-thickness: auto|from-font|length|percentage|initial|inherit;}

 

---

[속성값]

 

auto

브라우저 자동 지정. (기본값)

 

from-font

폰트에 내장된 두께 정보 사용. 없으면, auto 사용.

 

length

길이 단위로 두께 지정. (예: 5px)

 

percentage

텍스트 크기의  백분율로 지정. (예: 50%)

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.