허도경, limewhale

프로젝트 작업을 진행하다 보면 같은 디자인인데 색상 컬러값만 다른 경우가 발생합니다. 이렇게 아이콘이 추가될 때마다 동일한 요소임에도 이미지는 계속해서 추가되는 문제가 발생하게 됩니다. 또 화살표(꺽쇠) 아이콘은 디자인을 하는 사람에 따라 크기나 색상이 차이가 발생하는 경우도 있습니다. 이런 꾸밈요소들이 이미지가 아닌 코드로 관리된다면 수정도 편하고 범용적으로 사용도 쉽게 됩니다. 이를 도와주는 것이 Svg입니다. SVG란? SVG(Scalable Vector Graphics)는 '벡터 그래픽'을 표현하기 위한 XML 기반의 포맷입니다. JPEG, PNG 등 픽셀 기반 이미지와 다르게 SVG는 '읽을 수 있는 코드'이므로 정보 접근성이 좋습니다. SVG 가져오기 - 포토샵 포토샵의 경우 벡터 도형(pat..

기존 함수 정의 방식 var a = function() { // ... }; 화살표 함수 정의 방식 var a = () => { // ... }; 화살표 함수는 ES6문법에서 함수를 표현하는 새로운 방식입니다. ES5의 function 함수와 비슷한 방식으로 동작하지만 몇 가지 차이점이 있습니다. // ES5 var add = function(x, y) {return x+y;} // ES6 let add = (x, y) => {return x+y}; ES5와 비교해보면 function이 사라졌고 그 자리를 => 함수가 대체했네요. 지금은 그것 말곤 크게 다른 게 없는 것 같죠? 우선 기본적인 화살표 함수 사용방법을 알아볼께요. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 ..

숫자 데이터를 전달받아서 값을 절삭하거나 반올림 등의 가공이 필요한 경우 자바스크립트의 기본 함수인 Math 객체를 사용하게 됩니다. 간단한 예제를 통해서 한 번씩만 해보신다면 쉽게 이해가 되실 거예요. Math 객체에 대해 이미 알고 있거나 다른 객체도 공부하고 싶으신 분들은 제가 정리한 String 객체와 date 객체도 살펴보면 좋을거 같아요. document.write(Math.max(52, 273, 103, 57, 32)); // 최대값, 결과 : 273 document.write(Math.min(3 , 5, 1, 4)); // 최소값, 결과 : 1 document.write(Math.round(3.4)); // 반올림, 결과 : 3 document.write(Math.ceil(3.2)); //..