HTML에 대해 전문가라고 생각하시나요? 그럼 한 번 봐봐요!

div, span, a는 HTML을 사용할 때 흔히 사용되는 태그들이죠. 그러나 HTML에는 이보다 더 많은 태그가 있습니다. 개발자들이 잘 사용하지 않거나 알지 못하는 HTML 태그들이 많이 있어요. 경험이 많다고 하더라도 아직 알지 못하는 태그가 있을 수 있어요. 여기에서는 문서에서 찾은 잘 사용되지 않는 15개의 태그를 소개합니다.

1. q 태그

q 태그는 그 안의 텍스트가 짧은 인라인 인용문임을 나타냅니다.

2. meter 태그

meter 태그는 알려진 범위 내의 스칼라 측정값을 나타냅니다.

3. details 태그

details 태그는 사용자가 열거나 닫을 수 있는 공개 위젯을 만듭니다.

4. abbr 태그

abbr 태그는 줄임말 또는 머리 글자를 나타내며 호버 시 전체 설명을 제공합니다.

5. The mark tag

The mark tag highlights text for reference purposes.

6. The ruby tag

ruby 태그는 동아시아 문법에서 문자의 발음을 보여주는 루비 주석을 나타냅니다.

7. bdo 태그

bdo (Bi-Directional Override) 태그는 현재 텍스트 방향을 재정의합니다.

9. bdi 태그

bdi (Bi-Directional Isolation) 태그는 외부 텍스트와 방향이 다른 형식으로 지정된 텍스트 스팬을 격리합니다. 이는 주로 다른 방향으로 읽히는 언어의 텍스트 스니펫을 삽입하는 데 유용합니다.

10. wbr 태그

wbr (Word Break Opportunity) 태그는 그 외의 부분에 불가분의 문자열 내에서 줄 바꿈 가능성을 지정합니다.

11. keygen 태그

keygen 태그는 키 쌍을 생성하며 양식에서 안전한 인증을 가능하게 하는 데 사용됩니다. 이 태그는 HTML5에서는 사용되지 않는 것에 유의하십시오. 그러나 역사적인 목적이나 이전 프로젝트를 다룰 때 유용합니다.

12. dialog 태그

dialog 태그는 대화 상자나 검사기 또는 창과 같은 대화형 구성 요소를 나타냅니다.

13. figure 및 figcaption 태그

figure 태그는 삽화, 다이어그램, 사진, 및 코드 목록과 같은 독립적인 내용에 사용되며, figcaption 태그는 figure 요소에 캡션을 제공하기 위해 사용됩니다.

14. template 태그

template 태그는 페이지가 로드될 때 렌더링되지 않지만 JavaScript를 사용하여 나중에 인스턴스화할 수 있는 내용을 보유합니다.

<template id="my-template">
  <p>This is a template content.</p>
</template>
<script>
  const template = document.getElementById('my-template');
  const clone = document.importNode(template.content, true);
  document.body.appendChild(clone);
</script>

15. datalist 태그

datalist 태그는 input 요소에 대해 미리 정의된 옵션 목록을 제공합니다.

마지막으로

이 중 몇 가지 태그를 알고 계셨나요? 댓글 섹션에 적어주세요!

많은 개발자들이 놓칠 수도 있고 알려지지 않은 15가지 희귀 HTML 태그를 소개했어요. 이 태그들은 특정 작업을 위한 독특한 기능을 제공해요. 만약 이 글을 즐겁게 읽었다면 비슷한 주제나 다른 기술 튜토리얼에 대한 추가 글을 원하신다면 박수를 치거나 댓글을 남겨주세요. 이 글을 친구나 동료들과 공유해서 서로 도전하고 점수를 비교해보세요!

다음 글에서 뵙겠습니다...