HTML <del> 태그 (취소 표시선)

1. HTML del 태그란?
2. 기본 문법
3. 주요 특징
4. 사용 예제
   • 가격 할인 정보 표시
   • 텍스트 수정 내역 표시
   • 문서에서 삭제된 내용 표시
   • CSS를 활용한 del 태그 스타일링
5. del 태그와 s 태그의 차이점
   • 예제 비교
6. 사용 장점

 

• del 태그는 삭제된 텍스트를 표시하며, 기본적으로 취소선이 적용됨
• ins 태그와 함께 사용하여 수정된 내용을 명확하게 표시 가능
• s 태그와의 차이: del 태그는 문서에서 삭제됨, s 태그는 유효하지 않음
• CSS와 함께 사용하여 삭제된 텍스트를 더 눈에 띄게 변경 가능

 

---

 

HTML del 태그란?

del 태그는 문서에서 삭제된 내용을 표시할 때 사용하는 HTML 태그입니다. 기본적으로 취소선(strikethrough, 가로줄)으로 표시되며, 브라우저와 검색 엔진은 이 태그를 통해 해당 텍스트가 삭제되었음을 인식할 수 있습니다.

 

---

 

기본 문법

<p>정가: <del>₩50,000</del> 할인 가격: ₩40,000</p>

del 태그를 사용하면 텍스트에 취소선이 적용되며, 해당 정보가 더 이상 유효하지 않다는 의미를 전달할 수 있습니다.

 

---

 

주요 특징

• 삭제된 텍스트를 표시하는 용도로 사용
• 브라우저에서 기본적으로 취소선(strikethrough) 스타일 적용
• 검색 엔진이 해당 부분이 삭제된 텍스트임을 인식할 수 있음
• CSS와 함께 사용하여 스타일 커스터마이징 가능

 

---

 

사용 예제

💡 가격 할인 정보 표시

🌈 예제 코드:

<p>이전 가격: <del>₩100,000</del> 현재 가격: ₩80,000</p>

✅ 실행 결과:

이전 가격:

₩100,000

현재 가격: ₩80,000

가격이 할인되었음을 시각적으로 강조할 수 있습니다.

 

💡 텍스트 수정 내역 표시

🌈 예제 코드:

<p>이벤트 기간은 <del>2024년 3월 1일</del> <ins>2024년 3월 5일</ins>까지입니다.</p>

✅ 실행 결과:

이벤트 기간은

2024년 3월 1일2024년 3월 5일

까지입니다.

del 태그로 삭제된 날짜를 표시하고, ins 태그로 새로운 날짜를 강조할 수 있습니다.

 

💡 문서에서 삭제된 내용 표시

🌈 예제 코드:

<p>고객센터 운영 시간: <del>오전 9시 ~ 오후 6시</del> (현재 운영 중지)</p>

✅ 실행 결과:

고객센터 운영 시간:

오전 9시 ~ 오후 6시

(현재 운영 중지)

고객센터 운영 시간이 변경되었거나 종료되었음을 강조할 때 유용합니다.

 

💡 CSS를 활용한 del 태그 스타일링

🌈 예제 코드:

<style>
  del {
    color: red;  /* 글자색 빨간색 */
    text-decoration: line-through; /* 취소선 */
    font-weight: bold; /* 볼드 처리 */
  }
</style>

<p>이전 가격: <del>₩50,000</del> → 현재 가격: ₩40,000</p>

CSS를 사용하여 삭제된 텍스트를 더 눈에 띄게 변경할 수 있습니다.

 

---

 

del 태그와 s 태그의 차이점

태그	차이점
del	문서에서 삭제된 내용을 의미 (검색 엔진이 삭제된 내용으로 인식)
s	더 이상 유효하지 않거나 무효화된 텍스트를 의미 (역사적인 이유로 표시)

 

💡 예제 비교

🌈 예제 코드:

<p>정가: <del>₩50,000</del> 할인 가격: ₩40,000</p>
<p>이 상품은 <s>한정판</s>으로 판매되었습니다.</p>

✅ 실행 결과:

정가:

₩50,000

할인 가격: ₩40,000

이 상품은 한정판으로 판매되었습니다.

del 태그는 삭제된 정보, s 태그는 유효하지 않은 정보를 나타냅니다.

 

---

 

사용 장점

• 가격 할인 정보 표시 (이전 가격 vs 현재 가격)
• 수정된 텍스트 강조 (기존 정보 vs 새로운 정보)
• 삭제된 문서 내용 표시 (예: 운영 종료, 계약 변경 사항)
• 검색 엔진(SEO)에서 삭제된 텍스트를 인식하도록 할 때

 

---

 

• HTML dd 태그 (설명 기능)
• HTML datalist 태그 (자동 완성 추천 기능)
• HTML data 태그 (SEO 및 데이터 처리)