[HTML] 프로그래스바 1분만에 만들기

5년전 쯤에 볼륨조절 기능을 만들기 위해 CSS로 개고생한 적이 있다.

이 HTML 태그가 좀 일찍 나왔더라면 굉장히 쉽게 했었을텐데..

바로 Progress...

거두절미하고 바로 코드와 시연에 들어가겠다. 

 

Progress

<label for="volumn">Volumn</label>
<progress id="volumn" max="100" min="0" value="70">70%</pregress>

 

Volumn : 70%

(브라우저에 따라 보이는 디자인 형태가 다름)

 

이 얼마나 우아하고 아름다운 코드길이와 결과물이던가

물론 브라우저마다 보이는게 달라서 B2C 사이트에서는 활용가능성이 떨어질 수 있지만

관리자페이지 등에서는 손쉽게 구현하고 활용하기 좋은 것 같다. 

 

하지만 여기에 이래저래 기능을 추가하고 싶은 부분이 있어

더 많은 속성으로 비슷한 기능을 제공해주는 HTML 태그가 또 있다.

바로 Meter 

이것도 바로 코드와 시연으로 들어가자

 

Meter

<label for="fuel">Fuel level : </label>

<meter id="fuel"
	min="0" max="100"
    low="33" high="66" optimum="80"
    value="50"
>at 50/100
</meter>

 

Fuel level : at 50/100

(마찬가지로 브라우저에 따라 디자인 형태가 다름)

 

기능은 progress와 똑같은데 다만 meter에서는 컨트롤할 수 있는 속성이 더 많다.

min,max,value는 progress와 동일하고 이름만 봐도 무엇을 의미하는지 아는 속성이다.

 

추가적인 속성에 대해 알아보면 

low,hight,optimum -> meter 바의 색상이 바뀐다. 즉 위험도와 안정도 등을 표기할 수 있다. 

위의 코드에서 value만 바꿔서 보면 

 

Fuel low level : at 50/100 Fuel high level : at 50/100 Fuel optimum level : at 50/100

 

이렇게 속성값만으로 표현할 수가 있다.

(아름다운 자태다)

 

 

추가로 form 을 연결할 수 있는 form 속성도 있으니 mdn 같은 곳에서 추가적으로 알아보면 좋을 듯 싶다.