https://www.biew.co.kr/entry/ScrollMagic-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%A4%EC%A7%81-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC-%EC%A0%9C-1%ED%8E%B8?category=314309 [ScrollMagic] 스크롤매직 라이브러리 - 설치 방법 및 동작 원리 (제 1편) ScrollMagic Let's start showing off some magic 웹퍼블리싱 프로젝트를 하다 보면 고객사의 요청에 의해 스크롤에 따른 애니메이션(동적인..
애니메이션 라이브러리 https://www.biew.co.kr/entry/%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%9A%A8%EA%B3%BC%EB%A5%BC-%EC%A4%84-%EC%88%98-%EC%9E%88%EB%8A%94-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%E3%86%8DAOSjs?category=314309 스크롤 애니메이션 효과를 줄 수 있는 라이브러리ㆍAOS.js AOS Animate On Scroll Library 프로젝트에서 퍼블리싱 작업 중 세로로 긴 콘텐츠의 메인 또는 서브페이지를 코딩하다 보면, 고객사의 요청에 의해 스크롤되었을 때 콘텐츠 요..
https://www.biew.co.kr/entry/TweenMax%E3%86%8DGSAP-%ED%8A%B8%EC%9C%88%EB%A7%A5%EC%8A%A4-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EB%B0%B0%EC%9A%B0%EA%B8%B01-%EC%9E%85%EB%AC%B8%EC%84%B8%ED%8C%85%EB%B0%A9%EB%B2%95?category=314309 [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기1 - 입문(세팅방법) 프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다. 애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까? www.biew.co.kr 1. 기초..
1. script 선택자 document.getElementById(''); // ID로 html 호출 document.getElementsByClassName(''); // Class로 array 호출 document.querySelector(''); // css 방식으로 호출, array에서 첫번째 값만 가져옴 document.querySelectorAll(''); // css 방식으로 호출, array 전체 2. event listen 1) addEventListener("event name", function name); - removeEventListener로 나중에 지울 수 있음 const title = document.querySelector("div.hello:first-child h1")..
1. fullpage overflow-scroll - https://alvarotrigo.com/fullPage/examples/scrolling.html#3rdPage -높이가 100vh를 넘어갈때 스크롤이 자동으로 생기게 하는 것 (섹션 높이가 일정하지 않거나 풀페이지를 반응형으로 부득이하게 해야할 경우) -scroll overflow: true 2. slide + zoomin 복합 - nextapps-de.github.io/spotlight/ 3. fadeup 효과 - https://michalsnik.github.io/aos/ 4.
- 문자열에서 특정한 문자를 찾아내는 도구 (찾아내서 삭제, 치환 등..) - 정규표현식을 java script에서 사용하는 방법
UI - User Interface - 컴퓨터가 사용자를 대면하는 접점 - 사용자의 의도를 시스템에게 전달, 시스템의 상태를 사용자에게 전달 API - Application Programming Interface - 기반이 되는 시스템이 제공한 interface ex) alert창 - 개발자는 API를 자신의 맥락에 맞게 응용 -> 운영체제가 제공하는 API를 이용해서 웹브라우저 개발자들이 웹 API를 만들게 되고... 또 그걸 웹개발자들이 응용하고...계층적 구조를 가짐 - 계층의 사이사이에 interface가 존재 - 튜토리얼 : 언어의 문법, 안내서 / 레퍼런스 : 명령어 사전 - 자바스크립트의 API는 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분됨
1. 모듈 - 코드의 재활용성, 유지보수를 쉽게 하기 위해 - 코드를 부품화 시키는 것 (코드를 여러개의 파일로 분리 ) - 순수 자바스크립트에는 모듈이라는 개념이 분명하게 존재하진 않지만, 자바스크립트가 구동되는 환경(호스트)에 따라 서로 다른 모듈화 방법이 제공 ex) 웹 : script src / node.js : require *모듈의 효과 - 자주 사용하는 코드를 별도의 파일로 만들면 필요할 때마다 재활용 가능 - 코드 수정시 필요한 로직을 빠르게 찾을 수 있음 - 필요한 로직만을 로드해서 메모리 낭비를 줄임 - 한번 다운로드 된 모듈은 웹브라우저에 의해서 저장, 동일한 로직을 로드할 때 시간과 네트워크 트래픽 절약 가능 2. 라이브러리 - 모듈과 비슷한 개념, 자주 사용되는 로직을 재사용하기 ..
- 연관된 데이터를 담는 그릇 (배열과 유사) - 데이터에 인덱스가 아닌 이름을 붙일 수 있다는 것이 배열과 다른점 - 다른 언어에선, 연관배열, 맵, 딕셔너리라는 데이터 타입이 해당 - key : value var age = {'name1':28, 'name2':25, 'name3':29} // name$ 는 key 값, 숫자는 value //value값에 접근하기 alert(age['name1']); //alert(age['na'+'me1']); 문자열을 결합할 때 사용하기 편함, []안에는 string 삽입 가능 alert(age.name1); - 다른 선언 방법 var age = {}; age['name1'] = 28; age['name2'] = 25; age['name3'] = 29; var a..
- 연관된 여러 개의 데이터를 모아 통으로 관리하기 위함 (데이터를 담는 그릇) - index값을 가짐 (0부터 시작) var member = ['egoing', 'k8805', 'sorialgi'] alert(member[0]); alert(member[1]); alert(member[2]); 1. 배열의 사용 : 배열과 반복문 function get_members(){ return ['egoing', 'k8805', 'sorialgi']; } var members = get_members(); for(var i = 0; i < members.length; i++){ // members.length는 배열에 담긴 값의 개수 document.write(members[i].toUpperCase()); //..