JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2018.07.30 / 10:22

뷰 템플릿엔진 Jade (Pug) 강의 1부

summerman
추천 수 217 
템플릿 엔진은 여러가지있는데 그중에서 Jade (Pug)가 개념을 이해하는데 쉬웠음.
우선 Jade (Pug)가 무엇인지 설명해드림

nodejs에서 동작하는 뷰 템플릿엔진이라 보시면 된다. 
마크업 코드를 획기적으로 줄여주고 구현에만 집중할수있다

간단하게 구문 설명을 하자면

1. 태그 내용
코드:	
  1. h1 컨텐츠내용
결과:	
  1. <h1>컨텐츠내용</h1>


2. 내용
코드:	
  1. | text
결과:	
  1. text

3. 태그#아이디
코드:	
  1. div#id
결과:	
  1. <div id="id"></div>

* 이해를 돕기위해 id값을 변경하면 아래와같이된다
4. 태그#아이디
코드:	
  1. div#test
결과:	
  1. <div id="test"></div>

5. 태그.클래스.클래스
코드:	
  1. div.class1.class2
결과:	
  1. <div class="class1 class2"></div>
* 스타일시트 class를 이야기하는것이니... 프로그래밍 개념의 class를 말하는것이 아니다.

6. 태그#아이디.클래스.클래스
코드:	
  1. div#test.class1.class2
결과:	
  1. <div id="test" class="class1 class2"></div>
* 속성(attribute)중에서 id와 class만이 위와같이 축약되는 기능을 가진다.

7. 태그#아이디.클래스.클래스
코드:	
  1. div#test.class1.class2
결과:	
  1. <div id="test" class="class1 class2"></div>

8. .클래스
코드:	
  1. .class1
결과:	
  1. <div class="class1"></div>
* 여기서 태그를 생략도 가능하다는걸 알수있다.

9. div(속성="") text
코드:	
  1. div(style="color:black;") text
결과:	
  1. <div style="color:black;">text</div>
*그렇다면 id값을 속성으로 써도될까?

코드:	
  1. div(id="test") text
결과:	
  1. <div id="test">text</div>
* 당연히 써도된다. 하지만

코드:	
  1. div#test(id="test") text
*이런코드를 쓰면 페이지 렌더링 오류난다...


* 예시코드를 올려본다.
* 여기서 중요한것은... 들여쓰기에 따라 결과가 완전히 달라지기때문에 반드시 html 태그안에 head가 존재해야만 한다.
  1. doctype html
  2. html(lang="ko")
  3.     head
  4.         meta(charset="utf-8")
  5.         title NZO.IO
  6.     body
  7.         span body

결과:	
  1. <!DOCTYPE html><html lang="ko"><head><meta charset="utf-8"><title>NZO.IO</title></head><body><span>body</span></body></html>


*만약 여기서 html과 head가 같은 들여쓰기 라인에 있다면...?
  1. doctype html
  2. html(lang="ko")
  3. head
  4.     meta(charset="utf-8")
  5.     title NZO.IO
  6. body
  7.     span body
결과:	
  1. <!DOCTYPE html><html lang="ko"></html><head><meta charset="utf-8"><title>NZO.IO</title></head><body><span>body</span></body>
										△

html태그가  엉뚱한데서 바로 닫히고 head태그가 열리는것을 볼수있다.


jade는 들여쓰기 매우 중요하다



다음장에서 강의함