개요
HTML DOM의 Input Color defaultValue 속성은 색상 입력 필드(<input type="color">)에 해당하는 기본값(default value)을 설정하거나 반환하는 속성입니다. 이 기본값은 value 속성과 동일할 수도 있고, 사용자가 색상을 변경한 경우에는 다를 수도 있습니다.
구문(Syntax)
defaultValue 속성의 사용 구문은 다음과 같습니다.
- 기본값 문자열 반환하기
inputColorObject.defaultValue
- defaultValue에 문자열 설정하기
inputColorObject.defaultValue = 'string'
속성 값
여기서 "string" 자리에는 아래와 같은 형식의 값을 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
| #000000 ~ #ffffff | 입력 색상의 기본값이 정의된 범위 내의 16진수(Hex) 색상 코드로 지정될 수 있음을 나타냅니다. |
예제
Input Color defaultValue 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Color Default Value</title>
</head>
<body>
<form>
색상 선택기: <input type="color" id="Color" value="#00cc00">
</form>
<button onclick="getDefaultValue()">기본값 가져오기</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputColor = document.getElementById("Color");
function getDefaultValue() {
divDisplay.textContent = '기본 색상: '+inputColor.defaultValue;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'기본값 가져오기' 버튼을 클릭하기 전 −
'기본값 가져오기' 버튼을 클릭한 후 −
정리
defaultValue 속성은 페이지가 처음 로드될 때 지정된 초기 색상 값을 그대로 유지하며, 사용자가 색상 선택기를 통해 값을 변경하더라도 원래의 기본값을 참조해야 할 때 유용하게 활용됩니다. 반면 현재 선택된 색상을 확인하려면 value 속성을 사용하면 됩니다.