[HTML/ CSS/ JavaScript preprocessor & Template] Haml, Markdown, Slim, Jade, Sass, SCSS, LESS, Stylus, CoffeeScript, LiveScript, Traceur 정리..

높아지고 있는 관심도로 본 키워드

Markdown, LESS, Sass, TypeScript, AngularJS, Bootstrap 

  - 간략하게나마 사용해봐야겠지...ㅎㅎ

HTML

다양한 템플릿엔진이 존재하지만 기본적으로 Ruby 나 JavaScript와 함께 사용하여야 함.

보통 이클립스를 사용하여 개발하는 개발자들은 zen-coding 플러그인만 사용하기도 함.

  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 템플릿 엔진.

CSS

  1) LESS

    - JavaScript 로 구현되어 있음. Node.js 와 서버 사이드에서 사용할 수 있음.

  2) SASS ( Syntactically Awesome Stylesheets )

    - 효율적이고 생산적인 코드를 통해 CSS 를 생성하는 프리프로세서.

      Ruby 로 구현되어 있음.

  3) SCSS

    - Sass 의 기능에 외형을 CSS로 접근한 Sass 표기법.

      대부분 Sass라고 하면 SCSS를 말함.

  4) Stylus

    - Node.js 기반. Sass 나 LESS 보다 나중에 나온만큼 더 풍부한 기능을 제공함.

  5) PostCSS

    -

JavaScript

  1) CoffeeScript

    - 효율적이고 생산적인 코드를 통해 JavaScript 로 컴파일 할 수 있는 경량 언어.

  2) LiveScript

    - CoffeeScript 를 확장한 듯 하나... 인기 없음..

  3) TypeScript

    - MicroSoft

  4) Dart

    - Google

  5) Babel

    -

JavaScript Framework

  1) AngularJS

    -

  2) Backbone.js

    - 

  3) Ember.js

    -

  4) Node.js

    -

  5) react.js

    -

CSS Framework

  1) Bootstrap

    -

  2) Foundation

    - 

  3) Semantic

    -

  4) Pure

    -

  5) UIkit

    -

마무리..

JavaScript/ Node.js 와 결합하여 사용하려면 Jade & LESS 조합

Ruby 와 함께 사용한다면 Slim & SCSS 조합이 맞을 듯..

참고

http://yukiyamashina.github.io/blog/2014/10/27/what-are-haml-markdown-slim-jade-sass-scss-less-stylus-coffeescript-livescript-traceur/

http://www.embeddedjs.com/

http://slim-lang.com/

http://nodejs.github.io/iojs-ko/articles/2015/05/11/story-about-js-and-babel/

http://livescript.net/

http://vschart.com/compare/jade-template-engin/vs/haml/vs/slim-lang

http://colorburned.com/differences-between-jade-haml-slim/