간단한 계산기 만들기
코드를 전혀 몰라도 됩니다. Cursor AI에게 원하는 것을 말하면 됩니다.
완성 모습
섹션 제목: “완성 모습”┌─────────────────┐│ 0 │ ← 숫자가 표시되는 화면├─────────────────┤│ 7 8 9 ÷ ││ 4 5 6 × ││ 1 2 3 - ││ C 0 = + │└─────────────────┘숫자 버튼을 누르고, 연산자(+, -, ×, ÷)를 선택한 뒤 = 를 누르면 결과가 나옵니다.
C 버튼을 누르면 초기화됩니다.
1단계: Cursor AI에게 계산기 만들어달라고 요청하기
섹션 제목: “1단계: Cursor AI에게 계산기 만들어달라고 요청하기”새 파일(calculator.html)을 만들고, Cursor AI(Chat 창)에 아래 내용을 그대로 복사해서 붙여넣으세요.
calculator.html 파일에 사칙연산 계산기를 만들어줘.
기능:- 숫자 버튼 0~9- 더하기, 빼기, 곱하기, 나누기 버튼- 결과를 보여주는 = 버튼- 초기화 C 버튼
디자인:- 어두운 배경에 초록색 디스플레이 (레트로 느낌)- 버튼에 마우스를 올리면 살짝 커지는 효과- 가운데 정렬
HTML, CSS, JavaScript를 한 파일(calculator.html)에 모두 넣어줘.→ AI가 완성된 코드를 생성해줍니다. “Apply” 버튼을 눌러 파일에 적용하세요.
2단계: 브라우저에서 확인하기
섹션 제목: “2단계: 브라우저에서 확인하기”- 파일 탐색기에서
calculator.html파일을 더블클릭합니다. - 브라우저가 자동으로 열리면서 계산기가 나타납니다.
- 직접 버튼을 눌러보세요.
잘 작동하나요? 그렇다면 다음 단계로 넘어가세요.
안 된다면? Cursor AI에게 이렇게 말하세요:
계산기가 제대로 작동하지 않아.숫자 버튼을 눌러도 아무 반응이 없어. 고쳐줘.3단계: 원하는 대로 바꾸기
섹션 제목: “3단계: 원하는 대로 바꾸기”계산기 색상, 크기, 기능 등 마음에 안 드는 부분이 있으면 AI에게 바로 요청하세요.
색상 바꾸기
섹션 제목: “색상 바꾸기”계산기 디자인을 바꿔줘.배경은 보라색, 버튼은 흰색, 디스플레이는 파란색으로 변경해줘.버튼 크기 키우기
섹션 제목: “버튼 크기 키우기”버튼이 너무 작아. 버튼 크기를 50% 더 크게 만들어줘.폰트도 같이 키워줘.소수점 추가하기
섹션 제목: “소수점 추가하기”소수점(.) 버튼을 추가해줘.예: 3.14 같은 소수도 계산할 수 있게.백스페이스 추가하기
섹션 제목: “백스페이스 추가하기”숫자를 하나씩 지우는 ← (백스페이스) 버튼을 추가해줘.잘못 누른 숫자를 지울 때 사용할 거야.키보드 지원 추가하기
섹션 제목: “키보드 지원 추가하기”마우스 말고 키보드로도 계산기를 조작할 수 있게 해줘.- 숫자 키: 숫자 입력- Enter 키: = (계산)- Escape 키: C (초기화)4단계: 오류 메시지가 나올 때
섹션 제목: “4단계: 오류 메시지가 나올 때”“Error”가 표시될 때
섹션 제목: ““Error”가 표시될 때”계산기에서 어떤 숫자를 0으로 나누면 "Error"가 표시돼.이때 좀 더 친절한 메시지("0으로는 나눌 수 없어요")를 보여주도록 바꿔줘.숫자가 너무 길어질 때
섹션 제목: “숫자가 너무 길어질 때”숫자가 너무 길어지면 화면이 넘쳐.최대 10자리까지만 입력되도록 제한해줘.연속으로 = 버튼을 눌렀을 때
섹션 제목: “연속으로 = 버튼을 눌렀을 때”= 버튼을 여러 번 누르면 오류가 생겨.= 버튼을 여러 번 눌러도 마지막 계산 결과만 유지되도록 고쳐줘.더 멋지게 만들기 (선택 사항)
섹션 제목: “더 멋지게 만들기 (선택 사항)”계산 기록 표시
섹션 제목: “계산 기록 표시”계산 기록을 화면 아래에 보여줘.예: "5 + 3 = 8" 형태로 최대 5개까지 표시.오래된 항목은 자동으로 사라지게 해줘.과학 계산기로 업그레이드
섹션 제목: “과학 계산기로 업그레이드”계산기에 기능을 추가해줘:- √ (제곱근) 버튼- x² (제곱) 버튼- % (퍼센트) 버튼
버튼을 추가할 공간이 부족하면 계산기 크기를 늘려줘.다크/라이트 테마 전환
섹션 제목: “다크/라이트 테마 전환”계산기 오른쪽 위에 테마 전환 버튼(🌙/☀)을 추가해줘.클릭하면 어두운 테마와 밝은 테마가 번갈아 바뀌게 해줘.Cloudflare Pages에 배포하기
섹션 제목: “Cloudflare Pages에 배포하기”완성한 계산기를 인터넷에 올려서 다른 사람도 쓸 수 있게 해봅시다.
calculator.html을 GitHub에 올립니다.- Cloudflare Pages에서 해당 저장소를 연결합니다.
- 배포가 완료되면 URL을 받습니다.
자세한 방법은 GitHub에 코드 올리기와 Pages 배포하기 문서를 참고하세요.
다음 단계
섹션 제목: “다음 단계”계산기를 완성했습니다! 이제 할일 목록(To-Do List) 만들기에 도전해봅시다.