HTML 유용한 태그 정리(

미친듯한 성능

 

1. CSS를 적게 작성하는데 도움을 주는 태그
▶ progress 태그 : 현재 진행상태를 알려주기 좋은 태그
<progress value = "50" min = "0" max = "100"><progress>

2. JS로의 기능을 수행할 수 있는 태그
▶ detail,summary 태그 :유저의 클릭으로 정보를 보여주고. 숨기는 패턴
<details>
<summary>클릭 전 보여질 내용</summary>
<span>클릭 후 보여질 내용</span>
<details>
※open이라는 CSS선택자를 통해 스타일 변경가능

3. input type "week", "time" :달력을 만들 때 편리한 input type
※윈도우 환경에 따라 위젯의 형태는 달라짐

4. picture태그 : 각기 다른 버전의 이미지를 표시가능
ex)PC에서는 그림이 고화질로 웹에서 보여지나, 모바일에서는 빠른 실행
속도를 위해 저사양으로 보여지도록 설정가능

5. datalist태그 :  JS작성 없이 Auto complete(자동완성)을 가능하게함

 

참조:

https://www.youtube.com/watch?v=EMOlLLTAZMs