어떤 때 쓰면 좋을까요?
버튼, 카드와 애니메이션을 작은 예제로 만들고 싶을 때 활용합니다. 프로젝트 전체를 준비하지 않고 화면 구성 요소 하나를 실험하거나 오류를 재현할 수 있어요.
다른 사람의 예제를 참고할 때는 사용 조건과 원본을 확인하세요. 저장한 코드의 공개 범위와 비공개 기능도 살펴봐야 합니다. 만들고 있는 서비스의 비밀키나 고객 데이터는 예제 코드에 넣지 않습니다.
CodePen
웹사이트 · 개발·데이터
HTML·CSS·JS 화면을 바로 실험하기
HTML, CSS와 JavaScript를 편집하고 미리보기를 보며 프런트엔드 예제를 만드는 사이트입니다.
- 실시간 화면 미리보기
- 예제 코드 공유
이렇게 써보세요
카드의 접기·펼치기 UI를 HTML·CSS·JS로 작게 만들어 휴대폰 크기에서 읽기 쉬운지 실험해보세요.
얻는 결과독립적으로 보여줄 화면 예제
사용 순서
새 Pen에서 세 가지 코드를 입력합니다
미리보기에서 동작과 스타일을 확인합니다
공개 범위를 확인해 저장하거나 공유합니다
사용할 때 알아두세요
비공개·파일 호스팅 등 일부 기능은 유료 조건이 있습니다. 공개 코드에 비밀값을 넣지 마세요.
제작자 소개 · 2026-10-04 확인 · 기능·요금은 제작자의 최신 안내를 확인하세요.