미리 보기로 보기·하이라이트·배우기를 한곳에서
그냥 미리 보기가 아니에요. 실시간 표시에 구문 강조와 설명 기능을 더해, 어떤 코드가 화면의 어디에 대응하는지 바로 확인하고 보면서 배울 수 있어요. 레이아웃 점검부터 프론트엔드 학습까지, 보기와 배우기 둘 다 고려한 도구예요.
계정 없이 사용
브라우저에서 실행
학습자들이 이용
보고 배우는 미리 보기
HTML, CSS, JavaScript를 한 도구에서 보고, 하이라이트와 설명으로 ‘어느 줄이 어느 요소인지’까지 알 수 있는 공간이 필요해서 만들었어요. 미리 보기를 클릭하면 코드가, 코드를 클릭하면 미리 보기가 하이라이트되고, 설명으로 동작 방식까지 이해할 수 있어요. 보기만이 아니라 제대로 배우고 싶은 분을 위한 도구예요.
코드와 미리 보기가 연동
이 도구를 열면 왼쪽에 HTML/CSS/JS 코드, 오른쪽에 실시간 미리 보기가 나와요. 미리 보기 안 요소를 클릭하면 해당 코드가, 코드 한 줄을 클릭하면 미리 보기 쪽이 하이라이트되어 양방향으로 대응 관계를 따라갈 수 있어요. 보기와 배우기를 이렇게 한곳에서 쓰기 편하게 만든 도구는 많지 않아요.
설명 기능으로 많은 태그·속성·CSS에 대해 ‘무슨 역할을 하는지’ ‘화면에 어떻게 반영되는지’를 짧게 보여줘요. 그래서 미리 보기만 하는 게 아니라 코드 의미까지 배우게 되고, 남의 스니펫을 확인할 때든 직접 작성 연습할 때든 결과를 보면서 원리를 이해할 수 있어요. 일반 미리 보기와 다른, 이 도구만의 쓰임이에요.
html 미리 보기 사용해 보기실시간 표시와 하이라이트
이 도구는 실시간 미리 보기에 더해 코드와 미리 보기 양방향 하이라이트로, 요소별 대응을 따라가기 쉽게 해요.
설명 기능
미리 보기하면서 태그·속성·CSS 설명을 볼 수 있어요. 보면서 배우는 미리 보기이자 학습 도구예요.
보기와 배우기 한곳에서
이 도구로 어떤 HTML/CSS/JS든 불러와 플레이그라운드에서 수정·확인하며 단계적으로 프론트엔드를 배울 수 있어요.
이 도구를 쓰는 이유: 보기·하이라이트·배우기
핵심은 양방향 하이라이트 연동이에요. 코드의 한 줄을 클릭하면 미리 보기에서 해당 요소가 보이고, 미리 보기 쪽 요소를 클릭하면 소스 코드의 해당 줄로 이동해요.
양방향 하이라이트 연동(코드 ↔ 미리 보기)
이 도구의 하이라이트는 «코드 ↔ 미리 보기» 매핑이에요. 코드에서 한 줄을 클릭하면 미리 보기에서 해당 요소가 하이라이트되고, 미리 보기에서 요소를 클릭하면 에디터가 소스 코드의 해당 줄로 점프한 뒤 그 줄도 함께 하이라이트합니다. 참고: 코드가 아주 길면 미리 보기에서 클릭했을 때 점프 위치가 정확한 하이라이트 줄보다 약간 위에 잡힐 수 있어요. 이때는 아래로 조금만 스크롤하면 정확한 하이라이트 줄을 확인할 수 있습니다.
- 실시간 표시: 이 도구로 HTML/CSS/JS를 즉시 확인
- 양방향 하이라이트: 코드나 미리 보기 클릭 시 둘 다 연동
- 설명 기능: 미리 보기하면서 태그와 스타일 학습
- 가입 불필요: 브라우저에서 무료로 이용
플레이그라운드: 꼭 알아두면 좋은 기능
편집 모드와 양방향 하이라이트
기본적으로 코드와 미리 보기가 서로 연결돼요. 미리 보기에서 요소를 클릭하면 해당 코드가, 코드를 클릭하면 미리 보기에서 해당 부분이 하이라이트돼요. 길게 입력하거나 큰 덩어리를 붙여 넣을 때는 「편집」으로 편집 모드에 들어가면 하이라이트 연동과 이동이 꺼져서 입력에 집중할 수 있어요.
포맷
「포맷」은 현재 탭(HTML / CSS / JavaScript)의 들여쓰기와 줄바꿈을 정리해 읽기 쉽게 맞춥니다.
모두 펼치기 / 모두 접기
긴 코드에서는 편집기가 영역을 접을 수 있어요. 「모두 펼치기」는 접힌 부분을 한 번에 펴고, 「모두 접기」는 한 번에 접어서 전체 구조를 보거나 한 부분에 집중하기 쉽게 해줘요.
이 도구에 대한 이용 후기
개발자와 학습자들이 이 도구로 코드를 보고, 소스와 미리 보기를 대응시키며 프론트엔드를 배우고 있어요. 그분들의 이야기 일부예요.
‘이 줄 코드가 화면의 어디에 나오는지’ 알 수 있는 도구가 필요해서 썼어요. 하이라이트와 설명으로 딱 그걸 해주고, 매일 스니펫 확인하고 CSS 배우는 데 쓰고 있어요. 보면서 배우기엔 이만한 도구가 없어요.
김민준
프론트엔드 개발자
"설명 기능 덕분에 미리 보기 보면서 각 태그·스타일이 뭘 하는지 알 수 있어요. 학생한테 특히 추천하는 도구예요."
이서연
학생 / 이용 4개월
"튜토리얼 HTML/CSS를 이 도구로 확인·디버깅해요. 양방향 하이라이트가 편해서, 화면 클릭하면 코드가 나와요."
박지훈
디자이너 / 이용 2개월
"보기만 하는 게 아닌 도구를 찾다가 쓰게 됐어요. 보기·하이라이트·설명이 한곳에 있어서 HTML과 CSS가 어떻게 맞물리는지 이해하는 데 도움이 됐어요."
최유나
입문자 / 이용 3개월
html 미리 보기 자주 묻는 질문
지금 사용하기
브라우저에서 이 도구를 열고 HTML, CSS, JavaScript를 실시간으로 보세요. 하이라이트와 설명이 있고, 가입 없이 바로 보고 배울 수 있어요.
html 미리 보기
- 하나의 도구로 HTML·CSS·JS 보기
- 실시간 표시와 코드·미리 보기 양방향 하이라이트
- 설명 기능으로 보면서 배우기
- 가입 불필요, 브라우저에서 무료 이용
