"Haml"의 두 판 사이의 차이

2021년 10월 27일 (수) 01:46 기준 최신판

1 개요[ | ]

HTML Abstraction Markup Language; Haml
HTML 추상화 마크업 언어, 하믈

XHTML을 기술하기 위한 경량 마크업 언어
루비의 .erb 파일을 쉽게 작성하기 위한 템플릿 엔진에서 시작되었다.
CSS 부분은 SCSS와 동일하다.
MIT 라이선스

2 예시 1[ | ]

erb 형식

haml 형식

<section class=”container”>
  <h1><%= post.title %></h1>
  <h2><%= post.subtitle %></h2>
  <div class=”content”>
    <%= post.content %>
  </div>
</section>

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

3 예시 2[ | ]

haml 형식

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    %title BoBlog
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"}
  %body
    #header
      %h1 BoBlog
      %h2 Bob's Blog
    #content
      - @entries.each do |entry|
        .entry
          %h3.title= entry.title
          %p.date= entry.posted.strftime("%A, %B %d, %Y")
          %p.body= entry.body
    #footer
      %p
        All content copyright © Bob

XHTML 형식

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>BoBlog</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" />
  </head>
  <body>
    <div id='header'>
      <h1>BoBlog</h1>
      <h2>Bob's Blog</h2>
    </div>
    <div id='content'>
      <div class='entry'>
        <h3 class='title'>Halloween</h3>
        <p class='date'>Tuesday, October 31, 2006</p>
        <p class='body'>
          Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited.
        </p>
      </div>
      <div class='entry'>
        <h3 class='title'>New Rails Templating Engine</h3>
        <p class='date'>Friday, August 11, 2006</p>
        <p class='body'>
          There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml.
        </p>
      </div>
    </div>
    <div id='footer'>
      <p>
        All content copyright © Bob
      </p>
    </div>
  </body>
</html>

4 같이 보기[ | ]

5 참고[ | ]

https://en.wikipedia.org/wiki/Haml

@@ 3번째 줄: / 3번째 줄: @@
 ;HTML 추상화 마크업 언어, 하믈
 *XHTML을 기술하기 위한 경량 마크업 언어
-*루비의 .erb 파일을 쉽게 작성하기 위한 템플릿 엔진에서 시작됨
+*루비의 .erb 파일을 쉽게 작성하기 위한 템플릿 엔진에서 시작되었다.
+*CSS 부분은 [[SCSS]]와 동일하다.
 *MIT 라이선스
-*CSS 부분은 [[SCSS]]와 동일함
-http://haml.info/images/haml.png
+[[파일:haml.png]]
 ==예시 1==
@@ 15번째 줄: / 15번째 줄: @@
 |- valign='top'
 | width='50%' |
-<source lang='asp'>
+<syntaxhighlight lang='asp'>
 <section class=”container”>
    <h1><%= post.title %></h1>
@@ 23번째 줄: / 23번째 줄: @@
    </div>
 </section>
-</source>
+</syntaxhighlight>
 | width='50%' |
-<source lang='asp'>
+<syntaxhighlight lang='asp'>
 %section.container
    %h1= post.title
@@ 31번째 줄: / 31번째 줄: @@
    .content
      = post.content
-</source>
+</syntaxhighlight>
 |}
 ==예시 2==
 ;haml 형식
-<source lang='asp'>
+<syntaxhighlight lang='asp'>
 !!!
 %html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
@@ 56번째 줄: / 56번째 줄: @@
        %p
          All content copyright © Bob
-</source>
+</syntaxhighlight>
 ;XHTML 형식
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
@@ 95번째 줄: / 95번째 줄: @@
    </body>
 </html>
-</source>
+</syntaxhighlight>
 ==같이 보기==
+{{z컬럼3|
 *[[XHTML]]
 *[[Sass]]
@@ 106번째 줄: / 107번째 줄: @@
 *[[YAML]]
 *[[웹 템플릿]]
+}}
-==참고 자료==
+==참고==
 *https://en.wikipedia.org/wiki/Haml
 [[분류: HTML]]
 [[분류: 템플릿 엔진]]