전체보기 (286) 썸네일형 리스트형 iTerm2로 터미널 예쁘게 바꾸기 1. iTerm 설치 https://www.iterm2.com/downloads.html 2. iTerm color 설정을 다운 받고 연다. https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/Solarized%20Dark%20-%20Patched.itermcolors 3. iTerm → preferences → profiles → colors → load presets에서 Solarized Dark로 바꾼다. 4. 다음을 입력한다. sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)".. 자바스크립트 그림 그리기 - canvas save 1. 그리기 기능 // 초기값 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; context.strokeStyle = 'black'; context.lineWidth = 1; // path를 생성했는지 여부 let hasPath = false; function onMouseMove(event) { const x = event.offsetX; const y = event.offsetY; if(!hasPath) { // path 생성 context.beginPath(); // path의 좌표 지정 context.m.. Visual Studio Code 유용한 단축키 command + B : 사이드바를 숨긴다. ctrl + ` : 터미널 탭을 보여준다. (한/A) command + / : 코드를 주석처리한다. option + ↑, ↓ : 코드를 위, 아래로 움직인다. option + shift + ↑, ↓ : 코드를 위, 아래로 복사한다. 다중 커서 command + D : 커서를 특정 단어에 위치시키면 누를 때마다 같은 단어에 새로운 커서가 생긴다. option + 클릭 : 클릭하는 곳에 커서를 하나 더 생성한다. option + shift + i : 선택한 영역의 모든 줄에 커서가 생긴다. shift + option + 마우스 드래그 : 똑같은 너비로 모든 줄을 선택한다. https://youtu.be/Wn7j5dfbJF4 자바스크립트 사용자의 위도와 경도 구하기 function showLocation(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; console.log(latitude, longitude); // 위도와 경도를 보여준다. } function errorHandler() { } // 성공했을 때 showLocation 함수를 반환하고 // 실패했을 때 errorHandler 함수를 반환한다. navigator.geolocation.getCurrentPosition(showLocation, errorHandler); 돔에서 값을 사용자 컴퓨터에 저장하는 메소드 - localStorage localStorage.setItem(key, value); // 임시 저장소 객체에 key라는 값으로 value를 저장한다. { key: value; } localStorage.getItem('key'); // key 값에 저장된 value를 불러온다. // localStorage에는 string 타입만 들어간다. // 때문에 객체를 넣으려면 JSON을 써줘야 한다. 돔 엘리먼트의 클래스 이름 다루기 - classList ele.classList.add('a'); // 엘리먼트에 a라는 클래스 이름을 추가한다. // ele.classList.remove('a'); // 엘리먼트에 a라는 클래스 이름을 지운다. // ele.classList.replace('a', 'b'); // 엘리먼트의 클래스 이름 a를 b로 바꾼다. ele.classList.toggle('a'); // 엘리먼트의 클래스 이름에 a가 있으면 a를 추가하고 없으면 지운다. ele.classList.contains('a'); // 엘리먼트의 클래스 이름에 a가 있으면 true, 없으면 false를 반환한다. ele.classList.item(0); // 엘리먼트의 클래스 이름의 0번째 인덱스에 있는 클래스 이름을 반환한다. // // a는 0번째, b는 1.. 자바스크립트 클로저 예제 - 한 번만 호출할 수 있는 함수 function once(func) { // 여기에 func 변수가 있다고 의식해야 쉽다. let alreadyCalled = false; let result; // 이상의 func, alreadyCalled, result 변수는 // 아래의 add 변수에 클로저로 남는다. return function() { if(!alreadyCalled) { alreadyCalled = true; result = func.apply(null, arguments); // func 변수에 담긴 함수를 호출한다. } return result; } } let add = once(function(a, b) { return a + b; }); add(1, 2); // 3 add(3, 4); // 3 add(5, 6); // 3 마우스를 올려 놓을 때 이벤트 발생 예제 1. HTML 2. CSS .over { margin: 100px; } 3. JS // 마우스를 올려놓을 때 document.getElementById('mountain').onmouseover = function() { this.setAttribute('class', 'over'); }; // 마우스를 올려놓지 않을 때 document.getElementById('mountain').onmouseout = function() { this.setAttribute('class', ''); }; 그림 위에 마우스를 올려 놓으면 그림에 margin: 100px 값이 생기면서 움직인다. 4. 더 나아가서 CSS를 아래처럼 바꾸면 애니메이션 효과도 줄 수 있다. // 마우스를 올려 놓으면 3초 동안 move라는 .. 이전 1 ··· 29 30 31 32 33 34 35 36 다음
