Web - haml이란?

Web 

:haml이란?

| 시작하기에 앞서

haml을 봐야 할 일이 생겨 간략히 haml에 대해 정리해본다.

| haml이란

• html preprocessor중하나이다! 

(조사하는 도중 html preprocessor라는 개념에 대해서도 알게됬고, haml 말고도, markdown jade, slim 등이 있다는 것도 알게 됬다.. 싱기방기 )

  1) HAML ( HTML Abstraction Markup Language )

    - Ruby 프레임워크의 일부로 사용

  2) Markdown

    - 경량 마크업 언어. 지원하는 에디터를 통해 쉽고 빠르게 시각적인 효과를 줄 수 있다.

  3) Slim

    - Ruby의 HTML 템플릿 엔진.

  4) Jade

    - JavaScript의 Node.js로 구현 된 템플릿 엔진.

  5) EJS ( Embedded JavaScript )

    - Node.js의 HTML 템플릿 엔진.

출처: http://androphil.tistory.com/576 [소림사의 홍반장!]

그래서.. haml이란?

Haml(HTML abstraction Markdup Language)은 인라인 코드를 사용하지 않고 모든 웹 문서의 HTML을 명확하고 간단하게 설명하는 데 사용되는 마크업 언어입니다. Haml은 대부분의 Ruby on Rails 애플리케이션에 사용되는 템플릿 언어인 PHP, ASP 및 ERB와 같은 인라인 페이지 템플레이팅 시스템을 대체합니다. 그러나 Haml은 템플릿 자체에 HTML을 명시적으로 코딩 할 필요가 없습니다. 동적 콘텐트를 생성하는 코드가 있는 HTML 자체에 대한 설명이기 때문입니다.

(아직은 익숙치 않아서인지, 오히려 haml로 짜여진 코드가 한눈에 잘 안들어오는 것 같다..)

출처: http://zinee-world.tistory.com/404 [zineeworld]

| 사용 예제

아이디와 클래스를 넣는 방법

방법(1) 짧고 간략한 방법

%div#message.code Hello, World!

방법(2) 길지만 명확한 방법

%div{:id => "message", :class => code} Hello, World!

방법(1), 방법(2) 모두 아래와 같이 변환됩니다.

<div id="message" class="code">Hello World</div>

출처: http://zinee-world.tistory.com/404 [zineeworld]

좀 더 복잡한 예제

%tag를 쓰지 않으면 기본으로 div를 지칭합니다.

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>

추가적으로 = 이라고 haml에서 표현한것은 erb 파일에서 루비문법을 쓸때 <%= 처럼 표시한것을 나타낸것이다.

출처: http://zinee-world.tistory.com/404 [zineeworld]

| 단점..?

• js 친화적이지 않다고한다..!
• 뭔가 많이들 쓰고 있지는 않은것 같다!?

| 참고하면 좋을 블로그

http://zinee-world.tistory.com/404