영벨롭 개발 일지

[ 산술 연산자 Arithmetic Operator ] 연산자 설명 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 [ 할당 연산자 Assignment Operator ] 연산자 설명 a = 1 a의 값으로 1 할당 a += 1 a의 값으로 a + 1 할당 a -= 1 a의 값으로 a - 1 할당 a *= 1 a의 값으로 a * 1 할당 a /= 1 a의 값으로 a / 1 할당 a %= 1 a의 값으로 a % 1 할당 [ 비교 연산자 Comparison Operator ] 연산자 설명 a == b 자동으로 형 변환이 일어난 후 같은지 비교 예) 123 == "123" -> true a === b a와 b가 같다면 true a !== b a와 b가 다르다면 true a < b a가 b보다 작다면 tru..

[ Swiper 라이브러리] swiper 라이브러리를 사용하면 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 추가할 수 있습니다. 아래 예시처럼, 화살표 버튼을 누르면 다음 슬라이드로 이동하거나 자동으로 슬라이드가 넘어가게 할 수도 있는 것이지요! [ Swiper 라이브러리 연결하기 ] swiper를 사용하는 방법은 여러가지가 있지만, 저는 CDN으로 사용하겠습니다. 구글에 swipers 라고 검색하시고 다음 링크로 이동합니다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitio..

[ lodash 라이브러리 연결하기 ] 구글에 lodash cdn 이라고 검색하시고 다음 링크로 접속합니다. https://cdnjs.com/libraries/lodash.js lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A utility library delivering consistency, customization, performance, & extras. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by o..

[ DOM이란? ] 문서 객체 모델(DOM, Document Obect Model)은 자바스크립트에서 HTML과 XML을 제어하는 여러가지 명령들을 제공해주는 인터페이스입니다. 즉, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용할 수 있게 연결시켜주는 역할을 합니다. [ HTML 요소 검색 ] document.querySelector('선택자') '선택자'로 html 요소 중 첫 번째 요소 하나만 검색 document.querySelectorAll('선택자') html 요소 중 '선택자'에 해당하는 모든 요소들 검색, 배열로 리턴 document.getElementById('아이디') 아이디 이름으로 요소 검색 html 요소 중 '아이디'를 갖고 있는 요소 검색 document.getElementB..

[ GSAP 이란? ] GSAP 은 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리 (오픈소스) 입니다. [ 라이브러리 가져오기 ] 구글에 gsap cdn 이라고 검색하고 다음 링크로 이동하셔서 코드를 복사합니다. https://cdnjs.com/libraries/gsap gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, Reac..

[ HTML 코드 ] search [ 스타일 적용 ] .input-box { margin: 10px; height: 35px; position: relative; /* 아이콘 위치 기준 */ } .input-box input { width: 35px; height: 35px; padding: 4px 10px; border: 2px solid black; box-sizing: border-box; border-radius: 5px; outline: none; color: #777; transition: width .5s; } .input-box input:focus { /* 포커스 되면 가로 너비와, 테두리 선 색상 변경 */ width: 200px; border-color: blue; } .input-b..