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>
'블로그 > Node.JS' 카테고리의 다른 글
| npm으로 설치한 node모듈 제거 방법 (0) | 2013.11.04 |
|---|---|
| HTML 소스를 Jade로 변환해주는 웹 사이트 모음! (0) | 2013.10.30 |
| Jade 기본 문법(2/2) - 콘텐츠 표현 (0) | 2013.10.28 |