웹 개발을 위한 HTML 가이드 18편 - 텍스트의 추가, 제외 태그

텍스트 관련 태그

• 굵기와 기울기 태그(b, strong, i, em)
• 개행과 가로줄 태그(br, hr)
• 윗첨자와 아랫첨자 태그(sup, sub)
• 텍스트의 추가, 제외 태그(ins, del)현재 글
• 취소선(s)과 밑줄 표현
• 인용 태그(q, blockquote)
• 하이라이트 태그(mark)
• small 태그
• code, pre 태그
• 번외 - 탈출문자 사용하기
• 그 외의 텍스트 태그들

개요

어떤 누군가는 문서가 버전이 올라갈 때마다 어떤 부분이 추가되었고 어떤 부분이 삭제되었는지 표시하고 싶을 수 있습니다. 이럴 때에는 텍스트의 추가와 삭제를 나타내는 태그를 이용하면 됩니다. 웹 개발을 위한 HTML 가이드 18편의 주제는 바로 텍스트의 추가와 삭제입니다. 그럼 바로 본론으로 들어가도록 합시다.

텍스트의 추가와 삭제

텍스트의 추가를 의미하는 태그는 ins태그입니다. 반대로 삭제를 의미하는 태그는 del태그입니다. 이름에서 볼 수 있듯이 ins태그는 insert의 약자이고 del태그는 delete의 약자입니다. 이 태그들은 텍스트의 변동사항을 표현할 때에 사용합니다.

텍스트 추가(ins)

<p><ins>추가된 내용</ins></p>

크게 보기 (새 창)

ins태그는 어떠한 텍스트에서 추가된 내용을 강조하고 싶을 때에 사용합니다. 브라우저에서의 기본적인 스타일은 위 이미지에 보이는 것처럼 밑줄이 그어진 상태로 나타나게 됩니다.

텍스트 삭제(del)

<p><del>삭제된 내용</del></p>

크게 보기 (새 창)

del태그는 그 반대로 삭제된 내용을 강조하고 싶을 때에 사용합니다. 브라우저의 기본적인 스타일은 취소선이 그어진 상태로 나타나게 됩니다.

두 태그 동시에 사용하기

이 두 태그는 동시에 사용할 수도 있습니다. 그냥 아래처럼 사용하면 됩니다.

크게 보기 (새 창)

위 이미지를 보면 추가된 부분과 삭제된 부분이 동시에 나타나 있어서 현재는 1993년 5월 16일로 수정 되었다라는 것을 의미하는 것이죠. 직업 사용할 일은 아마도 별로 없거나 아예 없을 수도 있지만 이런식으로 쓰는구나 라는 것만 이해하고 넘어가시면 됩니다.

공통으로 사용되는 속성

이 두 태그는 사용할 수 있는 속성이 있습니다. 속성은 문법을 설명한 이래로 세번째? 설명하는 것 같은데 태그의 기능을 추가하는 것들이라고 생각하면 됩니다.

사용할 수 있는 속성은 아래와 같습니다.

cite

속성값으로는 URL이 들어갑니다. 텍스트의 내용이 추가되었거나, 변경된 이유를 알 수 있는 출처를 적습니다.

datetime

속성값으로는 날짜포맷(YYYY-MM-DDThh:mm:ssTZD)이 들어갑니다. 텍스트의 내용이 추가되었거나, 변경되었을 때의 시간을 적습니다.

datetime속성의 경우는 속성의 값이 어려울 수 있는데, YYYY-MM-DD는 2021-04-02를 적으면 되고, T는 시간을 의미합니다. hh:mm:ss에는 시간을 적으면 됩니다. 20:30:00처럼 말이죠.

마지막의 TZD는 Time Zone Designator의 약자입니다. 웹은 전세계 사람들이 다 볼 수 있고, 지역마다 시간이 다르기 때문에 그리니치 표준시로 시간을 확정해야한다는 것입니다. 그리니치 표준시는 +09:00이나 -01:00과 같은 시간의 격차를 표현한 것을 말합니다. 한국 같은 경우엔 세계표준시에서 9시간이 더해진 시간을 사용합니다.

위의 설명에서 다 필요 없이 2021-04-02 부분만 적어도 상관없습니다. 하지만 위의 내용을 알아둬서 나쁠 것은 없기 때문에 기억해두면 좋을지도 모르겠습니다.

이번 글에서는 텍스트의 추가와 삭제를 다루는 태그에 대해서 알아봤습니다. 이번에 알아본 두가지의 태그는 사실 그렇게 많이 쓰는 것 같지는 않습니다. 저는 잘 안씁니다. 그러나 알아두는 것은 나쁜 게 아니기에 다뤄봤습니다. 이번 글의 내용은 여기까지입니다. 다음 글에서는 취소선과 밑줄 태그에 대해서 알아봅시다.

그럼 이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.