HTML <s> 태그, 취소선과 의미적 사용

HTML <s> 태그, 취소선과 의미적 사용

HTML에서 <s> 태그는 텍스트에 취소선을 적용하는 데 사용됩니다. 단순히 스타일링을 넘어서, 이 태그는 의미적으로 중요한 역할을 합니다. 이 글에서는 <s> 태그의 기본 사용법부터 다양한 실전 예제까지 상세히 알아보겠습니다.

 

 

목차

1. <s> 태그란?
2. 기본 사용법
3. 의미적 사용 사례
4. 스타일링과 CSS
5. 실전 예제
6. 결론

 

1. <s> 태그란?

<s> 태그는 텍스트에 취소선을 적용하는 HTML 요소입니다. 이 태그는 삭제되었거나 더 이상 유효하지 않은 텍스트를 나타내는 데 사용됩니다.

 

 

2. 기본 사용법

<s> 태그는 간단하게 사용할 수 있습니다. 텍스트를 <s> 태그로 감싸기만 하면 됩니다:

<s>취소선이 적용된 텍스트</s>

위 코드는 다음과 같이 렌더링됩니다:

취소선이 적용된 텍스트

 

 

3. 의미적 사용 사례

<s> 태그는 단순히 스타일링 목적으로만 사용되지 않습니다. 의미적으로 더 이상 유효하지 않거나 수정된 정보를 나타낼 때 사용됩니다. 예를 들어, 할인된 가격을 표시할 때 이전 가격을 <s> 태그로 감쌀 수 있습니다:

원래 가격: <s>100,000원</s> 현재 가격: 80,000원

위 코드는 다음과 같이 렌더링됩니다:

원래 가격: 100,000원 현재 가격: 80,000원

 

 

 

 

4. 스타일링과 CSS

<s> 태그는 기본적으로 취소선 스타일을 적용하지만, CSS를 사용하여 추가적인 스타일링이 가능합니다. 예를 들어, 취소선의 색상을 변경할 수 있습니다:

<style>
    s {
        color: red;
        text-decoration: line-through;
    }
</style>
<s>이 텍스트는 빨간색 취소선이 적용됩니다</s>
            

위 코드는 다음과 같이 렌더링됩니다:

이 텍스트는 빨간색 취소선이 적용됩니다

 

 

5. 실전 예제

<s> 태그를 실제 웹 페이지에서 사용하는 방법을 살펴보겠습니다. 다음은 제품 가격을 표시하는 예제입니다:

<h3>제품명: 최신 스마트폰</h3>
<p>원래 가격: <s>1,200,000원</s></p>
<p>할인 가격: 900,000원</p>
            

위 코드는 다음과 같이 렌더링됩니다:

제품명: 최신 스마트폰

원래 가격: 1,200,000원

할인 가격: 900,000원

 

 

6. 결론

<s> 태그는 텍스트에 취소선을 적용할 뿐만 아니라 의미적으로도 중요한 역할을 합니다. 삭제되었거나 더 이상 유효하지 않은 정보를 표시할 때 유용하게 사용할 수 있습니다. CSS를 활용하여 스타일링을 추가하면 더욱 다양한 용도로 활용할 수 있습니다. 이 가이드를 통해 <s> 태그의 사용법을 익히고 웹 페이지에 적용해 보세요.