CSS 취소선(text-decoration) 속성 소개
웹 페이지에서 텍스트에 취소선을 그리려면 CSS의 text-decoration 속성을 사용하면 됩니다. 이 속성에 line-through 값을 지정하면 텍스트 중앙에 가로줄이 그어져 마치 삭제된 문서처럼 보이게 됩니다.
취소선은 할 일 목록에서 완료된 항목을 표시하거나, 할인 전 원래 가격을 보여주는 등 다양한 상황에서 유용하게 활용됩니다.
기본 사용 예제
아래 코드를 실행하면 인라인 스타일을 통해 텍스트에 취소선이 적용되는 것을 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "text-decoration:line-through;"> 이 텍스트에는 취소선이 적용됩니다. </p> </body> </html>
text-decoration의 주요 값
text-decoration 속성은 취소선 외에도 여러 값을 가질 수 있습니다.
- none: 장식 없음 (링크의 기본 밑줄 제거 시 자주 사용)
- underline: 텍스트 아래에 밑줄 표시
- overline: 텍스트 위에 줄 표시
- line-through: 텍스트 중앙에 취소선 표시
CSS 클래스로 적용하기
여러 요소에 반복적으로 취소선을 적용해야 한다면, 인라인 스타일 대신 클래스를 정의해 사용하는 것이 더 효율적입니다.
<style>
.strike {
text-decoration: line-through;
}
</style>
<p class="strike">완료된 할 일</p>이처럼 text-decoration: line-through를 활용하면 간단한 코드 한 줄로 텍스트에 취소선을 손쉽게 추가할 수 있습니다.