Html 태그 [picture, detail & summary, datalist, optgroup]

picture 태그

특정 화면 크기, 해상도에 따라 여러 이미지 지정이 가능

<picture>
    <source srcset="src/01.jpeg" media="(min-width:1200px)" type="image/jpeg">
    <source srcset="src/02.jpeg" media="(min-width:900px)" type="image/jpeg">
    <source srcset="src/03.jpeg" media="(min-width:500px)" type="image/jpeg">
    <img src="src/04.jpeg">
</picture>

---

detail & summary 태그

클릭으로 정보를 보여주고 숨기는 기능, css로는 [open] 이라는 CSS선택자를 통해 스타일 변경 가능

<details>
	<summary>클릭 전 볼 수 있는 영역</summary>
	<span>클릭 후에만 표시되는 영역</span>
</details>

 

details[open] {
	background-color: pink;
}

---

datalist 태그

자바스크립트 없이 auto complete(자동 완성 기능)

input의 list와 datalist의 id 명칭은 동일해야 된다.

<label for="movie">What is your favourite movie?</label>
<input type="text" list="movie-options">

<datalist id="movie-options">
  <option value="Dune">
  </option><option value="Dark waters">
  </option><option value="The Artist">
  </option><option value="The Avengers">
  </option><option value="Iron Man">
  </option><option value="Iron Man II">
  </option><option value="Matrix">
  </option>
</datalist>

---

optgroup 태그

select 그룹 묶음

<label for="showtimes">Showtimes</label>

<select id="showtimes" name="showtimes"> 
    <optgroup label="1PM">
        <option value="titanic">Twister</option> 
        <option value="nd">Napoleon Dynamite</option> 
        <option value="wab">What About Bob?</option> 
    </optgroup> 

    <optgroup label="2PM">
        <option value="bkrw">Be Kind Rewind</option> 
        <option value="stf">Stranger Than Fiction</option> 
    </optgroup> 
</select>