챌린지

오늘은 파트3 [Three.js 기초] 챕터 01의 강의소개 및 개발환경 구성하기 강의를 들었습니다.(1~3강) 내용이 흥미로운지라 더 듣고싶었는데.. 오늘은 일정이 좀 있어서 ㅠ.ㅠ 나머지는 내일 마저 들어야할 것 같네요 🥹 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! 1 ~ 2강은 어떤식으로 학습을 하게될지, 그리고 어떤걸 배우게 될지에 대한 내용과 기본적인 개발환경 설정(vscode 설치등)에 관한 내용이었습니다. 고래서 요부분은 빠르게 스킵하였구 ㅎㅎ; 3강부터 Three.js에 대해 알아가는 시간을 가졌습니다. Three.js는 웹 브라우저에서 3D 그래픽을 렌더링하기 위한 JavaScript 라이브러리입니다. Three.js는 물체 모델링, 물리 효과, 조명, 텍스처, 애니메이션..

오늘은 저번 포스트에 이어 파트1의 chapter5.넥스트 레벨 페어스 06 ~ 07 강의를 들었습니다. 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! 06강 IntersectionObserver API 사용법 let observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if(entry.isIntersecting) { // 요소가 50%이상 보일 때 행하는 동작 // 관찰된 요소의 뷰포트 내 위치와 크기 entry.boundingClientRect // 관찰된 요소의 총 교차(화면노출) 비율 entry.intersectionRatio // 뷰포트 내 교차된 영역의 위치와 크기 entry.insersect..

오늘은 저번 포스트에 이어 파트1의 chapter5.넥스트 레벨 페어스 03~06 강의를 들었습니다. 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! 일정 시간 이상 눌러야 동작하는 버튼? -> 웹에서 흔히 볼 수 있는 패턴으로 유저가 실수로 눌렀을 때 원치 않는 액션을 수행하지 않기 위해 보통 사용됩니다.저는 확인 모달을 띄우는 것만 생각했는데 이런 UI를 추가해보는 것도 재밌을 것 같네요! JS setInterval - 특정 간격의 시에 맞춰 반복하여 특정 함수를 동작하게 함- clearInterval 함수에 유니크아이디를 넣어 동작을 멈출 수 있음- 엄밀한 시간 정확도를 보장하지 않음*(JS는 싱글스레드라 다른 일이 수행되고있으면 조금 늦게 수행될 수 있음)- JS native 함수- 이..

오늘은 파트1의 chapter5.넥스트 레벨 페어스 강의를 들었습니다. 하두 이것저것 순서상관없이 듣다 보니 좀 헷갈리네요 ^,^; 아마 이번 주 상반기는 요 챕터 내용으로 포스트를 작성할 것 같습니다. 그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요! CSS Cursor - cursor 속성에 다양한 값을 줘서 브라우저별로 커서모양을 바꿀 수 있다. => 사용자 경험 향상 - url(image)를 사용해서 커스텀 이미지로 된 커서를 만들 수도 있다. 오늘 강의에서 따라만들어볼 프로젝트는 아래 사이트입니다. http://nlf.geex-arts.com Next Level Fairs With over 28 years in the industry and over 150 successful fairs..

오늘은 parallax scrolling 기법에 대한 강의를 들었습니다! 예전에 제가 한참 취업준비하던 시절에 많은 포트폴리오에서 이 기법을 사용했던 것 같습니다. 요새는... 개인적으로 그렇게까지 많이 보이지는 않는 것 같아요. 그래도 인터렉티브 웹에서 빠질 수 없는 기법이니 안해봤다면 사이드프로젝트에 한번 넣어보는 것도 재밌을 것 같습니다 ✨ Parallax Scrolling 각 레이어별로 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법. 주로 게임이나 애니메이션 등에 주로 사용되던 기법(ex: 메이플스토리)인데 인터렉티브 웹이 대두되면서 함께 주목받기 시작. - JS 혹은 순수 CSS만으로도 구현가능 - 데스크탑 웹에서 주로 사용하고 모바일 장치에서는 추천되지않음. 보는 사람 입장에서 멀리있는..

오늘은 파트2 Canvas 강의의 ch1과 ch07을 들었습니다. 듣는 순서는 상관없다기에 ㅎㅎ 기초적인 강의만 듣고 개인적으로 재밌어보이는 강의부터 들었네요. 캔버스도 매번 사용할 때마다 검색하면서 썼던 것 같은데 한 번 따로 정리해 두는 게 좋을 것 같네요. 챕터 01에서는 캔버스 사이즈에 대한 기초 지식부터, 기본 파티클 그리는 방법 그리고 생성한 파티클에 다양한 애니메이션을 적용해 볼 수 있었고 마지막에는 캔버스 resize하는 방법에 대해서도 배울 수 있었습니다. const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d') // 드로잉 컨택스트 // 채워진 사각형 그리기 (x, y, w, h) ctx.fi..