🏛 HTML:: 신박한 HTML 태그

알아두면 유용한, HTML 태그!

progress bar

✔️ <progress>

<progress max="100" value="70"></progress>

MDN HTML <progress>

✔️ <meter>

<meter min="0" max="100" low="33" high="66" optimum="80" value="30"></meter>

---

<meter min="0" max="100" low="33" high="66" optimum="80" value="50"></meter>

---

<meter min="0" max="100" low="33" high="66" optimum="80" value="85"></meter>

MDN HTML <meter>

---

토글 버튼?!

✔️ <details>

<summary> 와 함께 사용해야 한다

<details>
  <summary>클릭!!✨</summary>
  더 많은 내용을 볼 수 있어요! 👍
</details>

MDN HTML <details>

---

다양한 <input>

✔️ <input type='date'>

<input type="date" />

✔️ <input type='month'>

<input type="month" />

✔️ <input type='time'>

<input type="time" />

✔️ <input type='color'>

<input type="color" />

✔️ <input type='number'>

<input type="number" />

✔️ <input type='range'>

<input type="range" />

MDN HTML <input>

---

뷰포트에 반응하는 <picture>

<source> 와 함께 사용해야 함

<picture>
  <source media="(min-width: 1200px)" srcset="https://picsum.photos/800/600" />
  <source media="(min-width: 900px)" srcset="https://picsum.photos/800/600" />
  <source media="(min-width: 500px)" srcset="https://picsum.photos/800/600" />
  <img src="https://picsum.photos/800/600" alt="photos" />
</picture>

---

자동 완성 <datalist>

<input> tag의 id와 동일한 id를 <datalist> tag에 추가해야 함

Choose a flavor: