odada

DOM Dom (Document Object Modal) 이란 HTML 문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게 해줍니다. Node vs Element 노트(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 요소(Element) : HTML 요소를 의미 DOM node 란? // 지정된 id값을 가진 요소를 반환 document.getElementById("someid"); // 지정된 클래스 이름을 가진 모든 하위 요소의 개체를 반환 document.getElementsByClassName("someclass"); // 지정된 태그 이름을 가진 요소의 HTML 모음을 반환 document.getElementsByTagName("LI"); // 지정된 class와 일..

ScrollTrigger란? 동적인 사이트를 만들 때 빠지지 않고 사용하는 라이브러리 중 하나이다. 최소한의 코드로 스크롤 애니메이션을 구현할 수 있다. GSAP 공식사이트 https://greensock.com/docs/v3/Installation cdnjs https://cdnjs.com/libraries/gsap 1. setting //cdn //스크롤 트리거 불러오기(플러그인 안정화) 2. 기본 사용법 gsap.to(대상, { scrollTrigger:{ trigger:대상, 스크롤속성:값, 스크롤속성:값 }, 속성:값, duration:재생시간 }) 3. 샘플 https://greensock.com/scrollmagic/ See the Pen scrollTrigger by odada (@odad..

mdn 자바스크립트 기본 https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics JavaScript 는 뭔가요? JavaScript 는 웹 브라우저에서 사용하기 위하여 만들어진 HTML과 웹의 프로그래밍 언어입니다. 왜 JavaScript를 공부해야합니까? JavaScript는 모든 웹 개발자 가 배워야 하는 3 가지 언어 중 하나입니다 . 웹 페이지의 내용을 정의하는 HTML 웹 페이지의 레이아웃을 지정하는 CSS 웹 페이지의 동작을 프로그래밍하는 JavaScript 웹 개발 JavaScript는 웹 애플리케이션의 동적인 기능을 구현하기 위해 필수적입니다. 웹 페이지에서 사용자와의 상호작용, 데이..

https://react.vlpt.us/basic/02-prepare.html 2. 작업환경 준비 · GitBook 2. 작업환경 준비 참고: 만약, 여러분이 현재 사용중인 컴퓨터에 프로그램을 설치 할 수 없는 환경이라면, Codesandbox 의 리액트 샌드박스 를 사용하여 개발을 하시면 됩니다. 앞으로 계속해서 튜토 react.vlpt.us 2. 작업환경 준비 참고: 만약, 여러분이 현재 사용중인 컴퓨터에 프로그램을 설치 할 수 없는 환경이라면, Codesandbox 의 리액트 샌드박스 를 사용하여 개발을 하시면 됩니다. 앞으로 계속해서 튜토리얼을 진행하기 전에, 다음 항목들을 설치해주어야 합니다. Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반..

https://react.vlpt.us/basic/01-concept.html 1. 리액트는 어쩌다가 만들어졌을까? · GitBook 01. 리액트는 어쩌다 만들어졌을까? 리액트 학습을 본격적으로 하기 전에, 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것입니다. JavaScript를 사용하여 react.vlpt.us 01. 리액트는 어쩌다 만들어졌을까? 리액트 학습을 본격적으로 하기 전에, 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것입니다. JavaScript를 사용하여 HTML 로 구성한 UI 를 제어해보셨다면, DOM 을 변형시키기 위하여 우리가 어떤 작업을 해야하는지 익숙 할 것입니다. 브라우저의 DOM Selector A..

1. sticky 예제 webflow.com/website/Sticky-On-Scroll Responsive web design tool, CMS, and hosting platform | Webflow Build responsive websites in your browser, then launch with our world-class hosting or export your code. Discover the professional website platform built for your business. webflow.com 2. 오브젝트를 고정시켜주는 라이브러리입니다. stickyjs.com/

kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io

bashooka.com/coding/10-best-javascript-scrolling-animation-plugins/ 10+ Best Javascript Scrolling Animation Plugins – Bashooka Scrolling animation helps better control the user flow and make sure important content is appropriately shown to a given user. The idea is that, as a user scrolls through the site, different bashooka.com alexfox.dev/lax.js/ https://alexfox.dev/lax.js/ alexfox.dev github...

Apple은 제품 페이지의 세련된 애니메이션으로 유명합니다. 예를 들어, 페이지를 아래로 스크롤하면 제품이보기에 들어가고, MacBook은 접 히고 iPhone은 회전하면서 하드웨어를 과시하고 소프트웨어를 시연하며 제품 사용 방식에 대한 대화식 이야기를 들려줍니다. iPad Pro의 모바일 웹 경험 비디오를 확인하십시오. 출처 : Twitter 당신이 보는 많은 효과는 HTML과 CSS에서만 만들어지지 않습니다. 그러면 무엇을 물어? 글쎄, 이해하기가 조금 어려울 수 있습니다. 브라우저의 DevTools를 사용하더라도 요소를 지나칠 수없는 경우가 많기 때문에 항상 답을 알 수있는 것은 아닙니다 . 이러한 효과 중 하나를 자세히 살펴보고 어떻게 만들어 졌는지 확인하여 자체 프로젝트에서 이러한 마법 효과 중..

클릭시 $('.depth1 > li > a').click(function(){ if ($(this).parent().hasClass('on') === false) { $('.depth1 > li').removeClass('on'); $(this).parent().addClass('on'); } else if ($(this).parent().hasClass('on') === true) { $(this).parent().removeClass('on'); } }) 마우스 오버시 $('.depth1 > li > a').mouseenter(function () { if ($(this).not($(this).hasClass('on'))) { $('nav li ul').slideUp(); $(this).next()...