개발자를 희망하는 초보의 자기개발 이야기

del, ins, code, kbd 본문

프론트엔드(Front-end)/HTML

del, ins, code, kbd

클라우드아실 2022. 10. 12. 07:14
반응형

출처 : 위키백과

1. del, ins

<p>태양계의 행성은 수성, 금성, 지구, 화성, 목성, 토성, 천왕성, 해왕성, <del>명왕성</del>으로 구성한다.
  <ins cite="https://namu.wiki/w/명왕성" datetime="2006">명왕성은 행성 분류에서 제외되었다.</ins>
</p>

 : 삭제(delete)를 뜻하는 줄임말과 삽입(insert)을 뜻하는 줄임말의 태그입니다. 특정한 내용의 변경점을 추적하는데 사용할 수 있습니다.

del과 ins의 예시 이미지
del과 ins의 예시

1.1 cite

 : 변경점의 출처나 URL을 기재합니다. 

1.2 datetime

 : 변경이 발생한 일시. 시간 등을 지정합니다.

datetime 예시 이미지
<p> 속성에 title을 부여했을 때

2. code

<p>함수 <code>selectAll()</code>는 입력 필드의 모든 텍스트를 선택하므로,
사용자가 복사 혹은 삭제를 손쉽게 할 수 있습니다.</p>

 : 짧은 코드 조각을 나타내는 요소로 인라인 형태로 출력됩니다.

code 예시 이미지
출처 : mdn code

3.  kbd

<p>새로운 문서는 키보드 단축키
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>으로 만들 수 있습니다.</p>

 : 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 위의 예시와 같이 조합되는 단축키 전체를<kbd>로 한번 더 감싸도 되고, 바깥 <kbd>는 생략해도 됩니다.

kbd 예시 이미지
출처 : mdn kbd


정리

 : ins, del은 특정한 내용을 삽입하거나 삭제하면서 기록을 유지하고 싶을 때 유용한 요소가 될 것 같습니다.  kbd는 단축키를 기록할 때 유용하게 사용할 수 있습니다.

참고자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/del

 

<del> - HTML: Hypertext Markup Language | MDN

HTML <del> 요소는 문서에서 제거된 텍스트의 범위를 나타냅니다. 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. <ins> 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/ins

 

<ins> - HTML: Hypertext Markup Language | MDN

HTML <ins> 요소는 문서에 추가된 텍스트의 범위를 나타냅니다. <del> 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/code

 

<code>: 인라인 코드 요소 - HTML: Hypertext Markup Language | MDN

HTML <code> 요소는 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/HTML/Element/kbd

 

<kbd>: 키보드 입력 요소 - HTML: Hypertext Markup Language | MDN

HTML <kbd> 요소는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습

developer.mozilla.org

 

반응형

'프론트엔드(Front-end) > HTML' 카테고리의 다른 글

mark, small, sub, sup  (0) 2022.10.10
abbr, address, bdo  (0) 2022.10.10
figure, figcaption  (0) 2022.10.09
blockquote, q  (0) 2022.10.09