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

16,544 views

Published on

LESS 프레임워크 활용법에 대한 프레젠테이션 파일입니다. 강의용으로 상세한 설명은 생략되어 있습니다. 수업 진행 시 보충 설명을 위한 교보재.

Published in: Lifestyle
3 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total views
16,544
On SlideShare
0
From Embeds
0
Number of Embeds
2,713
Actions
Shares
0
Downloads
110
Comments
3
Likes
23
Embeds 0
No embeds

No notes for slide

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

  1. 1. Modern Web LESS Framework om er.c 9 nav oo @ /yam o9 m mo .co ya ok o ebfac
  2. 2. ModernWeb LESS lesscss.orgFramework
  3. 3. LESS 프레임워크란?Modern webLESS Framework
  4. 4. LESS Framework Dynamic Stylesheet Language CSS LESSCascading Style Sheet CSS + Dynamic Language
  5. 5. 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의 능력을 덧붙여 확장한 언어입니다. 변수, 함수, 연산, 중첩, 스코프 등등
  6. 6. 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
  7. 7. ...<link rel="stylesheet/less" href="css/styles.less"><script src="js/less.js"></script>...
  8. 8. LESS 간단하게 미리보기! OverviewLESS Framework
  9. 9. Variables LESS Overview@variablesLESS
  10. 10.  변수는
  11. 11.  앞에
  12. 12.  @를
  13. 13.  붙여서
  14. 14.  표기합니다. // LESS // 변경된 CSS @lightCyan: #73cbdc; #container { color: #73cbdc; #container { } color: @lightCyan; } #footer h2 { color: #73cbdc; #footer h2 { } color: @lightCyan; }
  15. 15. Mixins LESS Overview @parameter 믹스인은
  16. 16.  클래스
  17. 17.  이름
  18. 18.  형식으로
  19. 19.  선언되며
  20. 20.   (
  21. 21.  )
  22. 22.  안에
  23. 23.  전달인자를
  24. 24.  받을
  25. 25.  수
  26. 26.  있습니다.// LESS.coner-round(@radius: 5px) {! -webkit-border-radius: @radius;! -moz-border-radius: @radius;! border-radius: @radius;}.round {! .coner-round;}.rounder {! .coner-round(10px);}
  27. 27. 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;}
  28. 28. Nested Rules LESS Overview Nested
  29. 29.  Rules// LESS LESS
  30. 30.  중첩
  31. 31.  작성규칙은
  32. 32.  긴
  33. 33.  이름을
  34. 34.  중복해서#contents { 작성하지
  35. 35.  않아도
  36. 36.  되기
  37. 37.  때문에
  38. 38.  효율적입니다.! h2 {! ! font-size: 24px;! ! font-weight: normal;! }! p {! ! font-size: 12px;! ! a { text-decoration: none;! ! ! :hover { color: #73cbdc; }! ! }! }}
  39. 39. 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;}
  40. 40. 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
  41. 41.  에서는
  42. 42.  사칙연산이
  43. 43.  가능합니다..article { 크기
  44. 44.  및
  45. 45.  색상과
  46. 46.  관련한
  47. 47.  속성에
  48. 48.  적용가능합니다.! font-size: @base-font-size * 1.2;! border: 1px solid (@base-font-color + #909090);}
  49. 49. Nested Rules LESS Overview// 변경된 CSSbody {! font: 12px/1.5 나눔 고딕;! color: #2e2d2c;}.article {! font-size: 14.4px;! border: 1px solid #bebdbc;}
  50. 50. 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
  51. 51.  에서는
  52. 52.  함수를
  53. 53.  사용하여
  54. 54.  .article { 값을
  55. 55.  손쉽게
  56. 56.  변경
  57. 57.  가능합니다.! font-size: @base-font-size * 1.2;! border: 1px solid lighten(@base-font-color, 15%);}
  58. 58. Function LESS Overview// 변경된 CSSbody {! font: 12px/1.5 나눔 고딕;! color: #2e2d2c;}.article {! font-size: 14.4px;! border: 1px solid #545454;}
  59. 59. LESS 코드를 실시간으로 변경할 수 있어요!WatchModeLESS Framework
  60. 60. Watch Mode LESS Overview #!watchless.watch()
  61. 61. 왜? LESS를 사용하는 것이 좋은가요? Why LESS?LESS Framework
  62. 62. LESS Framework Dynamic Stylesheet Language ≒ LESS는 CSS의 확장버전으로 하위호환성이 뛰어납니다.CSS의 기존 문법을 그대로 사용하기 때문에 익히기 쉽습니다.
  63. 63. API LESS 사용 설명서LESS Framework
  64. 64. Comments LESS APILESS 코멘트(주석) - 손쉬운 주석 활용
  65. 65. Importing LESS APILESS 임포트(호출) - 외부 *.less, *.css 호출
  66. 66. Variables LESS APILESS 변수는 실상 상수로문서 읽기가 완료되는 시점에서 한번만 정의됩니다.
  67. 67. Mixins LESS APILESS 믹스인은 전달인자를 받지 않는 형태로도사용이 가능합니다. 빈번하게 사용되는 경우 활용.
  68. 68. Mixins LESS APILESS 믹스인은 전달인자가 다수일 경우, 이를 모두기억하기란 어렵죠. 이런 경우 @arguments를 사용합니다.
  69. 69. Pattern-matching LESS APILESS 패턴 매칭은 동일한 이름의 믹스인이 정의되어 있을경우, 전달인자가 일치하는 경우의 믹스인이 동작합니다.
  70. 70. Guard expressions LESS APILESS 가드 표현식은 일종의 조건문으로, 조건을 확인하여처리합니다. when 키워드가 가드 조건의 시작입니다.
  71. 71. Guard expressions LESS APILESS 가드 표현식에 활용되는 비교 연산자는, = = =
  72. 72. Guard expressions LESS APILESS 가드 표현식에서 or 는 ,로 처리합니다.= 의 경우는 일치하는 경우 { }의 코드를 처리합니다.
  73. 73. Guard expressions LESS APILESS 가드 표현식에서 and는 두가지 조건 모두가참일 경우, 처리됩니다. not은 부정, 반대의 경우입니다.
  74. 74. Guard expressions LESS APILESS 가드 표현식에서 전달인자 유형을 파악하기 위한종류별 함수를 지원합니다.
  75. 75. Color functions LESS APILESS 컬러 함수, HSLA 체계를 활용하여 손쉬운 변경 처리.
  76. 76. Color functions LESS APILESS 컬러 함수, 색상 정보 값을 가져옵니다.
  77. 77. Math functions LESS APILESS 수학 함수, 반올림 올림 내림 / 퍼센트 화
  78. 78. Namespace LESS APILESS 네임스페이스 - 배포용으로 제작시 활용합니다.
  79. 79. Scope LESS APILESS 스코프(영역) - 가까운 변수를 활용합니다.
  80. 80. String Interpolation LESS APILESS 문자 채워넣기 - 문자를 변수화할 경우 사용합니다.PHP, ruby와 유사한 방법인 @{string}을 지원합니다.
  81. 81. Escaping LESS APILESS 이스케이핑(예외) - 비표준 방법을 사용할 경우,~ 를 앞에 붙여 컴파일시... 예외 처리할 수 있습니다.
  82. 82. Javascript evaluation LESS APILESS 자바스크립트 코드 처리 - 자바스크립트 코드를 활용하고 싶을 경우는 `(back-ticks) 내부에 작성합니다.
  83. 83. 가만?.. LESS 이대로는 문제가 있는데요?! Problem?LESS Framework
  84. 84. LESS Problem Dynamic Stylesheet LanguageLESS. js 활용은 자바스크립트 미지원시 참담한 결과를 초래합니다. CSS3를 좀 더 효율적으로 사용할 수 있도록 도와주는 매우 유용한 도구지만, 자바스크립트가 지원되지 않는 환경에서는 제 기능을 발휘하지 못합니다. 그렇다면 이 문제를 어떻게 해결해야 할까요?
  85. 85. LESS ProcessDynamic Stylesheet Language
  86. 86. LESS Problem Dynamic Stylesheet LanguageLESS. js 대신 LESS 코드를 변환시킬 도구만 있으면 해결될 문제군요! lessphp | .less{} | LESS.app | SimpleLESS | Less Parser
  87. 87. LessPHPleafo.net/lessphp
  88. 88. .less{}dotlesscss.org
  89. 89. {less} .appincident57.com/less
  90. 90. SimpleLESS wearekiss.com/simpless
  91. 91. Less Parser proving-ground.be/less
  92. 92. 만들면서 배우는 HTML5+CSS3+jQuery의 저자야무의 프레젠테이션이었습니다. facebook.com/yamoo9 twitter.com/yamoo9 cafe.naver.com/webstandardproject Speaker yamoo9.com

×