HTML 입력

Pug 출력

HTML → Pug 변환기란?

HTML → Pug 변환기는 표준 HTML 마크업을 Pug(구 Jade) 템플릿 구문으로 변환합니다. Pug는 장황한 HTML을 간결한 공백 기반 구문으로 대체합니다.

예: <div class="hero"><p>안녕</p></div>는 div.hero p 안녕이 됩니다.

HTML을 Pug로 변환하는 방법

3단계로 HTML을 Pug 템플릿 구문으로 변환합니다.

HTML 붙여넣기 또는 업로드

왼쪽 패널에 HTML을 붙여넣거나 업로드를 클릭하세요.

Pug 출력 확인

.class 표기법, #id 표기법, 올바른 들여쓰기로 Pug 템플릿이 표시됩니다.

복사 또는 다운로드

복사 또는 다운로드로 .pug 파일로 저장.

이 도구가 유용한 경우

Express.js 프로젝트 마이그레이션

기존 HTML 템플릿을 Express의 Pug 뷰 엔진용으로 변환.

장황한 HTML 정리

Pug 구문은 파일 크기를 30-50% 줄입니다.

Pug 구문 학습

알고 있는 HTML의 Pug 동등물을 확인하여 학습.

프로토타입 템플릿 생성

HTML 도구 출력을 Node.js용 Pug 템플릿으로 변환.

자주 묻는 질문

Pug 구문이란?

Pug는 들여쓰기로 닫는 태그를 대체합니다. 클래스는 점 표기법(div.myClass), ID는 해시 표기법(div#myId), 속성은 괄호 안(a(href="/")).

중첩 요소를 지원하나요?

네. 변환기는 DOM을 재귀적으로 순회하여 올바른 들여쓰기 수준으로 각 요소를 출력합니다.

속성은 어떻게 처리되나요?

class와 id를 제외한 모든 속성은 괄호 안에 배치됩니다: input(type="text").

텍스트 콘텐츠가 보존되나요?

네. 텍스트 노드는 자식 요소가 없을 때 부모 태그와 같은 줄에 인라인 콘텐츠로 출력됩니다.

데이터가 저장되나요?

아니요. 모든 처리는 브라우저에서 이루어집니다.

HTML → Pug 변환기

HTML 입력

Pug 출력