CSS - 텍스트에 선 넣는 속성

text-decoration 은 글자에 밑줄이나 취소선, 윗줄 등을 장식할 수 있습니다.

속 성	설 명
text-decoration-line	글자에 선을 넣습니다. none: 선을 넣지 않음 underline: 밑줄을 넣음. overline: 윗줄을 넣음. llne-through: 취소선을 넣음.
text-decoration-color	#16진수, rgb, rgba, rrggbb 등 색상을 사용 Ex.) text-decoration-line: underline; text-decoration-color: red;
text-decoration-style	선에 스타일을 지정합니다. solid | wavy | dotted | dashed | double 중 하나. 기본값 solid
text-decoration	위 속성을 묶어서 지정함 Ex.) text-decoration: underline red wavy;

<style>
.deco {
  /* 윗줄, 밑줄, 웨이브, 파랑색입니다. */
  text-decoration: overline underline wavy blue;
}
</style>

<p class="deco">선을 넣습니다.</p>

위 예제를 풀이하면 다음과 같습니다.

<style>
.deco {
  text-decoration-line: overline underline;
  text-decoration-stlye: wavy;
  text--decoration-color: blue;
}
</style>

<p class="deco">선을 넣습니다.</p>