1.npm init 설치 2.node-sass 설치 3.scripts부분에 추가해 주기 sass : script 이름으로 자신이 원하는 이름을 생성하는 자리 실행시킬 내용 : 작성한 파일을 실행시키는 자리 예)"sass":":node-sass css/style.scss style.css" 4. npm run sass 시 반영되는것 확인 5.scss를 칠때마다 계속 4번을 해야하는 번거로움을 없애기 위해 package.json 에 scripts 에 추가한다. "sass":"node-sass -w -r css/style.scss style.css" 로 변경하면 한번 실행 후 scss에 저장하면 바로 컴파일 된다!! 추가할경우 _파일명.scss(예: _common.scss)로 저장 한 수 메인 scss 파일에..
#배열 /* #배열선언 const 배열 = new Array(); 배열[0] = '값'; #배열 리터럴 표현식 const 배열 = ['값','값1']; 배열[0] 키(인덱스) = 값 (value); map - 배열에서 새로운 배열을 만듬 filter - 배열에서 골라내기 */ //배열선언방식 const array = new Array(); array[3] = 1; //4번째자리 1 array.push("뒤"); array.unshift("앞"); array.shift(); array.pop(); console.log(array); /* 배열 추가 삭제 https://gent.tistory.com/295 array.push('뒤'); // 배열의 끝에 요소를 추가 array.unshift('앞'); // ..
//console.log("sun"); //변수선언 let suuun; // console.log(suuun); //할당되지 않았으므로 => undefined suuun = "써니"; //console.log(suuun); //할당되었으므로 => 써니 //const suuun; //할당되지 않아서 에러가 발생 const suuun = "써니"; //선언과 동시에 할당을 해야함 //let this = "뭘까?"; == 예약어는 변수로 쓸 수 없음 console창으로 확인해 보자! 문자, $, _를 사용하여 변수명을 생성 공백과 대소문자를 구분 예약어(class, this, function, if, for, true , false, undefined, null 등등)은 변수명으로 사용 불가 *변수 let -..
I'm box! I'm box2! I'm box3! const box = document.getElementById("box"); const box2 = document.getElementById("box2"); console.log(box, typeof box); //객체다! const text_change = function () { //const에는 함수를 담을 수 있음 this.innerHTML = "박스이름 바꿔!"; //box.innerHTML = "박스이름 바꿔!"; }; box.addEventListener("click", text_change); //클릭이라는 이벤트를 추가(addEventListener) //변수.이벤트추가('이벤트명',함수) box2.onclick = function ..
#자바스크립트 기본 let a = 1; let b = "1"; let c = "true"; let d = true; let e; let f = null; console.log(a, b, c, d, e, f); /* 1.각변수들의 자료형 확인 2. 숫자 number 문자 string 참/거짓 boolean undefined null 객체 */ /* 자료형 확인 - typeof */ console.log( typeof a, //number typeof b, //string typeof c, //string typeof d, //boolean typeof e, //undefined 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형 typeof f //object - null은 객체! 변수는 존재하나, n..
#탭메뉴 See the Pen 자스로 탭 메뉴 by Kim Mi Seon (@miseon920) on CodePen. ++console.log(e.currentTarget, e.target); 핵심은 currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다! 즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다. *querySelector는 해당 셀렉터 내용 중 제일 첫 번째 것만 선택 되므로 querySelectorAll을 써서 모두 가져온다. 따라서 배열로 담기므로 forEach로 반복문으로 처리해야 한다. 배열처럼 보이나(유사배열) 사실 NodeL..
