HTML에서는 <input type="color"> 요소를 사용하여 색상을 입력받는 전용 필드를 만들 수 있습니다. 이 요소를 활용하면 별도의 자바스크립트나 외부 라이브러리 없이도, 브라우저가 기본 제공하는 색상 선택기(color picker)를 통해 사용자가 원하는 색상을 간편하게 선택할 수 있습니다.
화면에 표시된 색상 상자를 클릭하면 색상 선택기 창이 열립니다. 팔레트를 조작하거나 16진수 색상 코드를 직접 입력해 세밀하게 색상을 지정할 수 있으며, value 속성을 사용하면 페이지가 처음 로딩될 때 표시될 기본 색상도 미리 설정해 둘 수 있습니다.
예제
아래 예제 코드를 실행하면 input type="color"와 함께 동작하는 색상 선택기를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML input color</title> </head> <body> <form action = "" method = "get"> 웹사이트에 사용할 색상을 선택하세요:<br><br> <input type="color" name="favcolor" value="#FFFFFF"><br> <input type="submit" value="submit"> </form> </body> </html>
핵심 포인트 정리
- value 속성: 기본 색상은 반드시 #RRGGBB 형식의 16진수 색상 코드로 지정해야 합니다.
- name 속성: 폼이 제출될 때 서버로 전달되는 데이터의 키 이름을 결정합니다.
- 반환 값: 사용자가 선택한 색상은 항상 #rrggbb 형태의 소문자 16진수 문자열로 전달됩니다.
- 브라우저 지원: Chrome, Edge, Firefox, Opera 등 대부분의 최신 브라우저에서 기본적으로 지원됩니다.