🔻스크롤 위치에 따른 프로세스 바 만들기 기본 뼈대 에밋으로 작성하여 스크롤을 할 수 있을만큼 본문 내용을 추가한다. Lorem ipsum dolor sit amet. 이벤트 DOM에서는 window.scrollY로 스크롤의 위치를 확인했다. jQuery에서는 $(document).scrollTop()로 스크롤의 위치를 확인한다. 스크롤바 위치에 따른 프로세스바 크기를 구하기 위해 둘의 관계를 살펴보면, 문서의 세로 길이의 최대 위치일 때, 프로세스바의 크기가 100%가 된다. 이것을 1차 방정식으로 구하면 아래와 같은 식이 나온다. 스크롤바 최대 위치 : 100% = 스크롤바 위치 : x let x = $(document).scrollTop() * 100 / ($(document).outerHeight..
읽기 1. obj.css('attr') 쓰기 2. obj.css('attr', 'value') 3. obj.css('attr', 'value') .css('attr', 'value') .css('attr', 'value') 4. obj.css({ attr: value, attr: value, attr: value }) 5. obj.addClass('class') 지우기 1. css(속성) : 읽기 2. css(속성, 값) : 쓰기 하나로 통일하여 인자값으로 읽기, 쓰기를 적용한다. 코드 양이 적어 생산성이 높다. 읽기 //자바스크립트로 css 조작할 때 inline style sheet를 사용했다. // alert(document.getElementById('box').style.color); // al..
기본 뼈대 jQuery Event 🔻BOM, DOM 이벤트 등록 방법 BOM btn.onclick = function() {} DOM btn.addEventListener('click', function() {}); 🔻jQuery 이벤트 함수 1. 전용 이벤트 함수 객체.이벤트함수(콜백함수) $('#btn1').click(function() { alert('btn1'); }); 2. 범용 이벤트 함수 객체.on(이벤트명, 콜백함수) $('#btn2').on('click', function() { alert('btn2'); }); 다양한 이벤트를 on 으로 접근한다. 이벤트함수는 BOM, DOM에서 사용하는 것과 같다. 3. 이벤트 제거 전용 함수, 범용 함수의 이벤트를 제거한다. $('#btn2').of..
🔻jQuery() 함수 jQuery 라이브러리의 핵심이며, HTML 문서 내에서 요소를 선택하고 조작하기 위한 강력한 도구이다. 이 함수를 사용하여 CSS 선택자를 이용해 HTML 요소를 찾고, 해당 요소에 대해 다양한 작업을 수행한다. 🔻jQuery() 함수 특징 1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. 2. 반환값에 무언가를 적용하면 항상 자동으로 루프가 동작되어 각 요소마다 적용된다. 3. 자바스크립트 객체와 jQuery 객체는 서로 형변환할 수 있다. 기본 뼈대 jQuery 함수 상자1 상자2 상자3 상자4 상자5 1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. jQuery('CSS 선택자').css() 로 접근한다. 2. 반환값에 무언가를 적용하면 항상 자..
🔻jQuery 란 자바스크립트 코드를 간결하게 작성하고, 크로스 브라우징 문제를 해결하며, 다양한 기능을 쉽게 사용할 수 있게 해주는 라이브러리이다. 자바의 .jar 파일 여러개 모아놓은 것이라 생각하면된다. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and ex..
