HTML 삭제된 텍스트

소개

HTML del 태그는 문서에서 삭제된 텍스트를 나타내는 데 사용됩니다. del 태그를 사용하면 삭제된 텍스트를 가로선으로 표시할 수 있습니다. 이 랩에서는 HTML del 태그를 사용하여 가로선 텍스트를 만드는 방법을 안내합니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

가로선 텍스트 만들기

시작하기 전에 index.html 이라는 HTML 파일을 만듭니다. 이 파일에서 HTML del 태그를 사용하여 가로선 텍스트를 만들 것입니다.

가로선 텍스트를 만들려면 다음 단계를 따르세요:

1. 코드 편집기에서 index.html 파일을 엽니다.

2. 가로선을 표시하려는 텍스트에 HTML del 태그 (<del>)를 추가합니다.

   <p>The <del>quick</del> brown fox jumps over the lazy dog.</p>
   

   위의 예에서 quick 단어는 가로선으로 표시됩니다.

3. index.html 파일을 저장하고 브라우저에서 엽니다.

HTML del 태그의 속성 사용

HTML del 태그에는 두 가지 중요한 속성인 'cite'와 'datetime'이 있습니다. 이 단계에서는 이러한 속성을 사용하는 방법을 살펴보겠습니다.

1. Cite 속성 추가 - 삭제된 텍스트를 설명하는 문서의 URL 을 제공하려면 Cite 속성을 사용합니다.

   <p>
     <del cite="http://www.example.com/reason-for-deletion.html"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>
   

2. Datetime 속성 추가 - 텍스트가 삭제된 시간을 나타내려면 Datetime 속성을 사용합니다.

   <p>
     <del datetime="2022-09-03T17:12:02Z"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>
   

삽입된 텍스트와 함께 가로선 텍스트 만들기

웹 페이지에서 텍스트를 삭제할 때, 종종 그 자리에 다른 텍스트를 삽입하고 싶을 수 있습니다. 이 단계에서는 ins 태그를 사용하여 삽입된 텍스트를 표시하는 방법을 살펴보겠습니다.

1. 코드 편집기에서 index.html 파일을 엽니다.

2. 삭제된 텍스트를 대체하는 삽입된 텍스트에 HTML ins 태그를 추가합니다.

   <p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>
   

   위의 예에서 'quick' 단어는 가로선으로 표시되고, 'brown'은 삽입된 텍스트로 표시됩니다.

HTML del 태그에 CSS 스타일 추가

HTML del 태그의 기본 CSS 스타일은 line-through입니다. 요구 사항에 따라 CSS 스타일을 수정할 수 있습니다.

1. del 태그의 기본 스타일을 변경하려면 다음 CSS 코드를 HTML 파일에 추가합니다.

   <style>
     del {
       color: red;
       text-decoration: line-through;
     }
   </style>
   

위의 예에서 del 태그의 색상은 빨간색으로 변경되었습니다.

요약

HTML del 태그를 사용하여 가로선 텍스트를 만드는 것은 쉽습니다. 이 랩에서는 HTML del 태그를 사용하여 가로선 텍스트를 만들고, del 태그에 속성을 추가하고, 삽입을 위해 ins 태그를 사용하고, del 태그의 CSS 스타일을 수정하는 방법을 배웠습니다.