색을 선택할 수 있는 입력 필드(color picker) 정의 <input type="color">

모달창을 만드는 도중 색깔을 picker 할 수 있는 input 창이 필요했다. 복잡한 코드를 필요로 할 줄 알았는데, type 만 color로 지정해주면 되어서 매우 신기했다.

<p>Choose your monster's colors:</p>

<div>
    <input type="color" id="head" name="head"
           value="#e66465">
    <label for="head">Head</label>
</div>

<div>
    <input type="color" id="body" name="body"
            value="#f6b73c">
    <label for="body">Body</label>
</div>

p,
label {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: .4rem;
}

출처: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color