2026-08-02-jollof-sunday-special-a-bowl-of-jollof-rice-in-pure-css-ee73e1d2b1
Pure CSS로 만든 졸로프 라이스 작품
DEV Community
편집자 요약
이 글은 Frontend Challenge ‘Comfort Food Edition’에 제출한 CSS Art 작품을 소개합니다. 졸로프 라이스를 주제로 밥, 튀긴 바나나, 삶은 달걀, 스카치 보닛 페퍼, 김이 오르는 모습을 담았다고 설명합니다. 모든 요소는 CSS만으로 만들었고, 이미지나 SVG 자산은 사용하지 않았습니다. 밥의 질감은 여러 크기의 radial-gradient로 표현했고, 바나나는 inset box-shadow로 튀긴 가장자리를 만들었으며, 김은 서로 다른 지연 시간의 blurred circle과 keyframe으로 구현했습니다.
인사이트
CSS만으로도 질감과 움직임을 충분히 표현할 수 있음을 보여주는 예시입니다. 초보자는 radial-gradient와 keyframe 애니메이션을 함께 써서 작은 음식 일러스트를 만들어 보는 연습을 해볼 수 있습니다.
댓글
댓글을 불러오는 중…