HTML의 min 속성은 요소가 가질 수 있는 최솟값을 지정하는 데 사용되는 속성입니다. 이 속성은 <meter> 요소와 <input> 요소 모두에서 활용할 수 있으며, 특히 숫자 입력이나 날짜 선택 시 유효 범위의 하한선을 정하는 데 매우 유용합니다.
<meter> 요소에서 min 속성 사용하기
먼저 <meter> 요소에 min 속성을 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <body> <h2>수질 측정 현황</h2> <p>불순물 농도 <meter min="0" low="50" high="95" max="100" value="85"></meter></p> <p>TDS 농도 <meter min="0" low="20" high="80" max="100" value="60"></meter></p> </body> </html>
실행 결과
위 코드를 실행하면 각 게이지가 min 값인 0을 기준으로 하여 값의 범위가 표시됩니다.
<input> 요소에서 min 속성 사용하기
다음은 <input> 요소에 min 속성을 적용한 예제입니다. 날짜 입력 필드에 최소 날짜를 지정하면 그 이전 날짜는 선택할 수 없게 됩니다.
<!DOCTYPE html> <html> <body> <h2>선수 등록 정보 및 보고 일자</h2> <form> <p>아래는 <ins>보고 날짜가 포함된</ins> 상세 정보입니다:</p> <fieldset> <legend>새로운 정보:</legend> 크리켓 선수 이름: <input type="text"><br> 순위: <input type="number"><br> 이메일: <input type="email"><br> 보고 날짜: <input type="date" name="reporting" min="2019-05-05"> </fieldset> </form> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
만약 사용자가 min 속성으로 지정된 날짜(2019-05-05)보다 이전 날짜를 선택하려고 하면, 브라우저는 해당 값을 유효하지 않은 것으로 판단하여 다음과 같은 경고 메시지를 표시합니다.
정리
min 속성은 폼 유효성 검사와 데이터 범위 제한에 필수적인 도구입니다. <input type="number">, <input type="date"> 등에서 최솟값을 제한하여 잘못된 데이터 입력을 사전에 방지할 수 있으며, <meter> 요소에서는 측정값의 기준 하한을 명확히 하는 역할을 합니다.