본문으로 건너뛰기
Numio

HTML 코드를 Pug 템플릿으로 변환 — Numio

HTML을 닫는 태그 대신 들여쓰기를 쓰는 Pug(옛 이름 Jade) 템플릿 구문으로 변환합니다. 전체 문서와 HTML 조각 사이를 전환하고, 탭·쉼표·따옴표 스타일을 고를 수 있습니다. HTML은 변환을 위해 서버로 전송됩니다.

기존 HTML 마크업에서 Pug 템플릿 작성을 시작할 때.

처리는 브라우저에서 로컬로 실행되며 입력은 업로드되지 않습니다. 같은 탭에서 도구를 바꿔도 입력이 남을 수 있으니 공용 기기에서는 사용 후 지워 주세요.
Pug output options
Load an example (replaces your input)

HTML

Pug

이럴 때 사용하세요

  • 기존 HTML 마크업에서 Pug 템플릿 작성을 시작할 때.
  • 페이지 전체를 변환하기 전에 짧은 스니펫으로 속성과 중첩이 Pug에 어떻게 대응하는지 확인할 때.

사용 방법

  1. HTML을 붙여 넣거나 예시(HTML fragment, form attributes, HTML document)를 불러옵니다. 예시를 불러오면 입력이 바뀝니다.
  2. 조각 모드를 켜면 html, head, body 래퍼 없이 스니펫만 변환합니다. 아래 예시는 조각 모드에서 탭과 쉼표를 켜고 큰따옴표를 끈 상태입니다.
  3. Pug를 복사하고 사용하는 Pug 환경에서 컴파일해 렌더링된 HTML을 확인합니다.

HTML 입력

<section class="card"><h2>News</h2><p>Registration is open</p></section>

Pug 출력(조각 모드, 탭과 쉼표 켬)

section.card
	h2 News
	p Registration is open

세부 정보 및 제한 사항

조각 모드를 끄면 HTML이 문서로 처리되어 html, head, body가 추가될 수 있습니다. 요소만 필요하면 조각 모드를 켜세요.

탭과 공백을 섞으면 Pug에서 부모–자식 관계가 바뀔 수 있습니다. 프로젝트의 들여쓰기 스타일을 따르세요.

반복되는 HTML은 Pug의 each 반복문, mixin, 변수로 바뀌지 않으며, 외부 CSS, 이미지, 스크립트는 포함되지 않습니다.

HTML 파서가 불완전한 태그를 고칠 수 있습니다. 변환이 성공했다고 HTML이 유효하거나 페이지가 동일하다는 보장은 없습니다.

FAQ

html과 body 태그가 추가되는 이유는 무엇인가요?

문서 모드에서는 파서가 바깥 요소를 보완합니다. 조각 모드를 켜면 컴포넌트의 HTML을 래퍼 없이 변환할 수 있습니다.

VS Code나 명령줄에서 HTML을 Pug로 변환할 수 있나요?

이 페이지는 오픈 소스 html2pug 패키지를 실행합니다. npm에서 설치하면 스크립트나 명령줄에서 파일을 변환할 수 있고, 짧은 스니펫은 계속 이 페이지에서 변환해도 됩니다.

Pug를 다시 HTML로 바꾸려면 어떻게 하나요?

이 페이지는 HTML을 Pug로만 변환합니다. HTML을 다시 얻으려면 pug-cli 패키지 등으로 Pug 자체를 사용해 템플릿을 컴파일하세요.

HTML이 업로드되나요?

네, 변환을 위해 douni.one 서버로 전송됩니다. 공유해도 되는 코드를 사용하고, API 키나 고객 데이터는 미리 지우세요.

사양 및 참고 자료