웹 페이지를 작성하고, 코드를 미리 보고, HTML, CSS 및 JavaScript를 배우세요.
HTML 에디터로 웹 아이디어를 실제 작동하는 페이지로 구현해 보세요. CSS와 JavaScript를 포함한 HTML 코드를 작성하고, 결과를 미리 보고, 간단한 강의를 통해 변경하는 코드를 이해할 수 있습니다. 모바일 기기에서 간단한 웹 페이지를 만들어보는 학생, 초보자, 개발자에게 실용적인 작업 공간을 제공합니다.
코드 작성 및 검토
구문 강조 표시, 괄호 일치, 자동 닫기, 실행 취소 및 다시 실행 기능을 갖춘 코드 에디터에서 작업하세요. 줄 번호를 표시하고, 텍스트를 찾고, 코드 조각이 길어지면 특정 줄로 이동할 수 있습니다. 추가 기호 도구 모음을 통해 자주 사용하는 코딩 문자를 쉽게 찾을 수 있어 태그와 표현식을 입력할 때 키보드 레이아웃 전환 횟수를 줄일 수 있습니다.
코드, 출력, 콘솔 탭 사이를 자유롭게 이동하세요. 출력 보기에서는 스타일과 스크립트를 포함하여 문서가 앱 내에 렌더링됩니다. 편집 중에는 자동 미리 보기 새로 고침 기능을 사용하거나, 원하는 경우 이 기능을 끌 수 있습니다. 콘솔 메시지를 통해 페이지의 JavaScript가 어떻게 작동하는지 확인할 수 있습니다.
다양한 미리보기 너비 살펴보기
휴대폰, 태블릿 또는 데스크톱 미리보기 모드를 선택하여 레이아웃이 다양한 너비에서 어떻게 보이는지 확인하세요. 앱 내에서 미리 보기를 통해 반응형 디자인 작업 시 간격과 레이아웃을 확인할 수 있습니다. 제목을 입력하고 스타일 규칙을 조정한 다음 출력 화면으로 돌아가서 효과를 확인해 보세요.
개념을 배우고 연습하기
학습 모드에서는 HTML, CSS 및 JavaScript 주제를 한곳에 모아 제공합니다. 모든 내용을 순서대로 읽는 대신 주제별로 필터링하거나 개념을 검색할 수 있습니다. 각 레슨에는 설명, 간단한 힌트, 실제 사용 사례, 흔히 발생하는 문제점, 예제 및 코드 풀이가 포함되어 있습니다.
레슨 후에는 두 가지 간단한 코딩 과제가 주어집니다. 먼저 예제를 복원한 다음 해당 개념을 사용하여 새로운 코드 조각을 작성하세요. 답을 확인하고 피드백을 읽은 후 다시 시도하려면 시작 부분을 초기화하세요. 첫 번째 과제를 완료하면 두 번째 과제가 잠금 해제됩니다. 읽기 및 연습 진행 상황은 로컬에 기록되므로 시작한 주제로 다시 돌아갈 수 있습니다.
작업 저장 및 공유
문서를 작성하거나, 저장된 HTML 파일을 열거나, [저장] 및 [다른 이름으로 저장] 기능을 사용하여 작업을 HTML 파일로 저장할 수 있습니다. 문서 자체를 전송하려면 [파일 공유] 기능을 사용하세요. 온라인으로 작업을 전달하려면 전송 코드 또는 공유 링크를 생성하고 웹 편집기를 사용하여 스니펫 작업을 계속할 수 있습니다. 온라인 전송은 현재 코드를 서비스로 전송하며 인터넷 연결이 필요합니다.
편리한 작업 공간 만들기
밝은 테마, 어두운 테마 또는 시스템 테마 중에서 선택하고 편집기 글꼴 크기를 조정할 수 있습니다. 설정에서 줄 수, 접근성 모드, 자동 저장, 종료 시 백업 및 세션 복원을 제어할 수 있습니다. 초안 및 작업 공간 복사본은 로컬 앱 데이터이므로 중요한 작업은 로컬 세션을 영구 백업으로 사용하지 않고 파일로 저장하세요.
[데이터 및 개인정보 보호] 페이지에서 설정을 검토하고, 임시 편집기 데이터를 삭제하거나, 로컬 앱 데이터를 재설정할 수 있습니다. 보상 허브에서는 선택 사항으로 일일 보상과 광고 기반 코인 활동을 제공합니다. 보상 코인은 현금이 아닌 앱 내 아이템입니다.
개별 페이지 편집 및 묶음 강의 읽기에는 온라인 서비스가 필요하지 않습니다. 원격 이미지, 외부 스크립트, 온라인 전송 및 광고에는 연결이 필요합니다. HTML 편집기를 사용하여 개념을 읽고, 변경 사항을 시도하고, 결과를 검토하고, 향후 작업에 활용할 코드를 저장하세요.