• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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.
아래 속성들 한번에 정의 가능

 

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 구문


selector {text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;}

 


[속성값]

 

text-decoration-line

라인 위치/종류 (※ 가능값 종류) 

  • none - 꾸밈 없음 (기본값)
  • underline - 텍스트 아래 밑줄.
  • overline - 텍스트 위 윗줄
  • line-through - 취소선 (=텍스트 관통 가로선) 

 

text-decoration-color

라인 색깔

 

text-decoration-style

라인 모양 (※ 기능값 종류) 

  • solid - 굵은선
  • wavy - 물결모양
  • dotted - 점선
  • dashed - 짧은막대선
  • double - 이중선
 
text-decoration-thickness
텍스트라인 굵기(=두께)
  • auto - 브라우저 자동 지정. (기본값)
  • from-font - 폰트에 내장된 두께 정보 사용. 없으면, auto 사용.
  • length - 길이 단위로 두께 지정. (예: 5px)
  • percentage - 텍스트 크기의  백분율로 지정. (예: 50%)
 
initial
이 속성의 기본값으로 설정. 
 
inherit 
부모 요소의 속성값 상속. 


 

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>

결과 보기

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
text CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성)…
text CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간…
text CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 =…
text CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)
text CSS - text-decoration 속성 ★ - 텍스트라인 꾸미기 (= 밑줄/밑선, 가운데줄/취소선, 윗…
text CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = …
text CSS - text-transform 속성 - 텍스트 대소문자변환 (= text-transform속성 = 텍…
text CSS - word-spacing 속성 ★ - 텍스트 단어간 간격 (= 단어간격 = word-spacing…
text CSS - vertical-align 속성 ★ - 텍스트수직정렬 (= vertical-align속성 = 버티…
text CSS - white-space 속성 ★ - 공백처리/줄바꿈 지정 (= white-space속성 / 화이트스…
text CSS - unicode-bidi 속성 - 텍스트글자방향 (= unicode-bidi속성 = 유니코드비디속성…
text CSS - text-align-last 속성 - 단락마지막라인정렬 (= text-align-last속성 = …
text CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위…
text CSS - text-justify 속성 - 텍스트 좌우균분정렬 세부설정 (= text-justify속성 = …
text CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = …
text CSS - word-break 속성 ★ - 한중일 외의 언어 (단어기준/글자기준) 줄바꿈규칙 지정 (= 줄…
text CSS - word-wrap 속성 ★ - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = w…
text CSS - text-fill-color 속성 (비표준) - 텍스트글자색 (= 글자전경색 =text-fill-…
text CSS - text-decoration-line 속성 - 텍스트라인위치종류 (= text-decoration…
1/2
목록
찾아주셔서 감사합니다. Since 2012