괴발개발개발새발 괴발개발개발새발

믹스인 (Mixins) 클래스 선택자와 id 선택자를 혼합할 수 있다. less.logo, #title{ font-weight: 900; } .mixin-class{ .logo(); } .mixin-id{ #title(); } css.logo, #title{ font-weight: 900; } .mixin-class{ font-weight: 900; } .mixin-id{ font-weight: 900; } 믹스인 호출을 할 때 [.logo(), #title()] 괄호는 선택사항이지만, 더 이상 사용되지 않을 예정이다.* .logo(); .logo; // 정상 작동. 믹스인을 출력하지 않음 (Not Outputting the Mixin) 직접 만든 믹스인을 컴파일할 CSS 파일 내부에 포함시키고 싶지 않..

sumDigits(15) => 1 + 5 => 6 sumDigits(357) => 3 + 5 + 7 // 15 => 1 + 5 // 6 => 6 sumDigits(123456) => 1 + 2 + 3 + 4 + 5 + 6 // 21 => 2 + 1 // 3 => 3 solution eval(), split(), toString() 메서드 사용 function sumDigits(num){ /* * 이렇게 해도 된다. * num = num.toString().split("").reduce((x,y) => parseInt(x) + parseInt(y)); * 매개변수 num(숫자타입)을 문자열로 출력한 후 split으로 쪼개어 더해준다. */ num = eval(num.toString().split("").j..

자바스크립트 두 배열의 합계 구하기 배열 // 배열 const arrA = [1, 2, 3, 4,], arrB = [4, 5, 6, 7,]; // arrA와 arrB의 합계 구하기 arrA + arrB = [6, 8, 10, 12,]; - Array.prototype.map() 메서드 사용 arrA.map((x, y) => x + arrB[y]); // [6, 8, 10, 12,] 다차원 배열 // 다차원 배열 const arrA = [[1, 2, 3,], [4, 5, 6,],], arrB = [[2, 4, 5,], [1, 2, 6,],]; // 다차원 배열 arrA + arrB의 합 arrA + arrB = [[3, 6, 8], [5, 7, 12,],]; - for loop, Array,prototyp..

Less Variables 변수 (Variables) 변수는 한 위치에서 값을 제어할 수 있는 방법을 제공하며, 코드를 보다 쉽게 관리 및 유지할 수 있게 도와준다. 일반적인 CSS 코드 a, .link { color: red; } .widget { color: white; background: red; } 변수를 사용한 코드 // 변수 @link-color: red; @link-color-hover: hotpink; // 사용법 a, .link { color: @link-color; // red } a:hover { color: @link-color-hover; // hotpink } .widget { color: white; background: @link-color; // red } 변수 보간법 (..

CSS Preprocessor [Less] CSS preprocessror Less 사용법 Less 사용법 Node.js와 함께 사용. [Node.js 설치 필수] npm install -g less lessc styles.less > styles.css 혹은 styles.less styles.css 브라우저가 less 파일을 읽지 못 하기 때문에 css로 컴파일 해주어야 한다. less.js 파일과 함께 사용. 변수 (Variables) Less @background-color: skyblue; @padding: 10px; @margin: @padding + 2px; @border: 1px solid black; css.title { background-color: @background-color; p..