s element - by. UXKM

요약 설명

<s> 요소는 텍스트에 취소선(strikethrough)을 적용하는 비시맨틱 태그로, 더 이상 유효하지 않거나 변경되었음을 시각적으로 나타낼 때 사용됩니다.
예전 가격, 수정 전 정보, 폐기된 항목 등을 보여줄 때 적합하며, 의미보다는 시각적인 표시에 초점이 있습니다. 의미상 삭제된 콘텐츠를 표현하고자 할 경우에는 <del> 요소를 사용하는 것이 더 적절합니다.

주요 역할 및 특징

  1. 더 이상 유효하지 않은 콘텐츠 표시
    • <s>는 더 이상 유효하지 않은 텍스트나 수정된 내용을 나타냅니다.
    • 예: 할인 전 가격, 변경된 정책, 폐기된 정보 등.
  2. 시각적 효과
    • 텍스트에 취소선이 그어져 시각적으로 구분됩니다.
    • CSS를 사용해 취소선 스타일을 커스터마이징할 수 있습니다.
  3. 의미론적 사용
    • <s>는 단순히 스타일링이 아닌, 문맥적으로 "효력을 상실했거나 적용되지 않음"을 의미합니다.
    • 중요도가 낮거나 단순 스타일링이 목적이라면 <del>이나 CSS의 text-decoration을 사용할 수 있습니다.
  4. 다른 요소와의 관계

    <del>은 삭제된 콘텐츠를 나타내고, <s>는 삭제되거나 효력을 상실했지만 여전히 참고 목적으로 남아 있는 텍스트에 사용됩니다.

CSS 기본 값

<s> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<s> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

가격 할인 정보

폐기된 정보 표시

취소선과 의미 강조의 조합

접근성을 고려한 사용

주의사항

  • <s>는 단순히 취소선을 그리는 스타일링 요소가 아닙니다. 텍스트가 더 이상 유효하지 않음을 나타낼 때만 사용하세요.
  • <s>는 텍스트의 유효성이 변경되었음을 시각적으로 표현하는 데 적합하지만, 텍스트의 취소를 반드시 의미하는 것은 아닙니다.
    예를 들어, <del> 요소는 삭제된 내용을 더 명확하게 전달합니다.
  • 단순히 텍스트를 꾸미기 위해 취소선을 추가하려면 CSS의 text-decoration: line-through;를 사용하는 것이 더 적합합니다.

<s> vs <del>

  • 특징
  • <s>
  • <del>

  • 의미(Semantics)

    더 이상 유효하지 않거나 정확하지 않은 정보를 표시.

    문서에서 삭제된 내용을 명시.

  • 의도(Intention)

    문맥적으로 여전히 참고할 가치가 있는 경우 사용.

    문서에서 의미적으로 제거된 텍스트를 표시.

  • 기본 스타일

    브라우저에서 기본적으로 취소선(strike-through) 표시.

    브라우저에서 기본적으로 취소선(strike-through) 표시.

  • 접근성(Accessibility)

    보조 기술에서 특별한 의미를 부여하지 않음.

    보조 기술에서 "삭제된 텍스트"로 인식.

  • 사용 사례

    할인된 가격, 오래된 데이터, 수정된 정보.

    텍스트 변경 기록, 버전 관리, 삭제된 정보.