SlideShare a Scribd company logo
Modern
           Web LESS
           Framework
                 om
             er.c 9
          nav oo
         @ /yam
       o9 m
    mo .co
  ya ok
     o
   eb
fac
Modern
Web LESS
  lesscss.org

Framework
LESS 프레임워크란?




Modern web
LESS Framework
LESS Framework
            Dynamic Stylesheet Language




     CSS                           LESS
Cascading Style Sheet        CSS + Dynamic Language
LESS Framework
               Dynamic Stylesheet Language




                            The dynamic stylesheet language.
    LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.



LESS란? CSS에 Script의 능력을 덧붙여 확장한 언어입니다.

            변수, 함수, 연산, 중첩, 스코프 등등
LESS Framework  Dynamic Stylesheet Language




                                The dynamic stylesheet language.
 LESS runs on both the client-side (IE6+, Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.



LESS는 클라이언트 또는 서버 환경 모두에서 실행됩니다.



                                               node.js
...
<link rel="stylesheet/less" href="css/styles.less">
<script src="js/less.js"></script>
...
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
LESS 간단하게 미리보기!




   Overview
LESS Framework
Variables
                                                                                                                                                                                                  LESS Overview
@variables
LESS
 변수는
 앞에
 @를
 붙여서
 표기합니다.



                                                 // LESS                                                                                                                                                      // 변경된 CSS
                                                 @lightCyan: #73cbdc;                                                                                                                                         #container {
                                                                                                                                                                                                                color: #73cbdc;
                                                 #container {                                                                                                                                                 }
                                                   color: @lightCyan;
                                                 }                                                                                                                                                            #footer h2 {
                                                                                                                                                                                                                color: #73cbdc;
                                                 #footer h2 {                                                                                                                                                 }
                                                   color: @lightCyan;
                                                 }
Mixins   LESS Overview

                  @parameter
                  믹스인은
 클래스
 이름
 형식으로
 선언되며
 
                  (
 )
 안에
 전달인자를
 받을
 수
 있습니다.

// LESS
.coner-round(@radius: 5px) {
! -webkit-border-radius: @radius;
! -moz-border-radius: @radius;
! border-radius: @radius;
}

.round {
! .coner-round;
}
.rounder {
! .coner-round(10px);
}
Mixins
                   LESS Overview



// 변경된 CSS
.round {
! -webkit-border-radius: 5px;
! -moz-border-radius: 5px;
! border-radius: 5px;
}

.rounder {
! -webkit-border-radius: 10px;
! -moz-border-radius: 10px;
! border-radius: 10px;
}
Nested Rules                                               LESS Overview



                                                                               Nested
 Rules
// LESS      LESS
 중첩
 작성규칙은
 긴
 이름을
 중복해서
#contents { 작성하지
 않아도
 되기
 때문에
 효율적입니다.
! h2 {
! ! font-size: 24px;
! ! font-weight: normal;
! }
! p {
! ! font-size: 12px;
! ! a { text-decoration: none;
! ! ! :hover { color: #73cbdc; }
! ! }
! }
}
Nested Rules
                   LESS Overview



// 변경된 CSS
#contents h2 {
  font-size: 24px; font-weight: normal;
}
#contents p {
  font-size: 12px;
}
#contents p a {
  text-decoration: none;
}
#contents p a:hover {
  color: #73cbdc;
}
Operation
                   LESS Overview



// LESS
@base-font-size: 12px;
@base-font-color: #2e2d2c;

body {
! font: @base-font-size/1.5 나눔 고딕;
! color: @base-font-color;
}
                                    Operation
                                    LESS
 에서는
 사칙연산이
 가능합니다.
.article {                          크기
 및
 색상과
 관련한
 속성에
 적용가능합니다.

! font-size: @base-font-size * 1.2;
! border: 1px solid (@base-font-color + #909090);
}
Nested Rules
                   LESS Overview



// 변경된 CSS
body {
! font: 12px/1.5 나눔 고딕;
! color: #2e2d2c;
}

.article {
! font-size: 14.4px;
! border: 1px solid #bebdbc;
}
Function      LESS Overview



// LESS
@base-font-size: 12px;
@base-font-color: #2e2d2c;

body {
! font: @base-font-size/1.5 나눔 고딕;
! color: @base-font-color;
}
                                                                                                                    Function
                                                                                                                    LESS
 에서는

More Related Content

Similar to 다이내믹 스타일시트 언어 Less framework 활용 by yamoo9

HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게
Youngkwon Lee
 
03 jsx
03 jsx03 jsx
03 jsx
Jay Lee
 
Asp.net Razor
Asp.net Razor Asp.net Razor
Asp.net Razor
Sang Yun Kim
 
3주 CSS Basic
3주 CSS Basic3주 CSS Basic
3주 CSS Basic
지수 윤
 
Compass
CompassCompass
Compass
Judy Park
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
ymtech
 
Rails style-guide-2
Rails style-guide-2Rails style-guide-2
Rails style-guide-2
Yunho Jo
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
Michael Yang
 
[EWD2014]CLASS05
[EWD2014]CLASS05[EWD2014]CLASS05
[EWD2014]CLASS05
JY LEE
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
Michael Yang
 

Similar to 다이내믹 스타일시트 언어 Less framework 활용 by yamoo9 (10)

HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게HTML5&CSS3 8장. 눈을 즐겁게
HTML5&CSS3 8장. 눈을 즐겁게
 
03 jsx
03 jsx03 jsx
03 jsx
 
Asp.net Razor
Asp.net Razor Asp.net Razor
Asp.net Razor
 
3주 CSS Basic
3주 CSS Basic3주 CSS Basic
3주 CSS Basic
 
Compass
CompassCompass
Compass
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
 
Rails style-guide-2
Rails style-guide-2Rails style-guide-2
Rails style-guide-2
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
 
[EWD2014]CLASS05
[EWD2014]CLASS05[EWD2014]CLASS05
[EWD2014]CLASS05
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
 

More from yamoo9

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다
yamoo9
 
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
yamoo9
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
yamoo9
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
yamoo9
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management
yamoo9
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
yamoo9
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
yamoo9
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
yamoo9
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
yamoo9
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
yamoo9
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
yamoo9
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
yamoo9
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
yamoo9
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
yamoo9
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
yamoo9
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
yamoo9
 

More from yamoo9 (18)

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다
 
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
 
KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
 

다이내믹 스타일시트 언어 Less framework 활용 by yamoo9