💻
개발자 도구
개발자 도구
HCJ
HHTML
에디터 로딩 중…
개발자 도구 기능
HTML, CSS, JavaScript 세 가지 언어를 브라우저에서 직접 편집하고 실시간으로 결과를 미리볼 수 있습니다. 구문 강조(Syntax Highlighting), 괄호 자동 완성, 다크/라이트 모드 테마를 지원합니다. 공유 링크를 생성해 코드를 손쉽게 공유하거나 나중에 다시 불러올 수 있습니다.
사용 방법
① HTML, CSS, JS 탭 중 원하는 언어 탭을 선택합니다. ② 코드를 입력하면 600ms 후 미리보기 패널이 자동으로 업데이트됩니다. ③ 다크/라이트 모드 버튼으로 에디터 테마를 전환할 수 있습니다. ④ 공유 버튼을 누르면 현재 코드가 URL로 인코딩된 공유 링크가 복사됩니다.
이런 때 사용하세요
• HTML·CSS 레이아웃 아이디어를 빠르게 프로토타이핑 • JavaScript 코드 스니펫 테스트 • 팀원이나 커뮤니티에 코드 예제 공유 • 간단한 웹 페이지 구조 확인 및 학습
자주 묻는 질문
- Q. 어떤 언어를 지원하나요?
- A. HTML, CSS, JavaScript 세 가지 언어를 지원합니다. 각 언어에 맞는 구문 강조(Syntax Highlighting)와 괄호 자동 완성 기능이 제공됩니다.
- Q. 작성한 코드를 저장하거나 공유할 수 있나요?
- A. '공유' 버튼을 누르면 현재 코드가 URL 해시로 인코딩된 공유 링크가 클립보드에 복사됩니다. 이 링크를 통해 동일한 코드 상태를 언제든 복원할 수 있습니다.
- Q. 미리보기가 자동으로 업데이트되나요?
- A. 네, 코드를 편집하면 600ms 후 자동으로 미리보기가 업데이트됩니다. 별도의 실행 버튼을 누를 필요가 없습니다.
- Q. 코드 에디터 테마를 바꿀 수 있나요?
- A. 툴바의 ☀️/🌙 버튼으로 다크 모드(Dracula)와 라이트 모드(Eclipse)를 전환할 수 있습니다.
- Q. HTML/CSS/JS 파일을 가져올 수 있나요?
- A. 현재는 직접 코드를 입력하거나 공유 링크로 불러오는 방식을 지원합니다. 파일 업로드 기능은 추후 추가될 예정입니다.