728x90

웹/자바스크립트 7

스크롤 내릴 때 애니매이션 효과 넣기 자바스크립트

https://kevink1113.tistory.com/entry/%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%9A%A8%EA%B3%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EC%A3%BC%EB%8A%94-%EA%B0%84%EB%8B%A8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-AOS 스크롤에 따라 애니메이션 효과 적용해주는 간단 라이브러리: AOS 1. AOS(Animate On Scroll) 라이브러리 소개 가끔 웹서핑을 하다 보면 스크롤 위치에 따라 글자, 사진 등의 컨텐츠가 나타나는 효과가 적용된 ..

DataTables그리드 데이터테이블 그리드 라이브러리

Grid 라이브러리-Datatables 사용법/예제 https://saintsilver.github.io/datatables-ex/ DataTables Examples saintsilver.github.io DEMO : https://saintsilver.github.io/datatables-ex/ 기본 사용 공식홈페이지에 들어가시면 메인페이지에 등장합니다. 윗 스크린샷에서 설명이 생략된 #myTable 은 아래와 같은 구조로 만드시면 되고, 서버사이드로 데이터를 처리하여 데이터테이블을 만들 시 를 선언하시고 실제로 값을 넣으시면 됩니다. 저는 ajax로 처리할 예정이라서 만 사용했습니다. 공식홈페이지에선 데이터가 100,000건 이상이면 서버사이드로 처리하라고 권장하고 있습니다. 컬럼1 컬럼2 컬럼3 ..

자바스크립트 무료 그리드 라이브러리 정보

https://sshbug.tistory.com/973 [Javascript] 무료 그리드 라이브러리 정보 - SlickGrid : 대용량 데이터에 적합 https://github.com/6pac/SlickGrid GitHub - 6pac/SlickGrid: A lightning fast JavaScript grid/spreadsheet A lightning fast JavaScript grid/spreadsheet. Contribute to 6pac/SlickGrid development by creating an accoun sshbug.tistory.com - ToastUi Grid https://ui.toast.com/tui-grid TOAST UI :: Make Your Web Delicious..

[제이쿼리]$(document).ready(function(){});

jQuery를 사용한 모든 웹페이지는 다음 코드로 시작합니다. $(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다. jQuery 이벤트 메서드 중 하나입니다. 이 메서드는 비슷한 기능을 수행합니다. 고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있습니다. 반면에 jQuery의 이벤트 메서드는 표준 이벤트 모델이나 인터넷 익스플로러 이벤트 모델과 마찬가지로 이벤트로 여러개의 함수를 연결할 수 있습니다. 아래의 예제는 실행하게되면 문서가 준비되는 순간 경고창 세 개가 연달아 표시됩니다. $(document).ready() 메서드는 굉장히 많이 사용되므로 jQuery에서는 간단하게 사용할 수 있는 형태를 제공합니다. jQuery - $(documen..

querySelector(), querySelectorAll()

보통 HTML요소를 선택한다면 주로 jquery라이브러리를 사용해서 $("")를 사용하여 선택하는 경우가 많습니다. 이번 포스팅에서는 jquery를 사용하지 않고 자바스크립트에서 HTML요소를 선택할 때 사용하는 함수 querySelector(), querySelectorAll()에 대해서 알아보겠습니다. querySelector() - HTML의 요소를 선택할 때 사용하며 Id, Name, Class, HTML태그 등 다양한 요소들을 선택할 수 있습니다. - 이름이 같을 경우 최상단의 요소를 선택합니다. - 요소를 선택하여 Value를 변경하거나 Style을 변경하는 등 다양한 동작들을 수행할 수 있습니다. - 사용 예제 1. HTML요소 선택(id, class, name) 및 value입력 결과 화면..

자바스크립트로 0.5초마다 클릭하는 매크로 만들기 ( 주의사항 반드시 숙지!!)

function clickFunction() { // 클릭하기 위한 코드를 추가 } setInterval(clickFunction, 500); //클릭 기능이 0.5초마다 실행 이 매크로를 사용하려면 clickFunction() 메서드에서 클릭하기 위한 코드를 추가해야 함. 예를 들어, ID가 myButton인 경우 다음 코드를 사용 function clickFunction() { document.getElementById('myButton').click(); } setInterval(clickFunction, 500); 주의!! 이러한 유형의 매크로는 특정 웹사이트 또는 웹서비스에 허용되지않을 수 있습니다.(ex 티켓팅 같은경우) 이 매크로를 사용하기 전에 !!반드시!! 서비스 약관을 확인하고 사용해야..

728x90