AI CSS 스니펫 가이드
원하는 효과를 설명하면 100개의 엄선된 CSS 스니펫 라이브러리에서 일치하는 것을 찾아줍니다 — 버튼, 카드, 로더, 애니메이션, 호버 효과, 텍스트 효과, 내비바, 폼, 배지, 유틸리티. 우리 AI 도구 전반에 쓰이는 MiniLM 신경망이 설명을 의미적으로 매칭하고 각 결과를 페이지에서 실시간 렌더링합니다.
각 스니펫은 표준 속성만 사용하는 자체 완결형 프로덕션급 CSS 패턴입니다 — 프레임워크도 의존성도 없습니다. CSS를 스타일시트에 바로 복사하거나 출발점으로 쓰세요. 라이브 iframe 미리보기가 실제 렌더링을 보여줍니다.
Pro Tips
- 속성 이름이 아니라 시각적 결과를 설명하세요. "빛이 훑는 반짝 버튼"이 "가상 요소"보다 더 잘 맞습니다.
- 스니펫을 조합하세요: 하나에서 호버 효과, 다른 하나에서 색, 세 번째에서 레이아웃을. 스니펫은 빌딩 블록입니다.
Frequently Asked Questions
Q: 이건 진짜 AI인가요?
이건 진짜 AI인가요? 네. 페이지가 ONNX Runtime Web으로 all-MiniLM-L6-v2 임베딩 모델을 실행해 설명을 의미적 유사도로 스니펫에 매칭합니다 — 전부 브라우저 안에서.
Q: 이 스니펫들을 상업적으로 쓸 수 있나요?
이 스니펫들을 상업적으로 쓸 수 있나요? 제한 없이 가능합니다. 모든 스니펫은 표준 CSS 속성만 쓰는 독창적 코드로 어떤 프로젝트에도 무료입니다.
Q: 스니펫에 JavaScript가 필요한가요?
스니펫에 JavaScript가 필요한가요? 아닙니다. 거의 모든 스니펫이 순수 CSS입니다 — 애니메이션, 호버 상태, 로더, 토글 모두 CSS만 씁니다. 일부 인터랙티브 상태(리플 등)는 JS 없이 :active로 동작합니다.
Q: 미리보기와 복사는 어떻게 하나요?
미리보기와 복사는 어떻게 하나요? 각 결과가 라이브 iframe 미리보기와 코드 블록의 전체 CSS를 보여줍니다. 코드 블록이나 복사 버튼을 클릭해 복사하세요.
Q: 모델 로딩이 실패하면?
모델 로딩이 실패하면? 키워드 매처가 자동으로 이어받고, 입력에 포커스하면 열리는 패널에서 100개 스니펫 전체를 둘러볼 수 있습니다.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.