[HTML] 사용자로부터 색깔 입력받기

 

사용자로부터 색깔을 입력 받을 수 있는 방법을 알아보도록 하겠습니다.

색깔 입력 받기

HTML을 사용하여 사용자로부터 색깔을 입력 받기 위해서는

<input> 태그의 'type' 속성을 'color'로 지정해 주면 됩니다.

See the Pen pickColor by anna (@hianna) on CodePen.

 

위의 예제를 보면

<input> 태그의 'type' 속성이 'color'로 지정되어 있는 것을 볼 수 있습니다.
이렇게 설정하면 브라우저는 색깔을 선택할 수 있는 버튼을 보여주고,
이 버튼을 클릭하면 색깔을 선택할 수 있는 창이 나타납니다.
여기서 색깔을 선택해주면 됩니다.

기본 색깔 지정하기

<input> 태그의 'value' 값을 지정해주지 않으면
기본값은 검정색으로 설정되어, 색깔 선택 버튼은 기본적으로 검정색으로 보여지게 됩니다.
만약, 기본 색깔을 변경해 주고 싶으면
value값에 원하는 색을 지정해 주면 됩니다.
위의 예제에서는 'value' 값을 '#0000ff'로 지정하여 파란색이 기본값이 되도록 설정하였습니다.


지금까지 HTML에서 사용자로부터 색을 입력받는 방법, 기본색을 지정하는 방법을 알아보았습니다.