HTML DOM Input Color value 속성 – 문법과 실전 예제 완벽 정리

HTML DOM의 Input Color value 속성은 <input type="color"> 요소에 설정된 색상 값을 문자열(string) 형태로 반환합니다. 16진수 HEX 코드(예: #00ff00)로 표현되며, 개발자는 이 속성을 통해 사용자가 선택한 색상을 읽어오거나, 반대로 새로운 색상 값을 지정하여 동적으로 변경할 수도 있습니다.

문법(Syntax)

value 속성은 아래와 같이 두 가지 방식으로 사용할 수 있습니다.

1. 색상 값 반환하기

inputColorObject.value

2. 색상 값 설정하기

새로운 문자열(HEX 색상 코드)을 할당하면 해당 색상으로 값이 변경됩니다.

inputColorObject.value = '#ff0000'

예제(Example)

다음은 Input Color value 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 현재 색상 값을 확인하고, 조건에 따라 초록색(#00ff00)에서 빨간색(#ff0000)으로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Color Value</title>
</head>
<body>
<form id="formForColorsInput">
Primary-Color: <input type="color" id="Color" name="primaryColor" value="#00ff00">
</form>
<button onclick="changeValue()">색상 값 가져오기 및 변경</button>
<div id="divDisplay"></div>
<script>
    var inputColor = document.getElementById("Color");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'value: '+inputColor.value;
    function changeValue() {
        if(inputColor.value == '#00ff00'){
            inputColor.value = '#ff0000';
            divDisplay.textContent = 'value: '+inputColor.value;
        }
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 화면에 출력됩니다.

버튼 클릭 전

초기 상태에서는 input 요소에 설정된 기본값인 #00ff00(초록색)이 div 영역에 표시됩니다.

HTML DOM Input Color value 속성 – 문법과 실전 예제 완벽 정리

버튼 클릭 후

'색상 값 가져오기 및 변경' 버튼을 클릭하면, 자바스크립트 함수가 실행되어 색상 값이 #ff0000(빨간색)으로 변경되고, 변경된 값이 즉시 화면에 갱신됩니다.

HTML DOM Input Color value 속성 – 문법과 실전 예제 완벽 정리

정리

Input Color value 속성은 색상 선택 UI와 자바스크립트를 연동할 때 필수적인 기능입니다. 폼 제출 전 색상 유효성 검사, 테마 변경 기능, 실시간 미리보기 등 다양한 인터랙티브 웹 기능을 구현할 때 유용하게 활용할 수 있습니다.