Tag: template

HTML5 Boilerplate로 web frontend 뼈대짜기

HTML5 boilerplate는 빠르고, 튼튼하며, 유연한 웹사이트 제작을 도와주는 템플릿이다.
html5웹을 만드는 첫 단계 뼈대를 제공해준다.

1
https://html5boilerplate.com/

What is it?

다운을 받아 index.html을 보면
– html5에 최적화된 뼈대
– 간단한 ie대응
– 파비콘
– jQuery
– normalize.css (기본 CSS리셋)
– modernizr (HTML5의 새로운 태그들을 IE8이하에서 인식시키기)
– google analytics 코드스니펫
과 같이 웹 frontend 제작에 널리 쓰이는 라이브러리들이 모아져있다.

Refer

html5 bolierplate

크로스 브라우징을 위한 HTML5 Boilerplate + 추가 스크립트 by @aliencube

Javascript Template – Handlebar.js

Handlebar

  • Mustache계열 템플릿
  • 사용할 수 있는 제어가 매우 한정적
  • template 레이아웃 기능 지원
  • helper라는 기능으로 여러가지 커스터마이징 제공

간단한 How to

1 handlebar.js와 jquery를 html에 추가한다.
2 html에 원하는 템플릿을 id와 함께 추가한다.(handlebar.js 밑에)

<script id="todo-template" type="text/x-handlebars-template">
    <li class="{}">
        <div class="view">
            <input class="toggle" type="checkbox" {}>
            <label>{{todo}}</label>
            <button class="destroy"></button>
        </div>
    </li>
</script>

3 javascript에 코드를 써준다.

var source   = $("#todo-template").html();
var template = Handlebars.compile(source);
var data = { todo : $('#new-todo').val()};
$("#todo-list").append(template(data));

Refer

javascript micro templating
handlebar js
handlebar 간단한 사용법
handlebar js tutorial
Javascript Template 사용 가이드