[CSS] 텍스트에 취소선 긋기

 

밑줄 긋기

CSS를 사용하여 텍스트에 밑줄을 긋기 위해서는

다음과 같이 코드를 작성하였습니다.

text-decoration: underline;

 

 

취소선 긋기

취소선을 그을 때는 밑줄 긋기와 마찬가지로

text-decoration 속성을 지정해줍니다.

다만, 속성값은 'line-through'로 지정해줍니다.

text-decoration: line-through;

 

 

예제

다음은 밑줄과 취소선을 긋는 예제입니다.

 

<div class='underline'> 밑줄 </div>
<div class='strike-through'> 취소선 </div>

.underline {
  text-decoration: underline;
}

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

 

 

취소선 스타일링

취소선의 색깔, 굵기, 모양 등을 변경하는 것은

밑줄을 스타일링 하는 방법과 같습니다.

취소선의 스타일링 가이드는 이전의 포스팅을 참조하세요.

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

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

 

---

 

CSS의 text-decoration 속성을 사용하여 취소선을 긋는 방법을 알아보았습니다.