Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 태그의 value 속성 – 게이지 현재 값 설정 방법

HTML <meter> 태그의 value 속성이란?

<meter> 요소의 value 속성은 게이지(측정기)의 현재 값을 지정하는 데 사용됩니다. 이 속성은 필수(required) 속성으로, <meter> 요소를 사용할 때 반드시 함께 작성해야 합니다.

기본 문법

<meter value="num">

여기서 num은 부동소수점(floating-point) 숫자로 표현된 현재 값을 의미합니다.

value 속성 사용 예제

다음 예제는 <meter> 요소의 value 속성을 실제로 구현한 코드입니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
   <h2>결과</h2>
   <p>여학생 합격률 <meter min="0" low="0" high="100" max="100" value="80"></meter></p>
   <p>남학생 합격률 <meter min="0" low="0" high="100" max="100" value="70"></meter></p>
</body>
</html>

실행 결과

HTML meter 태그의 value 속성 – 게이지 현재 값 설정 방법

위 예제에서는 <meter> 요소를 사용하여 여학생과 남학생의 합격률을 각각 표시했습니다. 현재 값은 value 속성을 통해 설정되며, 아래 코드에서처럼 남학생 합격률은 70으로 지정되어 있습니다.

<meter min="0" low="0" high="100" max="100" value="70"></meter>

정리

value 속성은 <meter> 요소에서 현재 측정값을 나타내는 필수 속성입니다. min, max, low, high 같은 다른 속성들과 함께 사용하면 데이터의 허용 범위와 현재 상태를 시각적으로 명확하게 표현할 수 있어, 디스크 사용량, 설문 결과, 성적 비율 등을 직관적으로 보여줄 때 유용합니다.