progress tag

HTML

LEETAEEON 2022. 1. 17. 21:19

간만에 html tag 를 기록한다.

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

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

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

<progress> - HTML: Hypertext Markup Language | MDN

HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

developer.mozilla.org

바로 progress tag!

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

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

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

기존 코드를 보면

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

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

자 바뀐 progress tag를 보면

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

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

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