HTML · CSS · JavaScript

버튼을 눌러 메시지 바꾸기

실제 HTML, CSS, JavaScript를 직접 고쳐 실행하는 짧은 실습입니다. 코드를 편집하고 격리된 미리보기에서 직접 동작을 확인하세요.

기존 실습과 다른 수업

이 수업은 HTML, CSS, JavaScript를 격리된 iframe에서 실행합니다. 메모 실습의 Choorai Steps 교육용 규칙 문법과는 별개의 수업이며, 해당 문법은 JavaScript가 아닙니다.

1. 세 파일의 시작 코드 살펴보기

아래 실제 코드를 편집하세요. HTML은 버튼과 메시지를 만들고, CSS는 모양을 정하고, JavaScript는 클릭과 문구 변경을 연결합니다.

HTML의 버튼 ID와 JavaScript의 선택자 ID가 일부러 다릅니다. 시작 코드를 미리보기에서 실행한 다음 안내를 보고 선택자를 고쳐 보세요.

HTMLCSSJavaScript

격리된 미리보기

이 미리보기는 제한된 HTML·JavaScript 문법만 받아 해석한 뒤 정규화된 페이지를 다시 만듭니다. 임의 JavaScript를 안전하게 격리하는 실행 환경이 아닙니다. 링크·폼·지원된 클릭 처리기 밖의 스크립트·프레임·외부 리소스·페이지 이동·네트워크 API는 지원하지 않습니다. 정규화한 페이지는 sandbox="allow-scripts"만 허용한 불투명한 origin의 iframe과 제한적 Content Security Policy에서 실행되며, 이 페이지의 DOM·저장소에 접근하거나 페이지로 메시지를 보내지 않습니다.

미리보기를 실행하면 여기에 페이지가 나타납니다.

마지막 업데이트: 2026년 10월 7일 · 버전: v0.0.1

피드백 보내기

입력한 내용으로 새 이슈 페이지를 엽니다.

GitHub 이슈로 보내기