IT/HTML|Script|PHP

[HTML/JS] 색상 선택 하는 방법, Pickr 사용법

하요 2024. 12. 1. 10:42
반응형

 

웹에서 색상을 선택해야 하는 경우가 있다.

이때, 컬러를 선택하는 방법은 2가지 방법이 있다.

HTML Input 요소 활용

<input type="color" id="colorPicker" />​

 

화면에서는 위와같은 모습으로 노출이 되고, 코드는 input 타입에 "color"이라고 선언만 해주면 끝이 난다.

제이쿼리가 포함만 되어 있다면 쉽게 구현이 가능하고, 기본적으로 색상 선택가능하기 때문에 간단하게 사용하기가 좋다.

하지만 브라우저마다 UI가 다르고, 커스터마이징에 어려움이 있다.

 

Pickr 라이브러리 사용

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.0/dist/pickr.min.js"></script>

 

Pickr 라이브러리를 사용하기 위해서는 일단 헤더에 pickr를 선언부터 해줘야 한다.

위의 CDN을 사용하여, pickr를 사용할 수 있도록 세팅을 한다

 

만약 Node.js환경에서 작업 중이라면 npm을 통해 설치를 하여 사용하면 된다.

// npm을 통해 설치
npm install @simonwep/pickr

// html script에 라이브러리를 import하여 사용한다.
import Pickr from '@simonwep/pickr';
import '@simonwep/pickr/dist/themes/classic.min.css';

 

 

이렇게 하면 기본적으로 pickr를 사용할 준비가 모두 완료되었으며 아래와 같이 선언하여 사용을 하면 된다.

 

<body>
	<!-- pickr가 들어갈 위치 선언 -->
	<div id="colorPicker"></div>
</body>
<script>

	// pickr를 스크립트 안에서 사용하며 기본적인 선언 을 하면 사용이 가능하다.
    const pickr = Pickr.create({
      el: '#colorPicker', // 컬러 피커를 표시할 요소
      theme: 'classic',   // 테마 선택: classic, nano, monolith
      swatches: [         // 미리 보기 팔레트 색상 (선택 사항)
        '#F44336', '#E91E63', '#9C27B0',
        '#673AB7', '#3F51B5', '#2196F3',
        '#03A9F4', '#00BCD4', '#009688',
        '#4CAF50', '#8BC34A', '#CDDC39',
        '#FFEB3B', '#FFC107', '#FF9800'
      ],
      components: {
        preview: true,     // 미리 보기 활성화
        opacity: true,     // 투명도 조절 활성화
        hue: true,         // 색상 슬라이더 활성화
        interaction: {     // 사용자 입력 옵션
          hex: true,       // HEX 입력 활성화
          rgba: true,      // RGBA 입력 활성화
          input: true,     // 사용자 입력 필드
          clear: true,     // 초기화 버튼
          save: true       // 저장 버튼
        }
      }
    });
<script>

 

 

pickr는 위와 같은 형식이 기본형 태이지만,

테마의 선택에 따라 노출되는 부분이나, 어떤 필드를 활성화하냐에 따라 노출되는 부분이 다 다르다.

 

테마는 3가지 형식으로 지원이 된다.

classic 전통적인 테마. 기본 값.
monolith 미니멀하고 간결한 스타일.
nano 가장 작은 크기, 콤팩트한 디자인.

 

선택을 한다면, 선택된 값 또한 받아와야 하는데, 

이는 pickr에서 제공하는 이벤트를 사용하여서 커스터 마이징 할 수 있다.

 

예를 들면, 아래와 같은 이벤트들이 있다.

// 사용자가 색상을 선택/변경하였을때 호출이 된다.
pickr.on('change', (color) => {
  console.log(color.toHEXA().toString()); // HEX 형식으로 색상 출력
});

// 사용자가 색상을 선택하고, save 버튼을 눌렀을때, 호출이 된다.
pickr.on('save', (color) => {
  console.log(color ? color.toHEXA().toString() : '색상이 선택되지 않음');
});

// 사용자가 선택한 색상을 초기화 할때 사용이 된다.
pickr.on('clear', () => {
  console.log('색상이 초기화되었습니다.');
});

 

이외에도 색상을 선택하는 라이브러리들이 있지만, 이 두 가지 정도만 있어도 기본적인 색상을 선택을 하는 부분에 있어서 문제가 없을 것으로 보인다.

모두들 개발을 하는 데 있어 파이팅 하시고, 개발을 잘하시길 바란다.

반응형