앱 만들기/HTML5

<ins> , <del>태그 예제

나도 처음이야 2023. 5. 4.

웹 페이지에서 특정 글자를 추가 했다는 의미 와 특정 글자를 삭제 했다는 것을 표현하고 싶을때

<ins> , <del> 태그를 사용할 수 있습니다.

위 처럼, 강아지 라는 글자가 새롭게 들어가서 강조됨을 나타내고 자 할때

<ins> 태그를 사용하며 브라우저에서는 밑줄로 새로 들어간 글자이며 강조한다는 의미로 밑줄을 그어 줍니다.

위 코드의 예제는 하기와 같습니다.

<body>
  <p>고양이는 일반적으로 매우 귀엽습니다.</p>
  <p>그러나 <ins>강아지</ins>도 매우 귀여울 수 있습니다!</p>
</body>

추가로, <ins> 태그는 <del>태그와 같이 사용될 수도 있습니다.

<del>태그는 삭제된 텍스트를 의미 합니다. <ins>태그와 같이 사용한다면 특정 글자는 삭제되고, 특정 글자는 삽입 된다는 표현을 웹페이지 에 할 수 있습니다. 예를 들면 하기와 같습니다.

<body>
  <p>예전에는 <del>순대국밥</del>을 좋아했지만, 이제는 <ins>김치찌개</ins>를 더 좋아합니다.</p>
</body>

<del> 로 글자 삭제를 표현 하고,

<ins> 로는 삭제된 글자 대신 특정 글자가 추가됨을 표현 할 수 있습니다.

글자 삽입 과 삭제에 관련된 시멘틱 태그 ins, del 예제를 만들어 보았습니다

감사합니다.

댓글