less와 emmet
DESCRIPTION
CSS 전처리기인 LESS와 마크업 코딩 도구인 EMMET을 소개합니다. 발표 동영상 : http://youtu.be/AVXpD2pKik0TRANSCRIPT
LESS&EMMET HIGHSPEEDMARKUP
“ 개발자는 게을러야 한다 .”
개발자에게 게으름은 어떻게 하면 더 효율적이고 효과적으로 일할 수 있는지 고민하라는 뜻이다 .
하지만 올바르게 게을러야 한다 .
any tiresome thing?지금 우리에게 귀찮은건 무엇일까 .
코딩하는 것 자체가 귀찮다 .이미 머릿속에 다 그려진 마크업을 하나하나 작성하는 건 곤욕이다 .
emmet.io
emmet.io편집기에서 HTML 과 CSS 를 빠르게 편집 할 수 있도록 도와주는 도구
원래 Zen-coding 이라는 프로젝트명으로 시작했다가 현재에는 emmet 이라는 프로젝트명으로 바뀌었고 2013 년 2 월 24일에 정식 출시됐다 .
emmet 은 코딩 도구이므로 자유롭게 사용 여부를선택할 수 있다 . We b S t o rm 은 e m m e t 을 내 장 하 고 있 으 며 Sublime text, Aptana Studio, Eclipse 등의 IDE 에서 플러그인 형태로 지원하고 있다 .
기능 1 DTDhtml:5 <!doctype html>
<html lang=""><head> <meta charset="UTF-8"> <title></title></head><body> </body></html>
기능 2 link&srclink:csslink:printlink:css[href=/main.css]script:srcscript[src=/app.js]
<link rel="stylesheet" href="style.css"/><link rel="stylesheet" href="/main.css"/><script src=""></script><script src="/app.js"> </script>
기능 3 child >div.list>ul>li <div class="list">
<ul> <li></li> </ul></div>
기능 4 sibling +div.user-info>label+input+a <div class="user-info">
<label for=""></label> <input type="text"/> <a href=""></a></div>
기능 5 grouping ()div>((header>ul>li*2)+ article>div)+footer
<div> <header> <ul> <li></li> <li></li> </ul> </header> <article> <div></div> </article> <footer></footer></div>
기능 6 multiplication *(ul>li*3)*2 <ul>
<li></li> <li></li> <li></li></ul><ul> <li></li> <li></li> <li></li></ul>
기능 7 itemNumbering $article>div.cont$*3 <article>
<div class="cont1"></div> <div class="cont2"></div> <div class="cont3"></div></article>
기능 8 id and classdiv#content>div.bng <div id="content">
<div class="bng"></div></div>
기능 9 attribute [ ]div>label[for=name]+input#name <div>
<label for="name"></label> <input id="name" /></div>
기능 10 css-wmos-tsh -webkit-text-shadow:;
-moz-text-shadow:;-ms-text-shadow:;-o-text-shadow:;text-shadow:;
Don't repeat yourself
Dont’ repeat your CSS중복되는 CSS 코드를 작성하지 마라 .
#LIGHT-WHITE-BACKGROUND, .light-white-background { background-color: #fff; border-color: #ccc; }
#MEDIUM-WHITE-BACKGROUND, .medium-white-background { background-color: #fff; border-color: #bbb; }
#LIGHT-WHITE-BACKGROUND, .translation, .entry .wp-caption, #full-article .comment-text, .roundup h3, .post-header-sharing, #post-categories td.label, #post-archive roundup h3 { background-color: #fff; border-color: #ccc; }
LESSISMORE적을수록 풍부하다
lessCSS 의 단점을 극복하고자개발된 CSS 메타 언어 또는CSS 전처리기
CSS 는 웹 페이지 디자인에 혁명을 일으켰지만 여전히 정적이며 구문의 유연성은 제한되어있다 . 이런 단점은 개발의 생산성을 저하시키는 주된 요인이 된다 .
CSS 에는 없는 변수 , 믹스 - 인 , 연산자 , 함수등의 기능이 있다 . 이 기능을 이용해 코드의 중복을 제거하여 재사용성과 스타일링의 효율성을 극대화 시킬 수 있다 . 또 규칙이 간단해서 이해 비용이 적다는 장점도 있다 .
less 는 다양한 오픈소스 프로젝트에서 사용되고 있는데 대표적인 사례가 twitter 의 bootstrap 프로젝트이다 .
기능 1 variables@color: #4D926F; #header {
color: @color;} h2 { color: @color;}
기능 2 mixins.rounded-corners(@radius: 5px){ -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
#header{ .rounded-corners;}#footer{ .rounded-corners(10px);}
#header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}#footer { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
기능 3 nested rules#header { h1 { font-size: 26px; font-weight: bold; }
a { text-decoration: none; &:hover { border-width: 1px; } }}
#header h1 { font-size: 26px; font-weight: bold;}#header a { text-decoration: none;}#header a:hover { border-width: 1px;}
기능 4 functions, operations@the-border: 1px;@base-color: #111;@red: #842210; #header{ color: (@base-color*3); border-left: @the-border; border-right: (@the-border*2);} #footer{ color: (@base-color+#003300); border-color: desaturate(@red,10%);}
#header { color: #333333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}
기능 5 comment@color: #4B4B4B; #header { //color : #FFFFFF; color: @color;}
#header { color: #4b4b4b;}
감사합니다 .