DOCTYPE html> jQuery - scroll event html, body {height: 100%;} .page { height: 100%; position: relative;} .page:first-child { background: url("../../images/bg-dark-02.jpg") no-repeat center top / cover; /* background-attachment: fixed; */ } .page > h1 { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 6em; font-weight: bold; text-shadow: 4px 4px 4px rgba(0, 0..

DOCTYPE html> jQuery - wheel event $(function() { // wheel 이벤트 // - 마우스 휠을 굴릴 때 발생하는 이벤트 // - 기본 이벤트 = 스크롤 // - wheel 자체가 스크롤을 하기 위한 하드웨어이기 때문에 // 스크롤 이벤트가 패시브 기능 // → 따라서 기존의 방식으로는 기본 이벤트를 제거 할 수 없다. // → 제거하려면 패시브를 해제하고 제거해야한다. // wheel 이벤트의 기본 이벤트를 제거하여 스크롤이 되지 않도록 한다. // - 스크롤 자체를 막는 것은 아니다. window.addEventListener("wheel", function(event) { event.preventDefault(); }, {passive:false}); $(win..

DOCTYPE html> jQuery - Animation $(function() { // 시각 효과 관련 메서드들은 연속해서 호출하면 // 동시에 수행되는 것이 하니라 호출된 순서대로 하나씩 수행된다. // → 시각 효과 관련 메서드를 호출하면 애니메이션 큐에 저장된다. // → 애니메이션 큐에 저장된 효과들을 하나씩 꺼낸 다음 수행 // 애니메이션 효과를 제어하기 위한 메서드 // - clearQueue() : 큐에 대기 중인 효과를 제거 // - delay() : 지연/대기 시간 // - stop() : 현재 실행 중인 효과를 정지 // - finish() : 큐에 저장된 효과의 최종 형태로 변화 // - queue() : 애니메이션 큐에 사용자 정의 함수를 추가 // - dequeue() : qu..

DOCTYPE html> jQuery - Animate #button { width: max-content; margin: 0 auto; } #box { width: 200px; height: 200px; margin: 0 auto; background-color: gold; } /*------------------------------------------*/ #news-ticker { width: 600px; height: 2em; border: 5px solid gold; margin: 0 auto; overflow: hidden; } #news-ticker > ul { position: relative; top: 0; left: 0; } #news-ticker > ul > li { height: ..

DOCTYPE html> jQuery - Animation .gray-box > h1 { background-color: orange; color: navy; padding: 1em; border-radius: 8px; /* 시각 효과를 이용하는 요소들을 */ /* 숨길 때 display 속성을 통해야만 숨겨야한다. */ display: none; } .buttons { width: max-content; margin: 0 auto; } .buttons > button { font-size: 0.8em; } $(function() { // 시각 효과 메서드의 매개 변수 // - duration : 효과 진행 시간 // - complete : 효과 진행이 끝난 다음 수행 시간() var $hello1 = ..

DOCTYPE html> jQuery - each $(function() { // jQuery 객체의 배열 관리 // - jQuery 객체 내에는 다수의 요소를 포함하기 위한 배열이 있고 // jQuery 객체의 메서드는 이 배열을 다루기 위한 로직이 이미 있다. // 따라서, 하나의 메서드로 다수의 요소들을 조작할 수 있다. // - 각 요소마다 다른 값들로 조작할 때는 메서드의 인자로 // 함수를 전달하여 각 요소마다 수행시킬 수 있다. // → 이때, 다수의 메서드의 인자로 함수를 전달하게 되면 // 오히려 코드가 복잡해지고 관리하기가 힘들다. // → 각 요소마다 다루기 위한 기능이 많거나 복잡하다면 // each() 메서드를 통해 각 요소마다 수행할 기능을 한 번에 작성 $("#list1 > l..