HTML 삽입 텍스트 배우기 - 웹 페이지 변경 사항 표시

소개

HTML 에서 <ins> 태그는 특정 텍스트가 웹 페이지에 삽입되거나 추가되었음을 나타내는 데 사용됩니다. 웹 문서 또는 웹 페이지에 대한 변경 사항이나 업데이트를 표시하는 데 유용합니다. 이 랩에서는 <ins> 태그의 사용법과 기능을 살펴봅니다.

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

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

기본 구문

<ins> 태그는 시작 (여는) 태그와 종료 (닫는) 태그가 필요합니다. 기본 구문은 다음과 같습니다.

<ins> Inserted text </ins>

예시

<ins> 태그의 사용법을 보여주는 예시를 살펴보겠습니다.

<!doctype html>
<html>
  <head>
    <title>Example of <ins> Tag</title>
  </head>
  <body>
    <p>HTML stands for Hypertext Markup Language.</p>
    <p>
      HTML is the basic building block of any webpage. It is used with CSS and
      Javascript to create interactive web pages.
    </p>
    <p><ins>HTML5 is the latest version of HTML</ins></p>
  </body>
</html>

이 예시에서는 두 개의 문단 텍스트가 있으며, 마지막 줄은 <ins> 태그 안에 있어 텍스트가 원래 텍스트에 삽입되거나 추가되었음을 보여줍니다.

속성 사용법

<ins> 태그는 특정 속성을 가지고 있지 않지만, 일반적인 전역 속성 (global attributes) 및 이벤트 속성 (event attributes) 과 함께 자주 사용되는 두 가지 속성을 가지고 있습니다. <ins> 태그와 함께 사용되는 두 가지 속성은 다음과 같습니다.

cite: 텍스트가 업데이트되거나 변경된 이유를 나타내는 URL 을 지정하는 데 사용됩니다.
datetime: 마지막 업데이트의 날짜와 시간을 텍스트로 지정하는 데 사용됩니다. datetime의 형식은 YYYY-MM-DDThh:mm:ssTZD입니다.

<p>
  <ins
    cite="https://en.wikipedia.org/wiki/HTML5"
    datetime="2022-09-15T08:00:00Z"
    >HTML5 is the latest version of HTML</ins
  >
</p>

기본 CSS 설정

기본적으로 대부분의 브라우저는 <ins> 태그에 대해 다음과 같은 CSS 설정을 사용합니다.

<style>
  ins {
    text-decoration: underline;
  }
</style>

요약

이 랩 (lab) 에서는 HTML 에서 <ins> 태그의 사용법과 기능에 대해 배웠습니다. <ins> 태그는 텍스트가 웹 페이지에 삽입되거나 추가되었음을 나타내는 데 사용됩니다. <ins> 태그의 기본 구문, 예시, 속성 및 기본 CSS 설정을 살펴보았습니다.