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="
{
"very-long": "piece of ",
"data": 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>
'Javascript' 카테고리의 다른 글
Object.key()를 이용해 value가 제일 큰 값 반환하기 (0) | 2021.05.27 |
---|---|
fetch api 사용하기 (0) | 2020.03.22 |
[nodemon] app crashed - waiting for file changes before starting... (1) | 2019.12.01 |
[nodejs] nodejs에 Babel 적용하기 (0) | 2019.11.30 |
[nodejs] express.Router() (0) | 2019.11.24 |
댓글