[HTML]CSS / JS를 적게쓸 수 있게 도움을 주는 태그들

어제 유튜버 '노마드코너'님의 유튜브를 보다가 발견한 [개발자 99%가 모르는 신박한 HTML 태그 5개!] 라는 영상을 봤다.

회사에서 진행중인 MBP프로젝트를 하면서 js로 구현해야하나.. 라이브러리를 붙여야하나 고민했던 부분이 있었는데 뒤늦게 이런 태그들을 발견하게 되어 다음에 리팩토링할 때 써먹어볼 겸 소개해보려 한다.

😊 CSS를 적게 작성하는데 도움을 주는 태그

1. progress 태그
   : 현재 진행상태를 알려주기 좋은 태그

입력

<ul>
   <li>다운로드 진행중 :<progress value="50" max="100">50% 진행중 </progress></li>
   <li>다운로드 진행중 :<progress value="20" max="100"> 20%진행중</progress></li>              
</ul>

결과

이렇게 생긴 태그인데 로딩바를 대신 할 수 있는데다가 딱 한 줄의 태그로 대신할 수 있어 너무 간편하다:) 그리고 모든 브라우저에서 지원이 된다(IE10이상)

😍 JS로의 기능을 수행 할 수 있는 태그

1. detail, summary 태그
   : 유저의 클릭으로 정보를 보여주고, 숨기는 패턴

   입력

   <details>
   	<summary>클릭 전 보여질 내용</summary>
   	<span>클릭 후 보여질 내용</span>
   </details>

   결과
   
   

   이 태그는 open이라는 CSS선택자를 통해 스타일 변경이 가능하다.
   
   
   
   

2. input type "week", "time"
   : 달력을 만들 때 편리한 input type

   입력

   <input type="week"></input>
   <input type="time"></input>

   결과
   
   

   윈도우 환경에 따라 위젯의 형태는 달라질 수 있다.
   
   
   

3. picture태그
   : 각기 다른 버전의 이미지를 표시가능. 미디어쿼리를 이용한다.

   ex)PC에서는 그림이 고화질로 웹에서 보여지나, 모바일에서는 빠른 실행.
   속도를 위해 저사양으로 보여지도록 설정가능.

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

이 태그들이 센세이션했던 건 개발자의 시간도 단축시켜 주지만 사용자의 시간도 단축시켜 줄 수 있어서 보인다는 것이다.