본문 바로가기
Front-End: Web

[HTML] Jade 사용 방법 익히기

all.silver__ 2020. 9. 8. 20:21
반응형

Jade란?

express는 화면을 구성하기 위한 뷰 템플릿 엔진으로 Jade와 ejs 등을 지원한다. Jade는 *Haml의 영향을 받은 자바스크립트를 이용한 높은 성능의 노드용 뷰 템플릿 엔진으로, 처음 사용할 땐 불편할 수 있으나 익숙해지면 HTML보다 훨씬 편하다.

Haml (=HTML Abstract Markup Language)
HTML을 위한 경량화 마크업 언어로, 즉시 처리하는 기존의 인라인 코딩 방식을 따르지 않고, 콘텐츠를 동적으로 표현할 수 있는 언어.

 

Jade 사용 방법 익히기

1. 태그 기술하기

태그 표현 방법

기존 HTML태그는 태그를 지칭하는 단어 하나만 입력하면 사용할 수 있다.

  • Jade 문법으로 표현
html
 head
 body
  • 결과
<html>
    <head></head>
    <body></body>
</html>

이처럼 코드가 아주 단순해지며, 태그의 깊이를 들여쓰기로 표현하기 때문에 가독성이 좋고 구조가 명확해진다.

 

계층 구조의 표현

Jade에서는 들여쓰기, 즉 인덴팅(Indenting)을 통해 계층 구조를 표현한다. 주의할 점은 인덴팅 단위인데, Jade 파일 단위에서는 들여쓰기 단위가 절대적으로 통일되어야 한다.

예를 들어서 인덴팅을 통해 공백 2개를 사용했다면 각 요소의 계층 구조를 표현하기 위해 2n개의 공백을 입력해야 한다. 만약 1개, 3개와 같은 홀수 개의 공백이 있다면 오류 메시지를 출력하면서 화면을 정상적으로 렌더링하지 못한다.

혹은 탭을 이용하는 방법도 있는데, 이 경우에는 화면에 보이는 탭만큼 입력한다고 해서 마찬가지로 인식하는 것이 아니므로 주의해야 한다.

 

