7. 익스프레스 (4) - 템플릿 엔진 : Pug 3

 

 

 

 

 

앞선 아티클에서 이어서 살펴보도록 하겠습니다. 

 

 

7. 익스프레스 (4) - 템플릿 엔진 : Pug 2

 

 

 

HTML 텍스트는 태그나 속성 뒤에 한 칸을 띄고 입력합니다. 생각보다 단순하죠.

 

 

[HTML]

<p>Welcome to the Real World</p>
<button type="submit">업로드</button>

 

 

[Pug]

p Welcome to the Real World
button(type='submit') 업로드

 

 

 

---

 

 

실제로는 한 줄로 출력되지만, 에디터에서 여러 줄로 입력하고 싶을 경우 파이프( | )를 사용합니다. 

 

 

[HTML]

<p>
    텍스트를 여러 줄 입력하고
    <br />
    태그를 중간에 삽입합니다
</p>

 

 

[Pug]

p
    |텍스트를
    |여러 줄 입력하고
    br
    |태그를 중간에 삽입합니다

 

 

 

---

 

 

style이나 script태그를 사용할 때는(CSS, Javascript 코드 작성) 태그 뒤에 점( . )을 사용합니다. 

 

[HTML]

<style>
    h1 {
        font-size: 20px;
    }
</style>
<script>
    const message = 'Pug';
    alert(message);
</script>

 

[Pug]

style.
    h1 {
        font-size: 20px;
    }
script.
    const message = 'Pug';
    alert(message);