쥰's 블로그

구글 아이콘을 사용할 것이라 cdn과 style을 가져와 헤더에 붙여넣어 준다. 바디에 기본 구조를 만들어 준다. ● 컴포넌트 - 오프캔버스 오프캔버스는 몇 가지의 클래스와 JavaScript 플러그인을 사용해 네비게이션이나 쇼핑카트 등에 유용한 숨겨진 사이드바를 사용할 수 있다. 오프캔버스를 구현하기 위해 기본 구조를 잡아준다. button 태그가 아닌 a태그로 해도 상관 없다. Login을 누르면 오프캔버스가 오른쪽에서 나타나게된다. container에 row를 하면 padding이 생겨서 새로운 div태그를 만들어서 row 로 만들고 login을 넣어줬다. padding이 사라졌다. ● 네비게이션바 네비 위치에 부트스트랩 네비게이션 바를 가져온다. ● 캐러셀 캐러셀은 이미지나 텍스트의 슬라이드를 가..

부트스트랩은 스타일링을 도와주는 것이다. CSS와 번들을 복사해 파일의 헤더 부분에 붙여넣기 해준다. div태그의 class를 두지 않으면 col1,2,3이 세로로 배치 되지만 row로 두었을 땐 col1,2,3이 가로로 배치 된다. ● 컨테이너 이번에는 col에 박스를 두르고 제일 바깥쪽 div 태그를 container로 하면 기본적으로 스타일링이 되는 것을 볼 수 있다. container-lg로 하면 확대했을 시 기본 크기가 자동으로 잡히는 것을 볼 수 있다. ● 그리드 col은 12의 비율로 되어있어서 마진을 주는 것 대신 - 로 숫자를 나타낼 수도 있다. ● 표 기본 표를 만들어 본다. ● 폼 기본 폼 구조를 만들어 본다. 폼은 기본으로 width가 100%로 잡힌다. m- 는 마진을 나타낸다. ..

QRCode의 js를 가져와 바디에 붙여넣어 준다. 그리고 cdn도 가져와 붙여넣기 해준다. QRCode의 Js에 들어가 ZIP 파일을 받아 압축을 풀어준다. 최소 필요 코드는 이렇게만 있어도 된다.

threejs의 cdn을 받아온다. 콘솔로 찍어본다. 큐브의 기본 틀을 만들어 본다. 이번에는 큐브를 회전시켜볼 것이다. 랜더링 작업에 반복작업을 시킬 animate 함수를 실행 시켜준다.

html의 canvas는 그림을 그려주는 코드이다. 스크립트 안에 차트데이터를 넣어주고, 차트의 옵션, 캔버스의 요소 선택 그리고 차트의 객체를 생성하기 위한 코드를 작성하여 실행해본다. 이번에는 맛집 데이터를 추출하여 차트로 만들어 볼 것이다. 이전에 만들어 놓은 맛집 js 파일을 가져온다. ※ 데이터를 가져오기 위해서는 받은 json 데이터위에 대괄호 앞에 const로 정의를 해줘야한다. 그리고 해당 html 파일에 중구.js 파일을 연결시켜 준다. 음식 카테고리만 추출하여 콘솔창에 출력시켜본다. 이번에는 카테고리 별로 누적을 시켜 볼 것이다. 먼저 item 별로 누적시켜 확인해본다. 카테고리 별로 누적시키기 위해 if문을 사용한다. 그리고 콘솔에다 keys와 values를 추출해본다..

gsap의 cdn을 복사하여 헤더에 붙여넣기를 해준다. 그리고 박스3개를 만들고 스타일링해준다. box1을 작성하여 실행해본다. x축의 300 위치까지 이동한다. box4를 추가한 뒤 script를 작성하여 작동시켜본다. box2는 x축의 700까지 이동하는데 360도 돌면서 이동한다. box3은 x축의 900위치부터 시작하여 0의 위치까지 오게 된다. box4는 x축의 500위치에서 시작하여 0의 위치로 오는데 box의 색이 주황색으로 변하게 된다.

● 기본구조 만들기 scrollmagic에 들어가서 cdn을 받아온다. 아니면 scrollmagic cdn을 검색해 최소한의 코드만 들고 올 수도 있다. scrollmagic의 cdn을 헤더에 붙여넣어준다. 그리고 스타일을 넣어준다. 특정 스크롤의 위치가 되면 굴러가면서 사이즈가 커지는 것을 볼 수 있다. 또 해당 스크롤의 위치를 벗어나게 되면 원래대로 돌아오는 것을 볼 수 있다. - 한번에 2개의 ball움직이기 하나의 스크립트로 2개의 공을 움직여 볼 것이다. 이번에 ball2를 추가해주고 serction3을 스타일해준다. querySelector를 querySelectorAll 로 바꾸고 console.log 를 찍어 확인해본다. move2를 만들어 스타일해주고 적용해본다. 스크롤이 50%가 되면 ..

콘솔창을 살펴보면 스크롤을 내릴 때 y 위치 값이 나오게 된다. 이벤트가 너무 많아서 줄여볼 것이다. LODASH cdn을 쳐서 최소코드만 가져온다. 헤더에 cdn을 붙여넣고 스크롤 주기를 줄여준다. 3초에 한번씩 출력되는 것을 볼 수 있다. ● 뱃지 만들기 상품 홍보하기 위한 뱃지를 스크롤 쪽에 위치시켜준다. y의 위치 값이 3000 이상이 되면 뱃지가 사라지는 것을 구현해 볼 것이다. 3000이 넘자 사라지는 것을 확인 할 수 있다.

SWIPER CDN 주소 : https://cdnjs.com/libraries/Swiper Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 bil..

● 스레드 : 작업 실행 단위(실행 흐름 단위) ● 동기 : 미리 정해놓은 약속을 한번에 하나의 작업만 할 수 있도록 하는것 (절차흐름대로 처리 - 단일 스래드 단위) ● 비동기 : 정해진 약속대로 처리하는 것이 아니라 필요한 상황에 따라 원하는 시점에서 작업하는 것 (실행흐름분리 - 스레드를 따로 형성) - 약속 : 요청했을 때 응답이 와야 다른 작업 할 수 있는 것 ● 비동기 처리함수 - setTimeout(()=>{},millisecond) : 일정시간 이후 특정작업을 1회 수행 - 비동기 처리 - clearTimeout(id) : 예약된 작업을 취소 ● 비동기 적용하기 process1과 process3이 출력된 후 1초 후에 process2가 출력된다. (timeout은 밀리세컨드(millisec..