티스토리 뷰

HTML

[HTML] <s>

<s>

<s> 요소는 텍스트에 취소선을 나타냅니다. 더 이상 텍스트와 관련이 없거나 적절하지 않은 것을 나타낼 때 사용합니다. 문서 편집을 위한 텍스트 수정은 <del> 또는 <ins> 태그를 사용합니다.


<s>

<s> 태그는 정확하지 않거나 올바르지 않은 텍스트를 정의합니다.

정의(Definition)

  • <s> 요소는 텍스트가 정확하지 않고, 관련성이 없는 내용을 표시하는데 사용합니다.
  • 문서를 편집하는 경우라면 <del> 태그와 <ins> 태그를 사용합니다.
  • <s> 태그는 주로 할인된 가격에 표시합니다.
  • 단순하게 취소선을 보여주고 싶다면 text-decoration:line-through;을 통하여 설정할 수 있습니다.

크로스브라우징(CrossBroswing)

  • HTML4에서는 취소선으로 사용했지만, HTML5에서는 정확하지 않고, 관련성이 없는 텍스트 표현으로 변경되었습니다.

비교(Compare)

  • 문서에서 삭제된 텍스트틀 표시하려면 <del> 태그를 사용합니다.
  • 문서에서 삽입된 텍스트를 표시하려면 <ins> 태그를 사용합니다.
  • 정확하지 않고, 관련성이 없는 텍스트를 표시하려면 <s> 태그를 사용합니다.

Sample1

텍스트와 관련이 없거나 적절하지 않은 것을 나타낼 때 사용하는 예제입니다.

결과

스터디 인원은 이번 주까지 모집합니다.

이번주 인원 모집이 완료되었습니다.

html
<p><s>스터디 인원은 이번 주까지 모집합니다.</s></p>
<p>이번주 인원 모집이 완료되었습니다.</p>

Sample2

새로운 판매 가격 표시하고 예전 가격은 적합하지 않는 텍스트로 보여주는 예제입니다.

결과

[럭키딜] GAP 스테비 후무사 자두 2kg

한 박스에 14000원

지금은 단지 9,900원

html
<p>[럭키딜] GAP 스테비 후무사 자두 2kg</p>
<p><s>한 박스에 14000원</s></p>
<p><strong>지금은 단지 9,900원</strong></p>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<s> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML5

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