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