개발자 99%가 모르는 신박한 HTML 태그 5개!

개발자 99%가 모르는 신박한 HTML 태그 5개!

 

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

 

요약:  문은진

 

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(자동완성)을 가능하게 함