PUG 기능

PUG 특징 및 기능을 간단히 설명한다

 

- 들여쓰기 문법

doctype html
html
    head
        title PUG World
    body
        main PUG Main

들여쓰기 문법이라 가독성이 좋고 코딩 시간을 줄여준다

 

- block & extends

레이아웃 틀을 만들어 다른 pug 파일에 합칠 수 있다

frame.pug

doctype html
html
    head
        title PUG World
    body
        main 
            block content

main.pug

extends frame

block contents
	h1 이 곳의 내용이 layout.pug 의 content 부분에 들어가게된다

html 틀 같은 중복되는 코드를 줄여준다

 

- include

컴포넌트 식으로 나누어 코드를 작성 할 수 있다

frame.pug

doctype html
html
    head
        title PUG World
    body
        main 
            block content
        include ../partials/footer

 

footer.pug

footer.footer
	p I'm footer

footer에서 따로 설정 해 줄 것은 없다

 

- Javascript

pug에서는 자바스크립트를 실행 시킬 수 있다

doctype html
html
	body
		h1 현재 시간 : #{ new Date().getHours() }시 입니다

위처럼 #{ } 안에 자바스크립트 코드를 작성하면 된다

 

- Text without Tag

PUG에서도 태그없이 텍스트를 입력할 수 있다

doctype html
html
    body
        .without-tag
            | It's done

태그 대신 | 를 넣으면 텍스트로 인식한다