HTML5를 사용한 취소선

9369 단어 html programming webdev beginners

CSS는 스타일을 지정하는 데는 좋지만 콘텐츠의 의미를 제공하는 데는 그다지 좋지 않습니다. 이것이 바로 HTML 시맨틱 태그의 목적입니다. 콘텐츠에 취소선을 그을 때 일반적으로 그렇게 하는 이유가 있습니다. 그리고 그 이유는 적절한 HTML 태그를 사용하여 설명할 수 있습니다. <del> 또는 <s>를 사용하여 통신하고 코드에 의미론적 의미 부여 🙌

<s>Text no longer relevant</s>

Text no longer relevant

<del>Text removed from document</del>

~~Text removed from document~~

<s> 대 <델>

예, 둘 다 취소선입니다. 그러나 내용에 대해 다른 의미를 전달합니다. 따라서 서로 교환할 수 없습니다. 달성하려는 것을 반영하는 것을 선택하고 싶습니다. 정의부터 시작하겠습니다.

<들>

Use this when you are trying to represent things that are no longer relevant or not longer accurate.

✅ 이에 대한 좋은 예는 가격 할인입니다.

<p><s>$100</s></p>
<p>$999.99</p>

On sale!

$100
$899

❌ 그러나 문서 편집을 나타낼 때 이 태그를 사용해서는 안 됩니다. 그것이 <del>가 들어오는 곳입니다.

<델>

Use this when you want to indicated something is removed from the document

✅ 이에 대한 좋은 예는 Todo List입니다.

<p>TODO</p>

<ul>
  <li><del>Get a Job</del></li>
  <li>Become a Senior Developer</li>
</ul>

TODO

~~Get a Job~~

Become a Senior Developer

규칙

사용할 것을 기억하는 방법은 다음과 같습니다. 콘텐츠가 삭제된 항목을 나타내면 <del> 를 사용하십시오. 그리고 다른 모든 경우에는 <s> 👍를 사용하십시오.

<ins>와 함께 <del> 사용

여기에서 제가 생각하기에 <del>이 정말 빛납니다. <ins>에 대해 페어링하고 함께 사용하여 문서에서 발생한 변경 사항을 추적하고 기록하는 인터페이스를 만들 수 있습니다.

예: 텍스트 편집기

<p>My name is
  <del>Smanta</del>
  <ins>Samantha</ins>
</p>

My name is ~~Smanta~~ Samantha

예: Git 인터페이스

<table>
  <tr>
    <td><del>+ function TEA() {</del></td>
    <td><ins>- function tea() {</ins></td>
  </tr>
</table>

+ ~~function TEA(){~~- function tea(){

<스트라이크>

<strike> 태그를 본 적이 있을 것입니다. 이것은 실제로 HTML4에서 더 이상 사용되지 않는 이전 태그입니다. HTML5에 도입된 보다 의미상 적절한 <s> 및 <del> 태그로 대체되었습니다.
<del> 및 <s>는 Internet Explorer에서도 꽤 잘 지원됩니다. 일부 브라우저는 여전히 <strike> 태그를 지원할 수 있지만 이를 피하는 것이 좋습니다 🙅‍♀️

접근성 문제

불행하게도 이러한 특정 태그는 대부분의 스크린 리더에서 읽을 수 없습니다. 그러나 ::before 및 ::after 속성을 사용하여 발표할 수 있습니다. 그러나 일부 사람들은 장황함을 만드는 콘텐츠 발표를 의도적으로 비활성화하므로 이 기술을 남용하지 않는 것이 가장 좋습니다 ✨
<del>

del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

/* MDN */

<s>

s::before, 
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}

/* MDN */