HTML Tag (progress, meter, summary, picture, datalist)

progress, meter

• JS없이 태그만 가지고 prgress bar를 구현할 수 있다.
• meter 태그는 값이 높고 낮음에 따라 색상이 변함 (progress 태그보다 더 많은 옵션을 갖는다)

  <progress id="progress" value="50" min="0" max="100"></progress>

  <meter id="meter" low="20" high="65" optimum="15" value="50" min="0" max="100"></meter>

summary

• 토글목록을 만드는 태그

  <detail>
  <summary>오늘 점심메뉴는?</summary>
  <span>김치찌개</span>
  </detail

picture

• 모바일, 데스크탑 등 다양한 환경에서의 이미지 형식을 통일시켜줌

  <picture>
  <source srcset="src_01.jpeg" media="(min-width : 1200px)" />
  </picture>

datalist

• JS없이 auto complete 기능을 구현하게 해주는 태그
• input 태그의 list옵션과 datalist 태그의 id는 항상 같게 설정한다.

  <input type="text" list="movie-option" />
  <datalist id="movie-option">
  <option value="Avengers" />
  <option value="Avengers2" />
  <option value="Avengers3" />
  <option value="Avengers4" />
  </datalist>