템플릿 엔진 Pug의 속성과 문법

pug의 태그 속성은 html과 유사하지만 값은 일반적인 javascript이다.

pug와 html의 문법 차이에 초점을 맞추고 글을 작성했다.

 

pug와 html의 차이 

- pug를 쓸 경우 코드가 간결해진다.

- 열고 닫는 태그가 불필요하다.

- 태그안에 속성은 () 안에 작성한다.

- tab을 정확하게 해줘야한다. 지켜지지 않으면 코드가 동작하지 않는다.

 

 

1. 속성

pug

a(href="ooyuolog.tistory.com") ooyuolog
a(class="button" href="ooyuolog.tistory.com") ooyuolog

 

html

<a href="ooyuolog.tistory.com">ooyuolog</a>
<a class="button" href="ooyuolog.tistory.com">ooyuolog</a>

 

2. 여러개의 속성

pug

input(
	type="checkbox"
    name="agreement"
    checked
)

 

html

<input type="checkbox" name="agreement" checked="checked" />

 

pug

input(data-json=`
	{
    	"very-long": "piece of ",
        "data": true
    }
`}

 

html

<input data-json="
  {
    &quot;very-long&quot;: &quot;piece of &quot;,
    &quot;data&quot;: true
  }
" />

 

3. Boolean 속성

pug

input(type='checkbox' checked)
input(type='checkbox' checked=true)
input(type='checkbox' checked=false)

 

html

<input type="checkbox" checked="checked" />
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />

 

4. class literal

pug

a.buttonName
div.content

 

html

<a class="buttonName"></a>
<div class="content"></div>