신박한 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:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

MDN HTML <datalist>