당신이 몰랐던 특이한 HTML 태그와 속성들

숨겨진? 몰랐던 보석들

접근성에 관심을 두지 않고 모던 웹 프레임워크를 마크업 하다 보면 <div>나 <span> 이외의 태그는 많이 사용할 일이 없는데요,
mdn을 뒤적이다 보면 몰랐던 특이한 태그와 속성들이 있습니다.

이번 글에서는 특정 상황에서 매우 유용하게 쓰일 수 있지만, 잘 알려지지 않은 태그와 속성들을 알아보겠습니다.

1. <details>와 <summary>: JS 없이 아코디언 UI 만들기

아코디언 UI를 만들 때, 보통은 JavaScript를 사용해 구현하곤 합니다.
하지만 HTML만으로도 아코디언 UI를 만들 수 있다는 사실, 알고 계셨나요?

<details>
  <summary>더 보기</summary>
  <p>이 내용은 접혔다가 펼쳐질 수 있습니다.</p>
</details>

• <details>: 사용자가 클릭하면 내용을 보여주거나 숨길 수 있는 컨테이너입니다.
• <summary>: <details>의 제목 역할을 합니다.

CSS로 스타일링도 가능합니다.

details[open] {
  background-color: #f0f0f0;
}

2. <datalist>: 입력 필드에 자동 완성 기능 추가

<input> 태그에 자동 완성 기능을 추가하고 싶을 때, 보통은 JavaScript나 라이브러리를 사용합니다.
하지만 <datalist>를 사용하면 아주 간단하게 자동 완성 기능을 구현할 수 있습니다.

<input type="text" list="suggestions" />
<datalist id="suggestions">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

요렇게

• <datalist>: 입력 필드에 제안 목록을 제공합니다.
• <option>: 제안할 항목들을 정의합니다.

3. <meter>와 <progress>: 진행 상태를 시각적으로 표현

진행 상태를 표시할 때, 보통은 <div>를 사용해 직접 스타일링하거나 라이브러리를 사용합니다. 하지만 HTML에는 이미 <meter>와 <progress>라는 태그가 있습니다.

<label for="disk-usage">디스크 사용량:</label>
<meter id="disk-usage" value="0.7">70%</meter>

<label for="file-upload">파일 업로드 진행률:</label>
<progress id="file-upload" value="50" max="100">50%</progress>

요렇게

디스크 사용량: 70%

파일 업로드 진행률: 50%

• <meter>: 특정 범위 내의 값을 표시합니다. (예: 디스크 사용량)
• <progress>: 작업의 진행 상태를 표시합니다.

HTML로만 만든 웹사이트에서나 볼 법한 스타일링이라 재밌습니다.

4. <output>: 계산 결과를 실시간으로 표시

폼 입력값을 기반으로 계산 결과를 표시할 때, 보통은 JavaScript를 사용합니다.
하지만 <output> 태그를 사용하면 더 직관적으로 구현할 수 있습니다.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="10"> +
  <input type="number" id="b" value="20"> =
  <output name="result" for="a b">30</output>
</form>

요렇게

• <output>: 계산 결과나 사용자 입력에 대한 피드백을 표시합니다.
• for 속성: 어떤 입력 필드와 연결되어 있는지 지정합니다.

5. <dialog>: JavaScript 없이 모달 창 만들기

모달 창을 만들 때, 보통은 <div>를 사용해 직접 스타일링하고 JavaScript로 열고 닫는 로직을 구현합니다.
하지만 HTML5의 <dialog> 태그를 사용하면 아주 간단하게 모달 창을 만들 수 있습니다.

<dialog id="modal">
  <p>모달입니다.</p>
  <button onclick="document.getElementById('modal').close()">닫기</button>
</dialog>

<button onclick="document.getElementById('modal').showModal()"><i>모달 열기 버튼</i></button>

• <dialog>: 모달 창을 정의합니다.
• showModal(): 모달 창을 엽니다.
• close(): 모달 창을 닫습니다.

이 태그는 기본적으로 스타일링이 제공되며, ::backdrop 가상 요소를 사용해 배경을 커스터마이징할 수도 있습니다.

마무리

오늘은 평소에 잘 쓰지 않았던 HTML 태그와 속성들을 살펴봤습니다.
실제로 사용할 일은 거의 없겠지만요…

하지만 이런 태그들을 잘 활용하면,
JavaScript 의존도를 줄일 수 있고,
코드를 더 간결하게 작성할 수 있으며,
사용자 경험을 향상시킬 수 있을 것 같아요.

다음 번 프로젝트에서 한번 활용해보는 건 어떨까요?