오픈 소스 · MIT · Pure CSS
demodeck
데모 페이지를 빛내줄 완성도 높은 컨트롤 패널.
오픈 소스 데모용으로 제작된 세련된 다크 테마 컨트롤 패널 레이아웃 템플릿입니다. 분할 버튼, 슬라이더, 16진수 값 동기화가 되는 색상 필드, 토글, 세련되게 디자인된 셀렉트 박스, 팝오버, 실시간 콘솔 영역, 복사 가능한 코드 창을 갖추고 있습니다. 최소한의 작동 레이어가 더해진 순수 CSS 구성이며 의존 라이브러리가 일절 없습니다.
작동 방식
- 1.
쉘 레이아웃 얹기
스타일시트와 스크립트를 연결한 다음 body 태그에 `dd` 클래스를 추가해 보세요. 프리미엄 헤더가 적용된 다크 테마 페이지와 2열 구조의 컨트롤 패널 레이아웃이 즉시 완성됩니다.
- 2.
컨트롤 바인딩
index.html 파일에서 분할 버튼, 슬라이더, 색상 피커, 토글 등 마음에 드는 컴포넌트를 골라 소스 코드를 복사하세요. 자체 내장 스크립트가 이벤트들을 알아서 가로채 `dd:change`나 `dd:color` 같은 정돈된 이벤트를 깔끔하게 발행해 줍니다.
- 3.
결과 표시하기
오른쪽 열에 라이브 미리보기 카드를 배치하고, 내장된 터미널 콘솔창에 로그를 찍어가며 방문자들이 라이브러리를 마음껏 작동시켜 볼 수 있도록 꾸미세요. 몇 개의 `--dd-*` CSS 변수를 재정의하는 것만으로 손쉽게 테마 스타일을 입힐 수 있습니다.
주요 기능
완성도 높은 컨트롤 키트 패키지
분할 버튼, 슬라이더, 16진수 값 동기화가 되는 색상 필드, 토글, 세련되게 디자인된 셀렉트 박스, 팝오버, 실시간 터미널 콘솔창, 복사 가능한 코드 상자 등 알찬 다크 테마 구성요소들을 즉시 쓸 수 있습니다.
의존성 없는 순수 CSS 설계
모든 UI 스타일링은 일반 순수 CSS로 구축되었으며, 스크립트는 컴포넌트 동작을 보조하고 이벤트를 연결하는 가벼운 역할만 수행합니다. 복잡한 프레임워크나 빌드 도구, 모듈 설치가 필요하지 않습니다.
이벤트 자동 와이어링
각 버튼이나 슬라이더가 단정한 커스텀 이벤트(`dd:change`, `dd:color`)를 발행하며, 콘솔 영역에는 단 한 줄의 `log()` 메서드 호출만으로 출력이 가능하므로 데모 페이지 연동 작업이 매우 단순해집니다.
일관된 테마 관리
`:root` 영역에 선언된 `--dd-accent`, `--dd-bg`, `--dd-radius` 등의 변수 값들을 바꾸는 것으로 분위기를 완전히 바꿀 수 있습니다. 모바일 및 웹 화면 미리보기를 정밀하게 보여주기 위해 liquidframe 컴포넌트와 조합하면 최상의 궁합을 보여줍니다.
활용 방법
라이브 데모 사이트를 열어 소스 보기를 누른 뒤 필요한 코드 조각들을 마음껏 가져가세요. 각 구성요소가 라이브 카드에 어떻게 연결되는지 예시를 통해 바로 배울 수 있습니다. 포크 및 스타일 리스킨이 자유로운 MIT 라이선스입니다.