KOEN

CSS 아트 갤러리

LAB · PURE CSS ART

이미지 없이 HTML과 CSS만으로 그린 일러스트·애니메이션 12점을 크게 보고 코드를 바로 복사해요.

EXHIBITION · 10 WORKS

이미지 파일 없이, HTML과 CSS만으로 그린 그림들

그라디언트·border-radius·clip-path·keyframes로 만들었어요. 작품을 누르면 크게 보고 코드를 복사할 수 있어요.

01 / 10

No.01

작품
HOW TO

사용 방법

  1. CSS로만 그린 작품 12점을 둘러보고, 위쪽에서 전체·움직이는·멈춘 작품만 골라 볼 수 있어요.
  2. 작품을 누르면 크게 보이고, 오른쪽에서 HTML·CSS·한 파일로 탭을 바꿔 코드를 확인해요.
  3. 복사 버튼으로 코드를 가져가 내 페이지에 붙여 넣으면 같은 그림이 나와요. '한 파일로' 탭은 그대로 .html 파일로 저장해 열면 돼요.
  4. ← → 버튼이나 방향키로 다음 작품으로 넘기고, 애니메이션이 부담되면 위쪽 '애니메이션 멈춤'을 눌러요.
PAIRS WELL WITH

같이 쓰기 좋은 도구

FAQ

자주 묻는 질문

정말 이미지 없이 CSS만으로 그렸나요?

네. 각 작품은 div 몇 개와 CSS(그라디언트, border-radius, clip-path, box-shadow, mask, filter, keyframes)로만 그렸어요. JavaScript는 갤러리 화면의 거르기·코드 보기·복사에만 써요.

작품 크기를 바꾸려면 어떻게 해요?

모든 치수를 em 단위로 만들어서, 작품 맨 바깥 요소의 font-size 하나만 바꾸면 돼요. 기본값 16px이면 320×320px이고, 8px이면 160px, 24px이면 480px이 돼요.

복사한 코드가 다른 페이지에서도 그대로 보이나요?

클래스 이름이 작품별 접두어(.sunset__sun처럼)로 되어 있어 다른 스타일과 잘 겹치지 않아요. 최신 크롬·엣지·사파리·파이어폭스 기준으로 만들었고, 오래된 브라우저에서는 mask나 개별 translate 속성을 쓴 일부 작품이 다르게 보일 수 있어요.

애니메이션 때문에 배터리가 닳지 않나요?

화면 밖으로 스크롤된 작품은 애니메이션을 멈추고, '애니메이션 멈춤' 버튼으로 전부 멈출 수 있어요. 기기에서 '동작 줄이기'를 켜 두었다면 처음부터 멈춘 상태로 열려요.