HTML의 value 속성은 문서 내 HTML 요소의 초기값(initial value)을 정의하는 속성입니다. 이 속성은 button, input, meter, li, option, progress, param 요소에 적용할 수 있으며, 요소마다 역할이 조금씩 다릅니다.
요소별 value 속성의 역할
- button: 폼 제출 시 서버로 전송되는 버튼의 값
- input: 입력 필드에 처음 표시되는 초기값
- meter / progress: 측정값 또는 진행률의 현재 값
- li: 정렬된 목록에서 해당 항목의 시작 번호
- option: 선택 시 서버로 전송되는 옵션 값
- param: 플러그인에 전달되는 매개변수 값
기본 문법
value 속성의 기본적인 작성 형식은 다음과 같습니다.
<tagname value="text"></tagname>
실전 예제
아래 예제는 meter(계량기) 요소에 value 속성을 적용하여 파일 업로드 진행 상태를 시각적으로 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML value Attribute Demo</h1>
<p>Uploading</p>
<meter min="0" max="100" value="60"></meter>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 최솟값 0, 최댓값 100으로 설정된 계량기가 생성되고, value 속성값이 60이므로 전체 범위 중 60% 지점까지 채워진 게이지가 화면에 나타납니다. 이처럼 value 속성을 활용하면 진행률, 측정값 등을 간단하게 시각화할 수 있습니다.
