HTML to Pug 변환기

HTML을 Pug 템플릿 문법으로 변환합니다

샘플

🚀 194,724 총 변환 (4 이번 달)

이 도구는 무엇인가요?

이 무료 온라인 도구는 표준 HTML을 깔끔하고 들여쓰기된 Pug 템플릿으로 빠르게 변환할 수 있게 해줍니다. Node.js와 현대적인 웹 프레임워크를 사용하는 개발자들이 읽기 쉽고 유지보수하기 좋은 코드를 선호할 때 이상적입니다.

사용 방법

편집기에 HTML 코드를 붙여넣거나 직접 입력하세요.
해당 Pug 코드를 생성하려면 변환을 클릭하세요.
결과를 다운로드하거나 복사하거나 고유 링크로 공유하세요.

또한 Google 또는 GitHub으로 로그인하여 변환 기록을 저장하고 나중에 사용할 수 있습니다.

Pug란 무엇인가요?

Pug는 Haml에서 영감을 받은 Node.js용 고성능 템플릿 엔진입니다. 전통적인 HTML을 간결하고 공백에 민감한 구문으로 대체하여 코드의 명확성을 높이고 반복을 줄입니다.

Pug는 Express.js로 구축된 웹 앱에서 일반적으로 사용되며, 코드 재사용성, 논리 임베딩, 깔끔한 들여쓰기와 같은 고급 기능을 제공합니다.

공식 Pug 문서에서 더 알아보세요.

Pug 구문 예제


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p 당신은 대단합니다
      else
        p 시작해보세요!
      p.
        Pug는 성능과 기능에 중점을 둔
        간결하고 단순한 템플릿 언어입니다.

HTML vs Pug 예제

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>당신은 대단합니다</p>
      <p>Pug는 성능과 강력한 기능에 중점을 둔 간결하고 단순한 템플릿 언어입니다.</p>
    </div>
  </body>
</html>

Pug


doctype html
html(lang="en")
  head
    title Pug
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      p 당신은 대단합니다
      p Pug는 성능과 강력한 기능에 중점을 둔 간결하고 단순한 템플릿 언어입니다.