작게 만들어도,
분명히 내 것이 됩니다.
코드를 몰라도 괜찮아요. 아래 세 가지를 직접 바꾸고 실행해 보세요.
이 실습실은 브라우저에서 동작하며 별도 서버 설치가 필요하지 않습니다.
나의 첫 실습 0 / 3완료 기록과 체크리스트는 현재 브라우저에 저장돼요. 다른 기기와는 동기화되지 않습니다.
01 · 약 5분
나를 소개하는 웹 카드를 만들어요.
이름과 소개를 입력하고 색상을 골라보세요. 오른쪽 화면이 즉시 바뀝니다.
이렇게 해보세요
① 내 이름을 넣고 ② 좋아하는 색으로 바꾼 다음 ③ HTML 파일을 저장해 열어보세요.
카드의 HTML 코드 살펴보기
02 · 약 5분
값을 바꾸면 계산도 달라져요.
입력 → 계산 → 결과. 웹 도구가 동작하는 가장 작은 구조입니다.
수량을 2로 바꾸면? 할인율을 20으로 바꾸면? 먼저 결과를 예상한 뒤 확인해 보세요.
계산 결과
10,000 × 3 × (1 − 10 / 100)
실습용 계산이며 결제는 발생하지 않습니다.계산하는 JavaScript 한 줄
const total = Math.round(price * quantity * (1 - discount / 100));
03 · 약 5분
오늘 끝낼 일을 하나 적어보세요.
추가하고, 완료하고, 지워보세요. 데이터가 화면에 나타나는 과정을 경험할 수 있어요.
하나를 완료한 뒤 새로고침해 보세요. 같은 브라우저라면 목록이 남아 있어요. 개인적인 비밀 정보는 적지 마세요.
오늘의 체크리스트
아직 비어 있어요. 작은 목표 하나를 추가해 보세요.