[HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration

 

 

이번에는 CSS를 사용하여

글자에 밑줄을 긋고,

밑줄의 위치, 두께, 색깔, 모양을 지정할 수 있는 방법을 정리해보겠습니다.

 

 

간단하게 밑줄 긋기

글자에 밑줄을 긋기 위해서는

CSS의 text-decoration 속성을 사용합니다.

 

 

 

text-decoration : underline;

간단하게 text-decoration 속성을 underline으로 지정하여

문자열에 밑줄을 그었습니다.

 

---

 

이번에는 밑줄의 위치, 두께, 색깔, 모양을 지정할 수 있는 방법을 정리해 보겠습니다.

앞에서 간단히 밑줄을 긋는데 사용했던

text-decoration 속성을 사용하면 이런 다양한 속성들도 정의할 수 있습니다.

 

 

text-decoration

text-decoration 속성은 다음 속성들의 단축 속성입니다.

즉, 아래의 속성들을 각각 지정할 수도 있고,

text-decoration 속성 안에 아래의 속성들을 한꺼번에 지정할 수도 있습니다.

• text-decoration-line : 선 위치
• text-decoration-color : 선 색깔
• text-decoration-style : 선 모양
• text-decoration-thickness : 선 두께

이제 각각의 속성들을 지정하는 예시를 살펴보겠습니다.

 

 

text-decoration-line

텍스트 주위의 선의 위치를 지정하는 속성입니다.

• none : 선 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 취소선

 

 

 

text-decoration-color

텍스트 주위의 선 (위, 밑, 중간 선)의 색깔을 지정할 수 있습니다.

• currentColor : 텍스트와 같은 색깔. 기본값.
• <color>

 

 

 

text-decoration-style

선의 모양을 지정할 수 있습니다.

• solid : 한줄
• double : 두줄
• dotted : 점선
• dashed : 라인이 있는 점선
• wavy : 물결 무늬

 

 

 

text-decoration-thickness

선의 굵기를 지정할 수 있습니다.

 

 

 

text-decoration 속성으로 한꺼번에 밑줄 모양 지정하기

text-decoration에 위에 소개한 속성들의 값을 나열해주면

text-decortaion 속성 하나로, 

선의 위치, 두께, 색깔, 모양을 한번에 지정해 줄 수 있습니다.

 

 

 

---

 

CSS의 text-decoration 속성을 사용하여

밑줄, 윗줄, 취소선을 그리고,

선의 모양, 두께, 위치, 색깔을 지정하는 방법을 알아보았습니다.