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

글자에 밑줄을 긋고,

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

 

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

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

See the Pen text-decoration underline by efalan (@efalan) on CodePen.

ext-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 : 취소선

See the Pen text-decoration-line by efalan (@efalan) on CodePen.

text-decoration-color
텍스트 주위의 선 (위, 밑, 중간 선)의 색깔을 지정할 수 있습니다.
currentColor : 텍스트와 같은 색깔. 기본값.
<color>

See the Pen text-decoration-color by efalan (@efalan) on CodePen.

text-decoration-style
선의 모양을 지정할 수 있습니다.
solid : 한줄
double : 두줄
dotted : 점선
dashed : 라인이 있는 점선
wavy : 물결 무늬

See the Pen text-decoration-style by efalan (@efalan) on CodePen.

text-decoration-thickness
선의 굵기를 지정할 수 있습니다.

See the Pen text-decoration-thickness by efalan (@efalan) on CodePen.

text-decoration 속성으로 한꺼번에 밑줄 모양 지정하기
text-decoration에 위에 소개한 속성들의 값을 나열해주면
text-decortaion 속성 하나로, 
선의 위치, 두께, 색깔, 모양을 한번에 지정해 줄 수 있습니다.

See the Pen text-decoration by efalan (@efalan) on CodePen.

CSS의 text-decoration 속성을 사용하여
밑줄, 윗줄, 취소선을 그리고,
선의 모양, 두께, 위치, 색깔을 지정하는 방법을 알아보았습니다.