HTML DOM Input Color 객체 완벽 가이드

HTML DOM의 Input Color 객체는 type 속성이 color로 지정된 HTML <input> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트로 웹 페이지에서 색상 선택기(컬러 피커)를 동적으로 생성하고 제어할 수 있습니다.

문법(Syntax)

Input Color 객체를 다루는 기본 문법은 다음과 같습니다.

type이 color인 <input> 요소 생성하기

var colorObject = document.createElement("input");
colorObject.type = "color";

주요 속성(Attributes)

위 코드에서 생성된 colorObject는 아래와 같은 속성들을 가질 수 있습니다.

속성	설명
autocomplete	컬러 피커의 autocomplete 속성 값을 정의합니다.
autofocus	페이지가 처음 로드될 때 컬러 피커에 자동으로 포커스를 설정할지 여부를 지정합니다.
defaultValue	컬러 피커의 기본값을 설정하거나 반환합니다.
disabled	컬러 피커의 비활성화/활성화 상태를 정의합니다.
form	컬러 피커를 포함하고 있는 상위 폼(form)에 대한 참조를 반환합니다.
name	컬러 피커의 name 속성 값을 정의합니다.
type	컬러 피커 폼 요소의 유형(type)을 반환합니다.
value	컬러 피커의 value 속성 값을 정의합니다.

예제(Example)

다음은 Input Color의 name 속성을 활용한 예제입니다. 버튼을 클릭하면 컬러 피커의 name 값이 동적으로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Color Name</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" name="primaryColor">
</form>
<button onclick="changeNameValue()">Change name value</button>
<div id="divDisplay"></div>
<script>
    var inputColor = document.getElementById("Color");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'Name of color input: '+inputColor.name;
    function changeNameValue() {
       if(inputColor.name == 'primaryColor'){
          inputColor.name = 'secondaryColor';
          divDisplay.textContent = 'Name of color input: '+inputColor.name;
       }
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Change name value' 버튼을 클릭하기 전 −

HTML DOM Input Color 객체 완벽 가이드 – 속성과 활용 예제

'Change name value' 버튼을 클릭한 후 −

HTML DOM Input Color 객체 완벽 가이드 – 속성과 활용 예제

버튼을 클릭하면 자바스크립트 함수가 실행되어 컬러 피커의 name 속성이 primaryColor에서 secondaryColor로 변경되고, 화면에 변경된 이름이 즉시 출력되는 것을 확인할 수 있습니다.