원본 본문으로 이동하기

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

정니케 - 템플릿 엔진은 여러가지있는데 그중에서 Jade (Pug)가 개념을 이해하는데 쉬웠음. 우선 Jade (Pug)가 무엇인지 설명해드림 nodejs에서 동작하는 뷰 템플릿엔진이라 보시면 된다. 마크업 코드를 획기적으로 줄여주고 구현에만 집중할수있다 간단하게 구문 설명을 하자면 1. 태그 내용 코드: h1 컨텐츠내용 결과: <h1>컨텐츠내용</h1> 2. 내용 코드: | text 결과: text 3. 태그#아이디 코드: div#id 결과: <div id="id"></div> * 이해를 돕기위해 id값을 변경하면 아래와같이된다 4. 태그#아이디 코드: div#test 결과: <div id="test"></div> 5. 태그.클래스.클래스 코드: div.class1.class2 결과: <div class="class1 class2"></div> * 스타일시트 class를 이야기하는것이니... 프로그래밍 개념의 class를 말하는것이 아니다. 6. 태그#아이디.클래스.클래스 코드: div#test.class1.class2 결과: <div id="test" class="class1 class2"></div> * 속성(attribute)중에서 id와 class만이 위와같이 축약되는 기능을 가진다. 7. 태그#아이디.클래스.클래스 코드: div#test.class1.class2 결과: <div id="test" class="class1 class2"></div> 8. .클래스 코드: .class1 결과: <div class="class1"></div> * 여기서 태그를 생략도 가능하다는걸 알수있다. 9. div(속성="") text 코드: div(style="color:black;") text 결과: <div style="color:black;">text</div> *그렇다면 id값을 속성으로 써도될까? 코드: div(id="test") text 결과: <div id="test">text</div> * 당연히 써도된다. 하지만 코드: div#test(id="test") text *이런코드를 쓰면 페이지 렌더링 오류난다... * 예시코드를 올려본다. * 여기서 중요한것은... 들여쓰기에 따라 결과가 완전히 달라지기때문에 반드시 html 태그안에 head가 존재해야만 한다. doctype html html(lang="ko") head meta(charset="utf-8") title NZO.IO body span body 결과: <!DOCTYPE html><html lang="ko"><head><meta charset="utf-8"><title>NZO.IO</title></head><body><span>body</span></body></html> *만약 여기서 html과 head가 같은 들여쓰기 라인에 있다면...? doctype html html(lang="ko") head meta(charset="utf-8") title NZO.IO body span body 결과: <!DOCTYPE html><html lang="ko"></html><head><meta charset="utf-8"><title>NZO.IO</title></head><body><span>body</span></body> △ html태그가 엉뚱한데서 바로 닫히고 head태그가 열리는것을 볼수있다. jade는 들여쓰기 매우 중요하다 다음장에서 강의함 - NodeJS XML/XSL/XSLT HTML