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

 

 

이번에는 CSS를 사용하여

글자에 밑줄을 긋고,

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

 

 

간단하게 밑줄 긋기

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

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

<p class='my-underline'>안녕하세요?</p>

.my-underline {
  text-decoration: underline;
}

 

 

 

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

<p class='my-none'>none</p>
<p class='my-underline'>underline</p>
<p class='my-overline'>overline</p>
<p class='my-line-through'>line-through</p>
<p class='my-all'>모두</p>

.my-none {
  text-decoration-line: none;
}

.my-underline {
  text-decoration-line: underline;
}

.my-overline {
  text-decoration-line: overline;
}

.my-line-through {
  text-decoration-line: line-through;
}

.my-all {
  text-decoration-line: underline overline line-through ;
}

 

 

 

text-decoration-color

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

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

<p class='my-red-underline'>red underline</p>
<p class='my-green-underline'>green underline</p>
<p class='my-current-color'>current color</p>

 

.my-red-underline {
  text-decoration-line: underline;
  text-decoration-color: red;
}

.my-green-underline {
  text-decoration-line: underline;
  text-decoration-color: green;
}

.my-current-color {
  color: purple;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}

 

 

 

text-decoration-style

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

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

<p class='my-solid'>solid underline</p>
<p class='my-double'>double underline</p>
<p class='my-dotted'>dotted underline</p>
<p class='my-dashed'>dashed underline</p>
<p class='my-wavy'>wavy underline</p>

.my-solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

.my-double {
  text-decoration-line: underline;
  text-decoration-style: double;
}

.my-dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.my-dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

.my-wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

 

 

 

text-decoration-thickness

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

<p class='my-auto'>auto underline</p>
<p class='my-3px'>3px underline</p>
<p class='my-10px'>10px underline</p>
<p class='my-1em'>1em underline</p>

.my-auto {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

.my-3px {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

.my-10px {
  text-decoration-line: underline;
  text-decoration-thickness: 10px;
}

.my-1em {
  text-decoration-line: underline;
  text-decoration-thickness: 1em;
}

 

 

 

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

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

text-decortaion 속성 하나로, 

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

<p class='my-gray-text'>
  gray text underline
</p>
<p class='my-red-underline'>
  red underline
</p>
<p class='my-green-dotted-underline'>
  green dotted underline
</p>
<p class='my-blue-3px-wavy-underline'>
  blue 3px wavy underline
</p>
<p class='my-purple-underline-overline'>
  purple unerline overline
</p>

.my-gray-text {
  color : gray;
  text-decoration : underline;
}
.my-red-underline {
  text-decoration: underline red;
}

.my-green-dotted-underline {
  text-decoration: green dotted underline;
}

.my-blue-3px-wavy-underline {
  text-decoration: blue wavy underline;
}

.my-purple-underline-overline {
  text-decoration: purple underline overline;
}

 

 

 

---

 

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

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

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