[HTML] 신기한 태그들.

인터넷을 하다보면 기존에 흔히 보는 막대 그래프들을 볼 것이다.

그것은 보통 프로그레스 태그일 것이다.

하지만 이것을 쓰면 귀찮게 css도 컨트롤해야한다.

<Progress value="10" min="0" max="100"></Progress>

하지만, 동일한 기능을 갖고 있지만 css까지 포함한 신기한 태그들이 있다.

그것은 바로 meter 태그. 자동으로 바의 컬러가 바뀐다.

이렇게 사용하면 진짜 편리함.

<meter min="0" max="100" low="30" high="" 70 optimum="15" value="90"></meter>

 

details태그. 접는 기능.

대부분 접는 기능은 js로 사용할 것이다.

하지만 해당 detail 태그를 쓰면 자동으로 해당 부분을 만들어준다.

<details>
	<summary>제목</summary>
    <p>내용</p>
</details>

 

마지막으로 picture 태그

해당 부분은 media 쿼리를 내장해서 자동적으로 크기에 맞춰 로딩하도록 하게 만들어준다.

<picture>
	<source srcset="1.jpg" media="(min-width:1700px)" />
    <source srcset="2.jpg" media="(min-width:1357px)" />
    <source srcset="3.jpg" media="(min-width:800px)" />
    <source srcset="4.jpg" media="(min-width:400px)" />
    <img src="5.jpg" /> // 이 태그는 디폴트인데, 해당 태그들이 지원되지 않는 브라우저의 경우 사용된다.
</picture>

이게 좋은 점이 여러개를 로딩하고 있는 것이 아니라 단 한개만 로딩 시킴.