Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 태그 완벽 정리 – 취소선 텍스트 표시 방법

HTML의 <strike> 태그는 텍스트에 취소선(strikethrough)을 그려서 표시할 때 사용하는 요소입니다. 취소선이 적용된 텍스트는 가운데를 가로지르는 선과 함께 나타나며, 더 이상 유효하지 않거나 삭제된 내용임을 시각적으로 강조할 수 있습니다.

<strike> 태그 사용 시 주의사항

참고: <strike> 태그는 HTML5에서 공식적으로 지원되지 않는(deprecated) 요소입니다. 따라서 최신 웹 표준을 준수하려면 동일한 기능을 제공하는 <s> 태그나, 문서에서 삭제된 내용을 의미론적으로 표현하는 <del> 태그를 사용하는 것이 좋습니다.

<strike> 태그 예제

아래 예제를 통해 HTML에서 <strike> 태그를 실제로 구현하는 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Product Launch</h2>
   <p>The product is in <strike>beta testing</strike> launch mode.</p>
</body>
</html>

실행 결과

위 코드를 실행하면 "beta testing" 부분에 취소선이 그어진 상태로 화면에 출력됩니다.

위 예제에서는 <strike> 요소를 사용하여 다음과 같이 취소선 텍스트를 설정했습니다.

<p>The product is in <strike>beta testing</strike> launch mode.</p>

HTML5 대체 방법

앞서 언급했듯이 <strike> 태그는 더 이상 권장되지 않으므로, 아래와 같은 대체 요소를 활용하는 것이 바람직합니다.

  • <s> 태그: 더 이상 정확하지 않거나 관련성이 없는 텍스트에 취소선을 적용합니다.
  • <del> 태그: 문서에서 삭제된 내용을 나타내며, 스크린 리더 등 보조 기술에서도 의미가 전달됩니다.

예를 들어 위 예제를 HTML5 방식으로 작성하면 다음과 같습니다.

<p>The product is in <s>beta testing</s> launch mode.</p>

이처럼 최신 프로젝트에서는 <s> 또는 <del> 태그를 사용하여 취소선을 구현하고, 레거시 코드에서만 <strike> 태그를 참고하시기 바랍니다.