본문 바로가기

블로그/Node.JS

Jade 기본 문법(1/2)

1. 기본 문법

Jade는 들여쓰기(인덴팅)를 통해 계층 구조 표현.

주의 : 단위 통일되야됨. ex)탭 한칸과 띄어쓰기 4칸은 다름.


Jade입력

html

head

body

결과

<html>

<head></head>

<body></body>

</html>


2. ID표현 

CSS, jQuery처럼 #으로 id표현함.


Jade입력

html

head

body

div#division1

div#division2

결과

<html>

<head></head>

<body>

<div id='division1'></div>
<div id='division2'></div>

</body>

</html>


3. 클래스 표현

CSS, jQuery처럼 .으로 id표현함.


Jade입력

html

head

body

div#division1.divStyle1

div#division2.divStyle2

결과

<html>

<head></head>

<body>

<div id='division1' class='divStyle1'></div>
<div id='division2' class='divStyle2'></div>

</body>

</html>


4. 속성 표현

괄호 안에 기타 속성 표현.


Jade입력

html

head

body

div#division1.divStyle1(style="color:red")

div#division2.divStyle2(style="color:white")

결과

<html>

<head></head>

<body>

<div id='division1' class='divStyle1' style="color:red"></div>

<div id='division2' class='divStyle2'style="color:white"></div>

</body>

</html>