progress tag

간만에 html tag 를 기록한다.

 

기존 개발시에 게이지 바 같은 폼을 만드려면 주로 input tag를 custom 해서 쓰거나

 

빈태그 두개를 css만 주고 채워질 게이지의 width만 prop으로 전달해서 눈속임의 게이지 바를 만들었었다.

 

오늘 새로운 태그를 하나 알게 되었는데 혁명이다...

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress

<progress> - HTML: Hypertext Markup Language | MDN

바로 progress tag! 

 

작업의 완료 정도를 value로 전달하고 max치만 조절 해주면 알아서 계산 후 게이지바를 채워준다.

 

대단쓰! input에서 스텝 정하고 value 전달하고 되도 않는 custom 삽질 했던거 생각하면 정말...하...

 

우선 최근 출석체크 페이지를 만들면서  만들었던 게이지 바를 손보았는데

 

기존 코드를 보면

 빈 태그 두개로 눈속임으로 게이지 바를 채우는 형태였다.

 

이거 전에는 input tag로 힘들게 커스터 마이징 했었는데!

 

자 바뀐 progress tag를 보면

 

음 엄청 간결해진건 아니지만 불필요하게 태그를 두개나 쓸 필요가 없고! 아주 편리하다.

 

input custom을 할때 생각하면 아오 ... ㅋㅋ 아무튼 이런 좋은 태그가 있다

 

참고로 자매품 meter태그도 있으니 알아두자 (애는 퍼센티지에따라 색상이 변한다)

https://developer.mozilla.org/ko/docs/Web/HTML/Element/meter