특이한 HTML 태그 (details-summary, dialog, sub, sup, input[type], progress, meter)

1. details / summary

hello

world

역할:

• 사용자가 접었다 폈다 할 수 있는 인터랙티브한 토글(접힘/펼침) 위젯을 제공합니다.
• <details> 요소 내부에 <summary> 요소를 포함하여, 제목(요약)을 클릭하면 내용이 펼쳐지거나 접힙니다.

HTML 예시:

<!-- 접었다 폈다 할 수 있는 details/summary 예시 -->
<details>
  <summary>hello</summary>
  world
</details>

CSS 예시:

details {
  width: 100px;
  border: 1px solid black;
}

summary {
  /* 기본 마커 대신 커스텀 텍스트(여기서는 단순 예시) */
  list-style-type: 'click v ';
}

/* 열렸을 때 패딩 추가 */
details[open] {
  padding: 5px;
}

/* 열렸을 때 summary의 marker 변경 */
details[open] summary {
  list-style-type: 'click ^ ';
}

 

─────────────────────────────

2. dialog (모달 창)

modal창 열고 닫기

역할:

• 사용자가 모달(dialog) 형태의 팝업 창을 열거나 닫을 수 있도록 합니다.
• 브라우저 내장 메서드인 showModal()과 close()를 사용하여 동작을 제어합니다.

HTML 예시:

<!-- 모달(dialog) 창 정의 -->
<dialog id="modal">
  <p>modal창 열고 닫기</p>
  <button onclick="document.getElementById('modal').close()">닫기</button>
</dialog>

<!-- 모달 열기 버튼 (버튼 클릭 시 모달이 열림) -->
<button class="open" onclick="document.getElementById('modal').showModal()">
  열기
</button>

참고:

• ESC키로도 닫히도록 브라우저 기본 동작이 적용될 수 있습니다.

─────────────────────────────

3. sub / sup (아랫첨자 / 윗첨자)

H₂O

x²

역할:

• <sub>: 화학식, 각주 등에서 아래쪽에 위치하는 텍스트를 나타냅니다.
• <sup>: 수식, 지수 등에서 위쪽에 위치하는 텍스트를 나타냅니다.

HTML 예시:

<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup></p>

용도:

• 화학식, 수학식, 인용 표기 등에서 자주 사용됩니다.

─────────────────────────────

4. input[type] (입력 필드 종류)

input type="range"

역할:

• 사용자의 다양한 입력을 받을 수 있도록 여러 타입의 <input> 요소를 제공합니다.
• 기본 텍스트 입력 외에도 날짜, 시간, 색상, 체크박스, 라디오, 파일 선택, 범위 슬라이더 등 다양한 형태를 지원합니다.

HTML 예시:

<!-- 기본 텍스트 입력 -->
<input type="text" />

<!-- 날짜 및 시간 관련 입력 -->
<input type="datetime-local" />
<input type="month" />
<input type="time" />

<!-- 색상 선택 -->
<input type="color" />

<!-- 선택형 입력 -->
<input type="checkbox" />
<input type="radio" />

<!-- 파일 업로드 -->
<input type="file" />

<!-- 범위 슬라이더 -->
<input type="range" />

추가:

• <datalist>를 사용하면 자동완성 옵션을 제공할 수 있습니다.

<input type="text" list="datalist" />
<datalist id="datalist">
  <option value="Option 1"></option>
  <option value="Option 2"></option>
</datalist>

─────────────────────────────

5. progress

역할:

• 작업의 진행 상태(진행률)를 시각적으로 나타냅니다.
• max 속성으로 최대값, value 속성으로 현재 진행 상태를 나타냅니다.
• value가 없으면 진행이 불특정(계속 움직이는 인디터미넌트 상태)으로 표시됩니다.

HTML 예시:

<!-- 인디터미넌트(progress bar가 애니메이션되며 계속 진행 중임을 표시) -->
<progress max="100"></progress>

<!-- 진행률 30% 표시 -->
<progress max="100" value="30"></progress>

 

─────────────────────────────

6. meter

역할:

• 특정 범위 내에서 현재 값의 정도를 게이지 형태로 시각화합니다.
• min, max 속성 외에도 low, high, optimum 속성을 설정하여 값에 따라 색상이나 스타일 변화(브라우저 기본 스타일)를 줄 수 있습니다.

HTML 예시:

<meter value="1" min="0" max="10" low="3" high="5" optimum="7"></meter>

 

설명:

• min / max: 측정 범위
• low / high: 낮은/높은 값의 경계
• optimum: 이상적인 값
• 브라우저에 따라 값의 위치에 따라 색상이 달리 표현될 수 있습니다.