HAML로부터 크게 영향을 받아 자바스크립트로 구현된 고성능 템플릿 엔진.
Ejs와 같은 템플릿 엔진으로 “HAML+Jade특수태그”를 사용하여 만들어진 Jade형식의 문서를 HTML 형태로 변환해주는 모듈
HAML(HTML Abstraction Markup Language)
HTML과 같은 마크업 언어로 인라인 코드의 사용없이 HTML문서를 깔끔하게 단순하게 만들기 위해 사용된다.
HAML은 PHP, ASP, ERB, 템플릿 언어로 사용되고 있는 대부분의 Ruby on Rails 응용 프로그램과 같은 인라인 페이지 템플릿 시스템을 대체하기 위한 기능이다.
그러나 HAML은 조금의 코드로 동적인 컨텐츠를 생성할 수 있고, 그 자체가 HTML에 대한 설명이기 때문에 템플릿 안에 HTML 코딩하는 것을 방지한다.
Jade 특수 태그
- -Code : 자바스크립트 코드를 입력
- #{value} : 데이터를 출력, 내용물 중간에 데이터 입력
- =value : 데이터를 출력, 내용물 전체를 데이터로 지정
Jade 모듈 함수
compile(str) jade문자열을 HTML 문자열로 바꿀 수 있는 함수를 생성
param{string} jade문자열
Return {function} 함수를 리턴함으로 함수를 call하면 html이 출력됨.
Jade 특징
Zipping(줄 바꿈과 공백을 제거,소스코드가 붙어서 웹페이지 용량을 줄이는 것)한 상태로 HTML를 생성하기 때문에 용량이 줄어든다.
[zipping된 HTML 소스]
<!DOCTYPE html><html><head><title>index page</title></head><body><h1>haeyeon</h1><h2>설명</h2><hr><div id="your-names"></div><p>[0] my name is haeyeon</p><p>[1] my name is haeyeon</p><p>[2] my name is haeyeon</p></body></html>
** 파일들의 인코딩은 utf-8로 되어 있어야 소스가 동작한다
** 들여쓰기, 인덴팅(indenting)을 통해 계층 구조를 표현함. Jade 파일 단위에서는 들여쓰기 단위가 절대적으로 통일 되어야 한다.
a(href="http://www.naver.com" data-test="m") naver
태그(속성=”값”) 텍스트
태그 텍스트
!!! 5 <!Doctype html>
//JADE String <!---JADE String-à
.클래스명 <div class=”클래스명”> 자동으로 class명이 “클래스명”인 div가 생성됨.
HAML script, style
style
*{ margin:0px; padding:0px}
h1{color:red;}
script(src='http://code.jquery.com/jquery-1.7.js')
script
$(document).ready(function () {
var alpha=10;
});
Html to jade converter
http://html2jade.aaron-powell.com/
'Old > NODE.JS' 카테고리의 다른 글
| node.js connector 모듈 간략한 설명 (0) | 2013.10.25 |
|---|---|
| heroku에서 log 보기 (0) | 2013.10.25 |
| EJS 모듈 (0) | 2013.10.23 |
| MongoDB (0) | 2013.10.23 |
| Mongo DB 설치 (0) | 2013.10.23 |