HTML을 Pug 형식으로 변환하기
무료 온라인 서비스 HTML을 Pug 형식으로 변환하기 설치가 필요 없는 도구
HTML을 Pug로 변환 정보
브라우저 DOMParser를 사용하여 HTML 마크업을 Pug(이전 Jade) 템플릿 구문으로 변환합니다. 변환기는 깔끔한 Pug 단축 표기를 생성합니다. div 태그가 class 또는 id를 가지면 div 태그 이름이 생략되고, class는 .class 선택자가 되며, id는 #id 선택자가 되고, 나머지 속성은 괄호 안에 출력됩니다.
사용 방법
1. HTML을 HTML 입력 텍스트 영역에 붙여넣습니다. 2. 들여쓰기 크기(1-8)를 설정하고, 필요에 따라 탭 사용 및 단일 인용 부호를 전환합니다. 3. 변환을 클릭합니다. 4. Pug 출력 카드의 복사를 사용하여 결과를 복사합니다.
Pug 변환 규칙
들여쓰기는 설정된 수의 공백 또는 단일 탭을 사용합니다. 속성 값은 단일 인용 부호 옵션에 따라 단일 인용 부호 또는 이중 인용 부호를 사용합니다. class 및 id 속성은 .class / #id 단축 표기로 변환되어 속성 목록에서 제거됩니다. style 속성은 괄호 뒤에 style="..."로 유지됩니다. 자식이 없는 빈 요소(img, br, input, hr, meta, link 등)는 후행 /로 자체 닫힙니다. 단일 텍스트 자식은 태그 뒤에 인라인으로 배치되며, 여러 자식은 다음 줄에 중첩됩니다. 독립 텍스트 노드에는 파이프(| ) 접두사가 붙습니다.
▶<div class="card highlight" id="main"> 요소는 어떻게 변환되나요?
태그가 div이므로 태그 이름이 생략되고 요소는 Pug 단축 표기에서 #main.card.highlight가 됩니다. id를 먼저 사용한 다음 점이 있는 class를 사용합니다.
▶인라인 style 속성이 보존되나요?
네. style 속성은 괄호 안의 속성 목록에 포함되지 않습니다. 대신 style="<value>"(해당 옵션이 켜져 있으면 단일 인용 부호)로 괄호 뒤에 추가됩니다.
▶자체 닫힘 및 빈 요소는 어떻게 처리되나요?
자식이 없는 알려진 빈 요소(area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr)는 후행 슬래시로 출력됩니다. 예: img(src="x.png")/.
▶들여쓰기에 공백과 탭 중 선택할 수 있나요?
네. 탭 들여쓰기를 위해 탭 사용을 전환하거나, 끄고 들여쓰기 크기를 1에서 8 사이로 설정하여 레벨당 공백 수를 제어할 수 있습니다.
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.