LESS와 EMMET

1,302 views

Published on

CSS 전처리기인 LESS와 마크업 코딩 도구인 EMMET을 소개합니다.
발표 동영상 : http://youtu.be/AVXpD2pKik0

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,302
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
14
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 안녕하세요. 프론트엔드개발팀 주우영입니다. 오늘 제가 발표할 주제는 초고속으로 마크업하기 입니다.
  • 개발자는 게을러야 한다는 오랜 격언이 있습니다. 개발자에게 게으름은 단순한 귀차니즘과는 다릅니다.개발자에게 게으름이란 어떻게 하면 더 효율적이고 효과적으로 일할 수 있는지 고민하라는 뜻이죠.
  • 자, 그럼 여러분이 마크업할때 귀찮은건 없었나요?한번 생각해 볼 만한 고민입니다.
  • 마크업 구조가 이미 머릿속에 다 그려져 있음에도 수많은 태그를 하나하나 작성하는건 매우 지루한 작업일 수 있습니다.우리는 때때로 지루한 작업을 빨리 끝내고 더 흥미로운 일에 시간을 투자하고 싶습니다. 그럼 지루한 마크업 코딩을어떻게 빨리 끝낼 수 있을까요?이때 어떤 개발자가 “HTML과 CSS를 일정 패턴화 해서 코드를 축약한다면 개발자는 쉽고 빠르게 마크업을할 수 있지 않을까!?” 라고 생각합니다. 즉, 입력하는 행위를 줄이는 것이죠.
  • 그 고민의 결과로 에밋이 탄생했습니다.
  • 원래 Zen-coding이라는 프로젝트명으로 시작했다가 현재에는 Emmet이라는 프로젝트명으로 바뀌었고 2013년 2월 24일에 정식 출시했습니다.프로젝트명은 바뀌었지만 Zen-coding과는 크게 다르진 않다고 합니다.뒤에 소개할 less는 초기 이해 비용이 필요하고 메타 언어를 이해할 수 있어야 코드를 유지보수 할 수 있기 때문에 프로젝트 팀과 미리 협의가 되어야 합니다.그런 점으로 인해 CSS 메타 언어를 회의적인 시각으로 보는 마크업 개발자들도 존재합니다.하지만 Emmet은 전처리기도 메타 언어도 아닌 코딩 도구이므로 자유롭게 사용 여부를 선택할 수 있습니다.WebStorm은 Emmet을 내장하고 있으며 Sublime text, Aptana Studio, Eclipse 등의 IDE에서 플러그인 형태로 지원하고 있습니다.그럼 emmet의 기능 몇가지를 살펴보도록 하겠습니다.
  • 먼저 dtd 선언 기능입니다. 텅빈 html 파일에 html:5를 입력하는 것만으로도 기본 골격이 완성됩니다.
  • Link와 src 기능입니다.개발시 자주 타이핑 되는 코드이죠.
  • 자식 관계를 갖는 엘리먼트를 꺽쇠는 이용해서 표기합니다.
  • 형제 관계는 플러스 기호로 표기합니다.
  • 그룹핑 기능입니다. 엘리먼트의 집합을 괄호로 감싸 그룹으로 지정할 수 있습니다.
  • 멀티플리케이션 기능입니다. 곱하기 기호를 이용해서 엘리먼트를 필요한 갯수만큼 그릴 수 있습니다.
  • 아이템 넘버링 기능입니다. 반복되는 엘리먼트 갯수만큼 클래스이름이나 값에 번호를 붙일수 있습니다.
  • 엘리먼트의 id와 class명은 #과 .(dot)로 지정할 수 있습니다.
  • 어트리뷰트의 값은 대괄호로 지정할 수 있습니다.
  • Emmet은 css도 지원합니다.Css는 일정한 규칙이 있는게 아니라 각 스타일 속성의 약어를 이용해 작성하는 방법입니다.스타일 속성마다 약어를 외우기 힘들텐데요.Emmet에서 친절하게 칫시트를 제공해주고 있습니다.Emmet의 기능 설명은 여기까지 하겠습니다. 이 외에도 많은 규칙과 기능이 있습니다. 저는 핵심 기능만 했다는걸 기억하시길 바랍니다.지금까지 Emmet을 소개했고요, 하나의 도구를 더 소개해드리겠습니다.
  • Don’t repeatyoutself, 개발에 있어 가장 기본이 되는 원칙입니다. 반복하지 마라, 중복 코드를 생산하지 말라는 것이죠
  • CSS는 언어의 특성으로 인해 작성할때 마다 DRY 원칙을 어기게 됩니다.어떻게든 중복을 제거하기 위해서 보시는 것과 같이 코드를 작성하죠.스타일 그룹같은걸 만들고, 이 스타일을 사용하는 엘리먼트의 클래스를 지정하는 방법입니다.뭔가 중복을 억지로 제거했다는 느낌을 받을 수 밖에 없습니다.그렇다고 정적인 css에서 딱히 다른 방법이 있는것도 아니었습니다.
  • 이때 등장한 도구가 있습니다.Less is more 라는 철학으로 개발된Less 입니다.
  • CSS는 웹 페이지 디자인에 혁명을 일으켰지만 여전히 정적이며 구문의 유연성은 제한되어있습니다.최근 웹 페이지는 대부분 대규모 프로젝트이거나 SPA(Single Page Application)처럼 복잡한 웹 애플리케이션을 개발해야 하는 경우가 많은데 CSS의 이런 단점은 개발의 생산성을 저하시키는 주된 요인이 됩니다. less는 이러한 CSS의 단점을 극복하고자 개발된 CSS 메타 언어 또는 전처리 : CSS pre-processor 입니다. CSS에는 없는 변수, 믹스-인, 연산자, 함수등의 기능이 있습니다. 이를 이용해 코드의 중복을 제거하여 재사용성과 스타일링의 효율성을 극대화 시킬 수 있습니다. 또 규칙이 간단해서 이해 비용이 적다는 장점도 있습니다. less는 다양한 오픈소스 프로젝트에서 사용되고 있는데 대표적인 사례가 twitter의 bootstrap 프로젝트입니다.그럼 대표적인 기능 몇가지를 살펴보겠습니다.
  • 변수기능 입니다. 이것 하나만으로도 많은 중복 코드를 제거할 수 있습니다.
  • 믹스인 기능입니다. 함께 쓰는 코드들을 모아놓고 가져다 쓸 수 있습니다.
  • 중첩 기능입니다. 엘리먼트의 부모 자식 관계를 좀 더 명확하게 볼 수 있습니다.
  • 미리 정의되어 있는 less의 내장함수나, 연산자를 사용할 수 있습니다. 이를 이용해서 색상을 조합하는 등의 연산을 할 수 있습니다.
  • Css에서는 지원하지 않았던 더블슬러쉬 주석을 사용할 수 있습니다. 스타일링 하면서 은근히 불편했던 부분이었습니다.여기까지 less의 대표적인 기능을 살펴보았습니다.
  • 감사합니다.
  • LESS와 EMMET

    1. 1. LESS& EMMET HIGH SPEED MARKUP
    2. 2. “개발자는 게을러야 한다.” 하지만 올바르게 게을러야 한다. 개발자에게 게으름은 어떻게 하면 더 효율적이고 효과적으로 일할 수 있는지 고민하라는 뜻이다.
    3. 3. any tiresome thing? 지금 우리에게 귀찮은건 무엇일까.
    4. 4. 코딩하는 것 자체가 귀찮다. 이미 머릿속에 다 그려진 마크업을 하나하나 작성하는 건 곤욕이다.
    5. 5. emmet.io
    6. 6. emmet.io 편집기에서 HTML과 CSS를 빠르게 편집 할 수 있도록 도와주는 도구 원래 Zen-coding이라는 프로젝트명으로 시작했 다가 현재에는 emmet이라는 프로젝트명으로 바뀌었고 2013년 2월 24일에 정식 출시됐다. emmet은 코딩 도구이므로 자유롭게 사용 여부를 선택할 수 있다. WebStorm은 emmet을 내장하고 있으며 Sublime text, Aptana Studio, Eclipse 등의 IDE에서 플러그인 형태로 지원하고 있다.
    7. 7. 기능1 DTD html:5 <!doctype html> <html lang=""> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
    8. 8. 기능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>
    9. 9. 기능3 child > div.list>ul>li <div class="list"> <ul> <li></li> </ul> </div>
    10. 10. 기능4 sibling + div.user-info>label+input+a <div class="user-info"> <label for=""></label> <input type="text"/> <a href=""></a> </div>
    11. 11. 기능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>
    12. 12. 기능6 multiplication * (ul>li*3)*2 <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul>
    13. 13. 기능7 itemNumbering $ article>div.cont$*3 <article> <div class="cont1"></div> <div class="cont2"></div> <div class="cont3"></div> </article>
    14. 14. 기능8 id and class div#content>div.bng <div id="content"> <div class="bng"></div> </div>
    15. 15. 기능9 attribute [ ] div>label[for=name]+input#name <div> <label for="name"></label> <input id="name" /> </div>
    16. 16. 기능10 css -wmos-tsh -webkit-text-shadow:; -moz-text-shadow:; -ms-text-shadow:; -o-text-shadow:; text-shadow:;
    17. 17. Don't repeat yourself
    18. 18. 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; }
    19. 19. ISMORE LESS 적을수록 풍부하다
    20. 20. less CSS의 단점을 극복하고자 개발된 CSS 메타 언어 또는 CSS 전처리기 CSS는 웹 페이지 디자인에 혁명을 일으켰지만 여전히 정적이며 구문의 유연성은 제한되어있다. 이런 단점은 개발의 생산성을 저하시키는 주된 요인이 된다. CSS에는 없는 변수, 믹스인, 연산자, 함수등의 기능이 있다. 이 기능을 이용해 코드의 중복을 제거 하여 재사용성과 스타일링의 효율성을 극대화 시킬 수 있다. 또 규칙이 간단해서 이해 비용이 적다는 장 점도 있다 . less는 다양한 오픈소스 프로젝트에서 사용되고 있
    21. 21. 기능1 variables @color: #4D926F; #header { color: @color; } h2 { color: @color; }
    22. 22. 기능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; }
    23. 23. 기능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; }
    24. 24. 기능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; }
    25. 25. 기능5 comment @color: #4B4B4B; #header { //color : #FFFFFF; color: @color; } #header { color: #4b4b4b; }
    26. 26. 감사합니다.

    ×