태그의 ID 표현 (#)

각 태그의 고유한 이름인 id속성을 부여하는 방법을 알자. jQuery를 비롯한 많은 자바스크립트 라이브러리들이 ID를 지칭할 때 #를 사용한다. Jade 역시 태그 이름 뒤에 번호기호(#)를 붙이고 ID를 작성하여 해당 HTML 요소에 대해 고유한 이름을 부여할 수 있다.

  • Jade 문법으로 표현
html
 head
 body
  div#divisionElement1
  div#divisionElement2

이는 div 2개를 추가한 것이다. 이 2개의 div요소는 #기호를 통해 각각 ID를 지정하였다. 이 코드를 express 엔진으로 실행하여 웹 브라우저로 살펴본 결과는 아래와 같다.

  • 결과
<html>
    <head></head>
    <body>
    	<div id='divisionElement1'></div>
        <div id='divisionElement2'></div>
    </body>
</html>

 

태그의 클래스 표현 (.)

이 역시도 jQuery를 비롯한 다른 라이브러리들에서 사용하는 방법과 동일하게 온점(.)을 이용하여 클래스 이름을 부여할 수 있다.

  • Jade 문법으로 표현
html
 head
 body
  div#divisionElement1
  div#divisionElement2.divStyle1
  div.divStyle2
  div.divStyle1.divStyle2

id속성과는 다르게 class속성은 여러 개의 값을 동시에 부여할 수 있기 때문에 온점(.)을 연속적으로 작성하여 클래스 이름을 지정하면 한 요소에 여러 개의 클래스를 동시에 적용할 수 있다. 또한 5번째 줄처럼 #id 이후에도 연결하여 사용할 수 있다.

  • 결과
<html>
    <head></head>
    <body>
    	<div id='divisionElement1'></div>
        <div id='divisionElement2' class='divStyle1'></div>
        <div class='divStyle2'></div>
        <div class='divStyle1 divStyle2'></div>
    </body>
</html>

 

<div>는 가장 많이 쓰이는 태그로, Jade에서 생략하더라도 <div>로 인식하여 동작된다. 다음 코드를 보면 <div>를 기술하지 않고도 ID나 클래스 이름을 부여하면 자동으로 <div>로 렌더링되는 것을 볼 수 있다.

  • Jade 문법으로 표현
html
 head
 body
 #divisionElement1
 #divisionElement2.divStyle1
 .divStyle2
  • 결과
<html>
    <head></head>
    <body>
    	<div id='divisionElement1'></div>
        <div id='divisionElement2' class='divStyle1'></div>
        <div class='divStyle2'></div>
    </body>
</html>

 

태그의 속성 표현

Jade에서 ID(#), class(.) 이 외의 속성은 괄호를 이용해 나머지 속성을 기술할 수 있다.

  • Jade 문법으로 표현
#contents(style="border:1px solid black;")
 input(type="checkbox", checked)

여러 속성을 동시에 부여할 때에는 반점(,)을 이용한다.

  • 결과
<div id="contents" style="border: 1px solid black;">
   <input type="checkbox" checked />
</div>

 

2. 콘텐츠 표현하기

지금껏 태그를 Jade 방식으로 표현하는 방법을 알아봤다. 이제부터 태그 내부에 들어갈 실제 콘텐츠를 정적이나 동적으로 표현하는 방법을 알자.

태그 텍스트 표현 방법

태그 내부의 텍스트는 태그에 대한 서술이 끝난 후 띄어쓰기 후에 기술하면 된다.

  • Jade 문법으로 표현
html
 head
 body
  div#divisionElement1 Hello Jade!
  • 결과
<html>
    <head></head>
    <body>
    	<div id='divisionElement1'>Hello Jade!</div>
    </body>
</html>

텍스트 길이가 길다면 세로선(|)를 이용해 다음줄에 이어서 표현할 수도 있다.

  • Jade 문법으로 표현
html
 head
 body
  div#divisionElement1 
   | Hello 
   | Jade!
  • 결과 (동일)
<html>
    <head></head>
    <body>
    	<div id='divisionElement1'>Hello Jade!</div>
    </body>
</html>

 

동적 콘텐츠 표현

Jade는 뷰 템플릿 엔진으로, 동적으로 콘텐츠를 표현할 수 있다. 즉, 서버에서 가공한 데이터를 Jade를 통해 만들어놓은 틀에 맞게 출력할 수 있다는 것이다. 

우리는 지금 express를 이용해 웹 서비스를 구축할 것이고, express는 가공한 정보를 Jade 템플릿 엔진에 넘겨주는 역할을 한다. 이때 모든 정보는 JSON 형태로 주고받는데, 이렇게 전달받은 데이터는 Jade 문법으로 아주 간단히 출력할 수 있다.

만약 express가 Jade엔진에 {"name": "Anonymous", "age": "27"} 이라는 JSON 데이터를 전송했다 하자. 그럼 Jade에서 적절한 위치에 출력하려면 다음과 같이 #{fieldname}으로 기술하면 된다.

  • Jade 문법으로 표현
html
 head
 body
  div#userName #{name}
  div#userAge #{age}
  • 결과
<html>
    <head></head>
    <body>
    	<div id='userName'>Anonymous</div>
        <div id='userAge'>27</div>
    </body>
</html>

 

하지만 만약 우리가 표현하고자 하는 동적으로 생성된 콘텐츠가 HTML 태그를 포함한다면 어떨까? 즉, 전달하는 JSON 데이터가 {"html": "<font color='red'>Hello?</font>"}일 경우 말이다. 이를 출력하면 HTML 태그로 인식하지 않고 문자열로 인식하여 그대로 출력하게 된다.

왜냐하면 <태그>가 포함된 문자들은 특수문자로 인식되어 HTML에서는 이를 이스케이프(Escape) 처리하여 출력하기 때문이다. 따라서 실제 HTML 코드로 동작하도록 하려면, 이스케이프되지 않은 상태로 출력해야 한다.

이스케이프 문자를 제외하려면 !{fieldName}으로 출력하면 된다.

 

자바스크립트와 CSS의 표현

자바스크립트나 CSS에서 여러 줄로 표현해야 하는 경우가 많은데, 이 경우에는 세로선이 아닌 여러 줄로 구성된 코드 기술을 지원한다. (걍 엔터 누르고 쓰면 됨)

  • Jade 문법으로 표현
html
 head
  title Example
  script
   if (foo) {
    bar();
   } else {
    baz();
   }
  • 결과
<html>
    <head>
    	<title>Example</title>
        <script>
          if (foo) {
          	bar();
          } else {
          	baz();
          }
        </script>
    </head>
</html>

 

주석 쓰기

  • Jade 문법으로 표현
//
  • 결과
<!-- -->

 

Jade파일에서 주석을 표현하되, 실제 출력에서 주석을 생략하고 싶다면 언버퍼드 코멘트(Unbuffered Comment)를 이용하면 된다. '//-'를 붙이는 것이다.

  • Jade 문법으로 표현
//-
  • 결과

 

들여쓰기를 통해 블록 단위로 여러 줄의 주석을 작성할 수도 있다.

  • Jade 문법으로 표현
div#parentDiv
 //
  #childDiv
   h1 in block comments
  • 결과
<div id='parentDiv'>
    <!--
    <div id='childDiv'>
    	<h1>in block comments</h1>
    </div>
    -->
</div>

 

 

반응형

'Front-End: Web' 카테고리의 다른 글

나홀로 코딩 패키지 - 1일차  (0) 2020.12.28
[CSS] position: absolute인 요소를 중앙 정렬하기  (0) 2020.09.17
라우트, 라우터, 라우팅  (0) 2020.09.08
HTTP  (0) 2020.08.29
웹 1.0 / 웹2.0 / 웹3.0 란?  (0) 2020.08.29

'Front-End: Web' Related Articles

티스토리툴바