HTML을 Pug로 변환기
HTML 코드를 빠르게 Pug 코드로 변환합니다. 로컬 브라우저 변환을 지원하며 코드 편집기 및 자동 완성 기능을 제공합니다.
HTML 입력
Pug 출력
사용 설명
HTML 코드 입력
왼쪽 입력 상자에 변환할 HTML 코드를 붙여넣거나 입력합니다.
변환 실행
"Pug로 변환" 버튼을 클릭하여 HTML 코드를 Pug 형식으로 변환합니다.
결과 보기
오른쪽 출력 상자에서 변환된 Pug 코드를 확인합니다.
결과 사용
변환된 Pug 코드를 복사하거나 다운로드하여 프로젝트에 사용합니다.
Pug 템플릿 엔진 기본 지식
Pug란?
Pug(이전 이름은 Jade)는 HTML로 컴파일되고 Node.js 환경에서 널리 사용되는 고성능 템플릿 엔진입니다. Pug는 개발자가 적은 코드로 구조화된 HTML 페이지를 작성할 수 있도록简洁하고 우아한 문법을 제공합니다. 또한 변수, 믹스인, 조건 판단 등의 고급 기능을 지원합니다.
Pug의 주요 장점
简洁한 문법, 중복 코드 감소
들여쓰기 문법, 코드 가독성 향상
템플릿 상속 및 포함 지원
강력한 논리 표현식 지원
자동 이스케이프, 보안성 강화
JavaScript 생태계와 원활한 통합
HTML과 Pug 문법 비교
<div class="container">
<h1>환영 페이지</h1>
<p class="description">
이것은 샘플 단락입니다
</p>
<ul>
<li>목록 항목1</li>
<li>목록 항목2</li>
</ul>
</div>
.container
h1 환영 페이지
p.description
| 이것은 샘플 단락입니다
ul
li 목록 항목1
li 목록 항목2
자주 사용되는 Pug 문법 예제
h1 제목 텍스트
div.container#main
a(href='link', title='제목')
div p 중첩 텍스트
//- 출력되지 않는 주석 // 출력되는 HTML 주석
- var name = '사용자' p= name
변환 유의 사항
- 복잡한 HTML 구조는 Pug의 모범 사례에 맞게 수동으로 조정해야 할 수 있습니다
- Pug는 엄격한 들여쓰기에 의존하므로 변환된 코드의 들여쓰기가 올바른지 확인하세요
- HTML의 스크립트 및 스타일 블록은 변환 후 특별히 처리해야 할 수 있습니다
- 대형 프로젝트의 경우 전문 Pug 변환기 또는 프레임워크 플러그인 사용을 권장합니다
API开发平台
快速构建、测试和部署API
推荐工具
XML 포맷터 도구 - 무료 온라인 XML 코드 미화 및 압축 도구
무료 온라인 XML 포맷터 도구로 XML 코드 미화, 압축, 검증 등의 기능을 지원하여 XML 코드를 보다 규격화되고 읽기 쉽게 만듭니다. 실시간 포맷 미리보기를 제공하며 다양한 XML 포맷 옵션을 지원합니다.
XML을 JSON으로 - 무료 온라인 변환 도구
XML을 JSON으로 변환 도구는 XML 형식 문자열과 JSON 형식 문자열을 파싱하고 변환할 수 있으며, 변환된 문자열을 포맷팅 처리합니다.
온라인 JavaScript 포맷터 및 압축 도구 - JS 코드 정리, 최적화, 난독화
강력한 온라인 JavaScript(JS) 코드 포맷팅 및 압축 도구입니다. 사용자 정의 들여쓰기(탭 또는 공백), 코드 접기/펼치기, 자동 줄 바꿈, 원클릭 코드 정리 및 효율적인 압축/난독화 기능을 지원하여 개발자가 코드 가독성을 높이고 파일 크기를 줄이며 웹사이트 성능을 최적화할 수 있도록 도와줍니다.
YAML에서 JSON 변환기 - 무료 온라인 도구 상자
온라인 YAML（YML）과 JSON 형식 상호 변환 도구로，YAML 데이터와 JSON 데이터 상호 변환을 지원하며，입력된 YAML 형식 데이터와 JSON 형식 데이터가 올바른지 검증도 지원합니다.
YAML 포맷팅 - 무료 온라인 YAML 도구
무료 온라인 YAML 포맷팅 및 미화 도구로, 자동 들여쓰기 조정, 구문 강조, 불필요한 공백 제거를 지원하여 YAML 코드를 명확하고 읽기 쉽게 만듭니다. 설치가 필요 없으며, 한 번의 클릭으로 포맷팅하여 YAML 파일의 가독성과 유지 관리 효율성을 향상시킵니다!