유용한 HTML - 로딩바

오늘의 블로그는 아래 개발자 99%가 모르는 신박한 HTML 태그 5개! -노마드 코더를 토대로 작성한 글입니다.

유튜브에서 강의를 들으면서 노마드코더의 영상을 보다가 정말 유용하다고 생각해서 정리를 한다.

1. progress 태그

progress tag - MDN

progress 태그는 아래와 같이 우리가 흔히 아는 로딩 바를 만들어준다.

progres 태그에는 두 가지 속성을 가지고 있다.
max와 value이다.

• max: progress요소가 나타내는 작업에 필요한 작업량을 지정할 수 있다. 반드시 0보다 커야하고 기본값은 1이다.
• value: progress요소가 나타내는 작업을 완료한 양을 나타낸다. max 특성을 지정한 경우 0이상 max이하, 지정하지 않았으면 0이상 1이하여야한다. value 특성이 없으면 위의 예시와 같이 종료 시점을 예측할 수 없음을 나타낸다.

2. meter 태그

meter tag - MDN

meter 태그는 쉽게 progress 태그의 더 발전된 형태라고 보면 된다.
progress 태그에서 시각적으로 더 발전해서 유저에게 진행상황을 바의 위치와 함께, 색을 통해 보여준다.

meter 태그는 progress 태그에서 가지고 있던 max와 value 요소를 기본적으로 포함하고 추가적인 요소도 가지고있다.

• min: 측정 범위의 최솟값이다. 기본값은 0이고 지정할 경우 max특성 미만이어야 한다.

• low: 측정 범위 중 낮은 범위의 값이다.

• high: 측정 범위 중 높은 범위의 최솟값이다.

• optimum: 이상적인 값이다. low 와 hight 특성을 함께 사용한 경우, optimum이 어느 범위가 이상적인지 나타낸다.

• form: meter와 연결할 form요소이다.

MDN에 들어가면 더 자세하게 볼 수있지만, 설명이 너무 장황하고 어렵게 되어있어서 직접 값을 변경해 보면서 작성해 보는 것을 추천한다.