라이브러리

바로 복사해 쓰는 큐레이션 프리셋·예제 모음입니다. CSS 그라디언트 등을 무료로 제공합니다.

CSS 그라디언트 프리셋24바로 쓸 수 있는 CSS 그라디언트 모음입니다. 스와치를 클릭하면 `background` 값이 복사되고, 그라디언트 도구를 열면 각도와 색을 직접 조정할 수 있습니다.

컬러 팔레트 프리셋16바로 복사해 쓰는 5색 팔레트 모음입니다. 각 팔레트의 가장 밝은 색과 가장 어두운 색의 명암비를 계산해 보여주므로, 읽기 쉬운 텍스트 조합인지 한눈에 확인할 수 있습니다.

크론 스케줄 레시피23실무에서 정말 자주 쓰는 표준 5필드 크론 표현식을 모았습니다. 카드를 클릭하면 표현식이 복사되고, 크론 도구에 붙여넣으면 쉬운 설명과 다음 실행 시각까지 확인할 수 있습니다. 카드 위의 띠는 하루(요일·날짜 단위 레시피는 주·월·연) 축 위에 실행 시점을 표시한 것입니다.

정규식 검증 패턴16이메일·URL·전화번호·비밀번호 강도부터 ID·날짜 형식, 텍스트 정리용 찾아바꾸기까지 실무에서 반복해서 찾게 되는 정규식 16개를 모았습니다. 카드를 클릭하면 구분자나 플래그 없이 패턴 문자열만 복사되고, 정규식 테스터의 Pattern 입력란에 붙여넣으면 실제 텍스트로 바로 테스트할 수 있습니다. 대부분은 전체 문자열을 검증하는 앵커(^...$) 패턴이고, 태그 제거·공백 정리 항목 두 개는 앵커가 없어 긴 텍스트 안의 모든 매칭을 찾아냅니다.

CSS 이징 커브22CSS 트랜지션·애니메이션에 바로 붙이는 cubic-bezier 이징 커브 모음입니다. sine·quad·cubic·quart·expo 클래식 계열과 살짝 튕기는 back 계열까지, 스와치는 실제 커브를 그대로 그린 것입니다(가로가 진행, 세로가 값). 카드를 클릭하면 timing-function 값이 복사됩니다.

SVG 배경 패턴12복사 한 번으로 끝나는 심리스 SVG 배경 패턴 모음입니다. 도트·스트라이프·그리드·물결 등 패턴 타일이 data URI 로 값 안에 인라인되어 추가 요청도, 호스팅할 파일도 없습니다. 카드를 클릭해 background 값을 복사한 뒤, 값 안의 hex 색 두 개만 팔레트에 맞게 바꾸면 됩니다.

CSP(콘텐츠 보안 정책) 레시피11실무에서 정말 쓰는 구성을 담은 Content-Security-Policy 헤더 값 모음입니다. 엄격한 스타터부터 Google Fonts·애널리틱스·YouTube 임베드·nonce 기반 스크립트·클릭재킹 방어까지, 카드를 클릭해 정책을 복사한 뒤 Content-Security-Policy 헤더 값으로 설정하면 됩니다. 카드 위의 띠는 지시어 하나가 한 칸이고, 호박색 칸은 다시 살펴볼 가치가 있는 unsafe-* 소스를 포함한 지시어입니다.