30) CSS 속성 - text-decoration

<a>를 사용하면 기본적으로 텍스트 밑에 밑줄이 그어져서 표시되는 것을 보신 적이 있으실 겁니다.

이러한 이유는 브라우저에 따라 다를 수는 있지만 보통 text-decoration이

<a>에 대해서 기본값이 다르기 때문입니다.

이 속성은 단순 밑줄을 그어주는 것이 아니라 다양한 줄의 스타일과 모양,

색상 등을 제어할 수 있습니다.

 

 

text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다. 

    기본 값 :  none   currentColor   solid

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

• text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성입니다.    
• 기본 값 : none  

< 속성 값 >

none	텍스트 꾸밈을 생성하지 않음 ( 기본값 )
underline	밑줄로 꾸밈을 설정
overline	윗줄로 꾸밈을 설정
line-through	중간을 지나는 줄로 꾸밈을 설정

 

• text-decoration-color
• 텍스트 꾸밈의 색상을 지정하는 속성입니다.    
• 기본 값 : currentColor
• 색상 값을 사용하여 원하는 색상을 지정할 수 있습니다.
• text-decoration-style 꾸밈에 사용되는 선의 스타일을 지정하는 속성입니다.    
• 기본 값 : solid  
  

< 속성 값 >

solid	한줄 스타일 ( 기본 값 )
double	이중선 스타일
dotted	점선 스타일
dashed	파선 스타일
wavy	물결 스타일