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

○ Pug에서 HTML 표현하기

- 기본적으로 Pug는 '< >'가 없습니다.

- 하이어라키는 탭, 스페이스로만 구분합니다.

> 중요한 것은 모든 파일에 동일한 방식을 사용해야 한다는 점입니다.

- '< >'를 사용하지 않기에 태그 별 속성 표시도 다르게 합니다.

> 태그 명 뒤에 소괄호로 묶어서 표현합니다.

[HTML]

<!DOCTYPE html>
<html>
    <head>
        <title>익스프레스</title>
        <link rel="stylesheet" href="/style.css" />
    </head>
</html>

[PUG]

doctype html
html
	head
    	title= title
        link(rel='stylesheet', href='/stylesheets/style.css')

- 속성 중 아이디는 #, 클래스는 .(점)으로 표현합니다.

- 단, div 태그의 경우 div는 생략이 가능합니다.

[HTML]

<div id="login-button"></div>
<div class="post-image"></div>
<span id="highlight"></span>
<p class="hidden full"></p>

[PUG]

#login-button
.post-image
span#highlight
p.hiddne.full

머리는 나쁘지만 공부가 취미입니다