LESS와 EMMET

LESS&
EMMET

HIGH
SPEED
MARKUP

“개발자는 게을러야 한다.”
하지만 올바르게 게을러야 한다.
개발자에게 게으름은 어떻게 하면 더
효율적이고 효과적으로 일할 수 있는지
고민하라는 뜻이다.

any tiresome thing?
지금 우리에게 귀찮은건 무엇일까.

코딩하는 것 자체가 귀찮다.
이미 머릿속에 다 그려진 마크업을
하나하나 작성하는 건 곤욕이다.

emmet.io
편집기에서 HTML과 CSS를
빠르게 편집 할 수 있도록
도와주는 도구

원래 Zen-coding이라는 프로젝트명으로
시작했
다가 현재에는 emmet이라는 프로젝트명으로
바뀌었고 2013년 2월 24일에 정식 출시됐다.
emmet은 코딩 도구이므로 자유롭게 사용
여부를
선택할 수 있다.
WebStorm은 emmet을 내장하고
있으며
Sublime text, Aptana Studio, Eclipse
등의
IDE에서 플러그인 형태로 지원하고 있다.

기능1 DTD
html:5

<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

기능2 link&src
link:css
link:print
link:css[href=/main.css]
script:src
script[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>
</article>

기능8 id and class
div#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:;

Dont’ repeat your CSS
중복되는 CSS 코드를 작성하지 마라.

#LIGHT-WHITE-BACKGROUND,
.light-white-background {
background-color: #fff;
border-color: #ccc;
}
#MEDIUM-WHITE-BACKGROUND,
.medium-white-background {
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 {
border-color: #ccc;
}

ISMORE
LESS

적을수록 풍부하다

less
CSS의 단점을 극복하고자
개발된 CSS 메타 언어 또는
CSS 전처리기

CSS는 웹 페이지 디자인에 혁명을 일으켰지만
여전히 정적이며 구문의 유연성은
제한되어있다. 이런
단점은 개발의 생산성을 저하시키는 주된
요인이
된다.
CSS에는 없는 변수, 믹스인, 연산자, 함수등의
기능이 있다. 이 기능을 이용해 코드의 중복을
제거
하여 재사용성과 스타일링의 효율성을 극대화
시킬
수 있다. 또 규칙이 간단해서 이해 비용이
적다는 장
점도 있다 .
less는 다양한 오픈소스 프로젝트에서
사용되고 있

기능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 {
border-radius: 5px;
}
#footer {
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;
}

LESS와 EMMET

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie LESS와 EMMET

Ähnlich wie LESS와 EMMET (20)

Mehr von 우영 주

Mehr von 우영 주 (16)

LESS와 EMMET

Hinweis der Redaktion