Study/JavaScript (9) 썸네일형 리스트형 [Javascript] 무한 슬라이드 만들기 무한 슬라이드 만드는 방법이다. HTML ⟨ ⟩ CSS /* slide_list */ .slide_list {position: relative; overflow: hidden; width: 414px; height: 212px; margin: 50px auto;} .slide_list .slides {position: absolute; top: 0; left: 0; width: 1242px; transition: 0.5s ease-in-out;} .slide_list .slides li:first-child {margin-left: 100px;} .slide_list .slides li:not(:last-child) {float: left; margin-right: 100px;} /* arrow_bar .. [Node.js] yarn이란? yarn이란? 페이스북에서 만든 자바스크립트 패키지 매니저로 npm과 같은 기능을 수행한다. npm의 단점으로 생각하는 속도(performance), 안정성(stability), 보안성(security)을 보완하기 위해 만들어진 매니저툴이다. 속도 다운받은 패키지 데이터를 캐시(cache)에 저장하여, 중복된 데이터를 제외한 저장된 파일을 활용한다. npm은 순차적으로 설치하는 것과 달리 여러 개 패키지를 병렬로 처리한다. 안정성/보안성 npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있는 편리한 기능이지만, 반대로 안정성을 위협할 수 있다. yarn은 yarn.lock이나 package.json으로부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하여 버전 차이로.. [Node.js] npm이란? npm이란? 노드 패키지 매니저(Node Package Manager)의 약자이며, node의 기본 패키지 관리자이다. 길게 풀자면 Node.js를 통해 만들어진 패키지(모듈)을 설치하고 관리해주는 프로그램을 의미한다. npm은 따로 프로그램을 설치하는 방식이 아닌, node를 설치할 때 기본적으로 같이 설치된다. 사용 할 때는 termin이나 cmd 등에서 실행해야 한다. https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScrip.. [JS]멀티선택 | 다중선택 Multi Select Box 멀티선택에 대해 작업을 하다가 꽤나 괜찮은 소스를 발견하여 간단히 정리해보려한다. Jquery Multi Select Box 플러그인이라 하는데 아래 링크로 접속해서 세팅을 먼저해야한다. https://hemantnegi.github.io/jquery.sumoselect/ Jquery.sumoselect by Hemant Negi jquery.sumoselect jquery.sumoselect.js - A cross device Single/Multi Select jQuery Select plugin. LIVE DEMO HERE Sumoselect full : jquery.sumoselect.js Minified : jquery.sumoselect.min.js A jQuery plugin that pro.. [JS]자바스크립트 기초 | 연산자 Opertors , -, *, / , % 거듭제곱 ** 우선순위 수학과 동일하게 곱셈과 나누셈이 덧셈과 뺄셈보다 먼저이다. 연산자 줄여서 쓰기 let num = 10; num = num + 5; num += 5; //위의 식과 동일한 결과가 나옴 num *= 5; //곱하기 num -= 5; //빼기 num %= 5; //나머지 console.log(num); 증가 연산자, 감소 연산자 값을 1만큼 증가 또는 감소 시킨다. let num = 10; num++; //증가 num--; //감소 console.log(num); ++나 --를 앞에 쓰느냐 뒤에 쓰느냐에 따라 차이가 있다. let num = 10; let result = ++num; console.log(result); 뒤에 두면 result의 값이 증가 시키기.. [JS]자바스크립트 기초 | 형변환 String() // 문자형으로 변환 Number() // 숫자형으로 변환 Boolean() // 불린형으로 변환 "Hello " + "world" = "Hello world" 100 + 200 = 300 "100" + 200 = ??? 문자형+ 문자형은 문자형을 숫자형 + 숫자형은 두 수를 더한 값을 보여주는데 자료형이 다르면 의도치 않은 동작이 일어날 수 있다. const mathScore = prompt("수학 몇점?"); const engScore = prompt("영어 몇점?"); const result = (mathScore + engScore) / 2; console.log(result); prompt를 통해 숫자 받아왔을 경우 const mathScore = 90; const engScor.. [JS]자바스크립트 기초 | alert, prompt, confirm alert 알려주는 역할 메세지를 띄우며, 확인을 누르기 전까지 닫히지 않는다. 사용자와 상호작용을 하기보단 일방적으로 알려주는 용도로 사용한다. alert(); prompt 입력 받는 역할 사용자에게 메세지를 보여주고, 입력 받을 수 있는 값을 제공한다. const name = prompt("이름을 입력하세요."); alert("환영합니다, " + name + "님"); const name = prompt("이름을 입력하세요."); alert(`환영합니다, ${name}님. 환영합니다.`); 위의 코드와 같이 사용하면 이름을 입력하는 창이 먼저 뜨며, 이름을 입력하면 alert창이 뜬다. 백틱으로 해도 동일하게 작용하는 것을 확인할 수 있다. prompt창을 취소하면, null값을 받는다. const .. [JS]자바스크립트 기초 | 자료 1. 문자형 String const name1 = "Mike"; //큰 따옴표(double quoto) const name2 = 'Mike'; //작은 따옴표(single quoto) const name3 = `Mike`; //백틱(backtick) const message = "I'm a boy"; const message2 = 'I\\'m a boy'; const message3 = `My name is ${name}`; const message4 = `나는 ${30-2}`살 입니다.`; 문자형은 위에서 보는 것과 같이 3가지로 사용이 가능하며, message2처럼 작은 따옴표를 사용하고 싶을 때에는 '\'를 앞에 넣어주면 특수문자로 인식한다. 백틱은 문자열 내부에 변수를 넣을 때 편리하다. 2. 숫.. 이전 1 2 다음 목록 더보기
