Test for Jade

test.jade

doctype html
html(lang="ko-KR")
	head
		meta(http-equiv="X-UA-Compatible", content="IE=Edge")
		title Jade 기본 문법
		link(rel="stylesheet", href="css/style.css")
		//html 속성을 추가할때는 속성 값을 괄호로 묶는다. 속성이 두개 이상이라면 콤마(,)로 구분한 후 속성을 추가한다. *콤마가 없어도 변환가능하다.
		style.
			body.main {
				background-image: url(patterns/green_gobbler.png);
			}
		script.
			document.onclick = function(){
				console.log('Jade -> html 문서');
			};
	body
		h1 HTML 요소 이름
		p css 선택자와 유사
		p 일반적인 내용 입력은 요소 뒤에 내용을 입력합니다. 
		p 
			| 이렇게 사용해도 위 방식과 결과가 동일합니다. 
		p Jade에서 여러 줄을 
			|사용하고자 할 경우는 
			|기호'|'를 사용합니다. 
		h3 인라인 요소를 추가하는 방법
		p jade에서 요소 내부에 텍스트를 추가하는 <span> 일반적인 방식은 요소 뒤에 한 칸 공백을 두고 내용 텍스트를 입력하는 것 </span> 입니다. 그 외의 사용법은 <strong>파이프(|)기호를 사용해 아래 라인에 내용을 추가</strong>해도 됩니다. <em>마지막으로 여러 줄을 입력하고자 한다면 파이프 기호를 연이어 사용</em>하면 됩니다. 
		
		section: article: h3 블록 확장(공간절약을 위한 인라인 구문 제공)구문
		//jade 특성상 공간을 많이 차지 하기 때문에 공간을 효율적으로 관리하려면, 그림처럼 확장하려는 요소 뒤에 콜론(:)을 붙여 사용한다. 이를 블록 확장 또는 인라인 중첩 구문이라고 한다.
		//* Emmet의 css 선택자 연결 표현식을 입력한 후 tab을 누르면 자동으로 jade코드로 변환된다. 조금 복잡한 문서 구조를 만들 때는 Emmet 문법을 사용하면 좋다.