코드 예제, 편집기, 퀴즈 및 게임을 통해 HTML, CSS 및 JavaScript를 배우세요.
코드를 수정하고 그 결과를 확인하면서 웹 개발을 배워보세요. HTML Code Play는 HTML, CSS, JavaScript 강의와 모바일 코드 편집기, 실행 가능한 예제, 퀴즈, 코딩 게임을 결합한 앱입니다. 개념을 학습하고 직접 실행해 보면서 학습 과정을 같은 기기에서 관리하세요.
읽고, 편집하고, 실행하세요
학습 카탈로그를 탐색하고, 튜토리얼을 열어 전체 코드 예제와 함께 설명을 읽어보세요. 예제를 편집기로 보내고, 원본 코드를 실행한 다음, 태그, 스타일 또는 표현식을 변경하고 결과를 비교해 보세요. 이 실습 중심의 워크플로는 읽은 구문과 그 구문이 만들어내는 페이지 또는 동작을 직접 연결해 줍니다.
워크스페이스는 구문 강조 기능을 지원하는 HTML, CSS, JavaScript 편집 기능을 제공합니다. 실행 취소 및 다시 실행 기능을 사용하여 실습하고, 텍스트를 찾고, 특정 줄로 이동하고, 편집기 글꼴 크기를 조정하세요. 새 페이지를 시작하거나 제공되는 템플릿을 선택하여 시작점으로 활용할 수 있습니다. HTML 파일을 열고, 작업을 저장하고, '다른 이름으로 저장' 기능을 사용하여 사본을 만들거나, 기기의 공유 옵션을 통해 코드 파일을 공유할 수 있습니다.
체계적인 학습 및 연습
이 카탈로그는 페이지 구조 및 스타일링부터 스크립팅, 벡터 그래픽, 반응형 레이아웃, 인터랙티브 예제에 이르기까지 11가지 웹 기술 주제를 다룹니다. 제목이나 섹션별로 강의를 검색하여 필요한 자료를 찾으세요. 유용한 강의를 고정하여 집중적으로 복습하고, 자신만의 강의 메모를 추가하고, 이전 및 다음 버튼을 사용하여 강의 사이를 이동할 수 있습니다.
각 강의는 설명, 구문 및 작동 예제를 함께 제공합니다. 주제 퀴즈 또는 연습 문제를 통해 학습을 마무리하세요. 연습 문제는 누락된 코드를 완성하도록 요구하며, 힌트와 정답 피드백을 통해 놓친 부분을 확인할 수 있습니다. 퀴즈 결과를 통해 이해도를 점검하고 다음 강의로 돌아갈 수 있습니다.
6가지 연습 방법
다음과 같은 코딩 게임을 선택하여 다양한 기술을 연습하세요.
- 코드 빌더: 블록 순서를 바꿔 작동하는 코드를 다시 작성합니다.
- 출력 탐정: 코드 조각의 출력 결과를 예측합니다.
- 버그 찾기: 오류가 있는 줄을 찾습니다.
- 빈칸 채우기: 누락된 코드 토큰을 선택합니다.
- 용어 연결하기: 용어와 그 의미를 연결합니다. - 속사포 퀴즈: 제한 시간 내에 참/거짓 문제를 풀어보세요.
활동 레벨은 결과를 기록하고 다음 단계로 넘어갈 수 있도록 도와줍니다. 점수를 향상시키려면 이미 완료된 레벨을 다시 플레이하거나, 새로운 연습 플레이리스트가 제공되면 이를 활용하세요.
체계적인 학습 관리
진행 상황 화면에서는 복습한 레슨, 퀴즈, 연습 문제를 기술별로 요약하여 보여줍니다. 스킬 맵과 추천 학습 계획을 확인하고, 홈 화면에서 레슨을 이어서 진행하거나, 일일 챌린지에 도전해 보세요. 연속 학습 기록과 챌린지 배지를 통해 학습 활동을 시각적으로 확인할 수 있습니다. 선택적으로 학습 알림을 사용하려면 알림 권한이 필요하며, 이 기능을 끌 수도 있습니다.
레슨 진행 상황, 메모, 게임 결과는 기기에 저장됩니다. 학습 화면 컨트롤에는 글꼴 크기 확대, 대비 증가, 동작 최소화 등의 기능이 포함되어 있습니다. HTML, CSS, JavaScript 평가를 통해 앱 내에서 성취 인증서를 받을 수 있습니다. 이 인증서는 앱 학습 기록일 뿐, 공인 자격증은 아닙니다.
온라인 커뮤니티 게시물은 인터넷에 연결되어 있을 때 탐색할 수 있는 또 다른 코드 소스입니다. 외부 리소스를 로드하는 네트워크 기반 콘텐츠 및 예제를 이용하려면 인터넷 연결이 필요하며, 로컬 진행 상황 저장소는 클라우드 동기화를 지원하지 않습니다.
초보자, 학생, 그리고 프런트엔드 개념을 다시 배우는 학습자라면, 하나의 예제부터 시작하여 작은 변화를 주고 연습을 통해 이해도를 높여나가세요.