CHT-009
순위가 바뀌는 막대 경주
- 달이 넘어갈 때마다 막대가 미끄러지며 자리를 바꿔요.
첫 열은 월, 나머지 열은 항목인 표로 가로 막대 경주 차트를 만들어 주세요. 값은 달 사이를 부드럽게 이어 가고, 순위가 바뀌면 막대가 위아래로 미끄러져요. 오른쪽 아래에 지금 월을 크고 흐리게 보여 주세요.
[여기에 표 붙여넣기]
첫 줄은 머리글이에요. HTML 파일 하나에 CSS와 JavaScript를 넣고, 외부 라이브러리 없이 canvas나 SVG로 그려 주세요. 어두운 배경에 숫자와 글자는 또렷하게, 휴대폰 폭에서도 글자가 겹치지 않게 해 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 다 그려진 차트를 보여 주세요.빈칸
사용법
- 프롬프트를 복사해요.
- [대괄호] 자리를 내 내용으로 바꿔요. 아래 칸에 적으면 바로 바뀌어요.
- Claude 새 대화에 넣고, 나온 HTML 파일을 브라우저로 열어요.
과정
- 가이드 'Claude로 데이터 차트 바로 만들기'의 장면이에요.
- 미리보기는 이 프롬프트로 나오는 장면을 사이트에서 그린 거예요.
