티스토리 블로그 색상 선택도구 추가하기

티스토리 블로그에 인터랙티브 색상 선택 도구(Color Picker) 추가하기

티스토리 블로그 글을 작성하다 보면, 특정 색상을 시각적으로 보여주거나 독자가 직접 색상을 선택하고 관련 코드(예: HEX)를 확인할 수 있도록 하고 싶을 때가 있습니다. 이럴 때 유용한 것이 바로 '색상 선택 도구(Color Picker)'입니다.

자주 사용하는 기능은 아닐 수 있지만, 디자인 관련 포스팅이나 코드 예제를 다룰 때 아래 소개하는 코드를 활용하면 독자들에게 훨씬 더 인터랙티브하고 유용한 정보를 제공할 수 있습니다. 이 방법을 사용하면 사용자가 선택한 색상의 HEX 코드 값을 즉시 확인할 수 있습니다. (브라우저에 따라 RGB, HSL 값 확인 기능도 내장된 경우가 많습니다.)

 

블로그 본문 내 색상 선택 도구 예시

 

본문에 색상 선택 도구 적용하기 (HTML & JavaScript)

티스토리 글쓰기 에디터에서 'HTML 모드'로 전환한 후, 색상 선택 도구를 표시하고 싶은 위치에 아래 코드를 복사하여 붙여넣으세요. 이 코드는 별도의 외부 라이브러리 설치 없이 HTML5와 기본 JavaScript만으로 작동하여 간편합니다.

[ 적용 코드 예시 ]

원하는 색상을 선택하세요

색상 선택:
#ff0000

    const colorPickerInput = document.getElementById('html5ColorPicker');
    const colorValueDisplaySpan = document.getElementById('colorValueDisplay');

    if (colorPickerInput && colorValueDisplaySpan) {
        colorPickerInput.addEventListener('input', function(event) {
            const selectedColor = event.target.value;
            colorValueDisplaySpan.textContent = selectedColor;
            // 선택된 색상으로 span 배경색 변경 (선택 사항)
            // colorValueDisplaySpan.style.backgroundColor = selectedColor;
            // 글자색 자동 조정 (간단 버전, 완벽하지 않음)
            // const brightness = parseInt(selectedColor.substring(1, 3), 16) * 0.299 + parseInt(selectedColor.substring(3, 5), 16) * 0.587 + parseInt(selectedColor.substring(5, 7), 16) * 0.114;
            // colorValueDisplaySpan.style.color = brightness > 186 ? '#000000' : '#ffffff';
        }, false);
    }

이처럼 간단한 HTML과 JavaScript 코드를 활용하여 티스토리 블로그 콘텐츠를 더욱 풍부하고 인터랙티브하게 만들 수 있습니다.  시각적인 즐거움과 유용한 정보를 동시에 제공해보세요

 

이 글이 도움이 되셨길 바라며, 앞으로도 유용하고 좋은 정보가 있으면 공유드리도록 하겠습니다.

감사합니다.