퍼블리싱 아카이브

로직 1. navbar의 시작 상태 CSS를 디자인한다. 2. on class가 붙었을 때 CSS를 디자인한다. 3. window.scrollY >0 일 때, on 클래스를 붙인다. 4. window.scrollY = 0 일 때, on 클래스를 뗀다. javascript+css .navbar{ position:fixed; top:0; left:0; z-index:5; width: 100%; height: 80px; transition: all 1s ease; } .navbar.on{ height: 50px; transition: all 1s ease; } .navbar-brand{ font-size: 30px; transition: all 1s ease; } .navbar-brand.on{ font-si..

window.addEventListener('scroll',function(){ //스크롤 할 때마다 이벤트 실행 console.log(window.scrollY); //유저가 스크롤 바를 얼마나 내렸는지 표시 // console.log(window.pageYOffset);(호환성 보완) console.log(window.scrollX); //가로스크롤 표시 window.scrollTo(0,100); //강제스크롤(window.scrollTo(x,y)) 해당 위치로 window.scrollBy(0,100); //현재 위치에서 y축으로 100px 스크롤 하기.(현위치 기준 이동) }); jquery $(window).on('scroll',function(){ $(window).scrollTop(); //현..

1. 마우스 이벤트 click : 마우스 버튼을 클릭했을 때 dbclick: 마우스 버튼을 더블클릭했을 때 mousedown: 마우스 버튼을 눌렀을 때 mouseup: 누르고 있던 마우스 버튼을 놓았을 때 mousemove: 마우스 커서를 움직였을 때 mouseenter: 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링X) mouseover: 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링O) mouseleave: 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링x) mouseout: 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링O) 버블링에 대한 것은 아래 링크를 참고 https://ko.javascript.info/bubbling-and-capturing 버블링과 캡처링..