Posis

이번 포스팅에서는 라이브러리 없이 JavaScript 코드만을 사용해서 이미지 슬라이드를 구현해 보겠습니다. 구현하는 방법은 무수히 많기 때문에 이 사람은 이런 식으로 구현했구나라고 참고하시면 될 것 같습니다. HTML Next Prev Bootstrap에 container만 이용했습니다. CSS .slide { overflow: hidden; position: relative; } .slide-container { width: 300vw; height: 400px; display: flex; transition: all 0.8s; } .slide-box { width: 100vw; } .slide-box:nth-of-type(1) { background: center/cover no-repeat url..

변수(variable)란? 변수는 간단하게 데이터를 저장하는 곳입니다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 사용하는 이유 흔히 이름, 나이와 같은 데이터를 저장할 수도 있고 DOM의 셀렉터로 찾은 HTML 요소도 저장할 수 있습니다. document.querySelector와 같은 셀렉터를 탐색하는 명령어를 매번 사용하면 사용할 때마다 DOM을 탐색해야 하지만 여러 번 사용하게 될 때 변수에 저장해두면 한 번만 탐색하고 저장한 데이터를 바로바로 사용하니 JavaScript의 동작속도를 조금 더 빠르게 할 수 있습니다. var 함수(function) 레벨 스코프입니다. function test() { var age = 22..

JavaScript의 탄생 1995년 넷스케이프라는 브라우저에 웹페이지를 보조적인 기능을 수행하기 위해 개발한 언어이다. 처음에는 모카(Mocha)로 명명되었고 그 해 9월에 라이브스크립트(LiveScript)로 이름이 바뀌었다가 12월에 JavaScript로 최종 명명되었다. ECMAScript JavaScript의 초기는 크로스 브라우징 이슈가 계속 발생하게 되면서 웹개발을 하기가 무척 어려웠던 시기입니다. 이를 해결하기 위해 ECMA 인터내셔널에 JavaScript의 표준화를 요청하게 됩니다. 그 이후에 1997년에 ECMAScript v1이 완성되었고 정식 명칭을 JavaScript에서 ECMAScript로 명명하게 됩니다. ECMAScript는 매년 새로운 버전을 공개하였고 2009년에 HTML..

JavaScript에서는 꼭 Boolean 값을 쓰지 않고 true & false를 구별할 수 있는 방법이 있습니다. Truthy true 0이 아닌 수 '값' {} [] if (1) console.log('Truthy'); // Truthy if ('true') console.log('Truthy'); // Truthy if ({}) console.log('Truthy'); // Truthy if ([]) console.log('Truthy'); // Truthy Falsy false 0 '' null undefined NaN if (0) console.log('Truthy'); else console.log('Falsy'); // Falsy if ('') console.log('Truthy'); el..