WEBPI's Markup && Css Developer

jquery를 이용하면 slideup, slidedown 함수를 이용해서 쉽게 아코디언 메뉴를 만들 수 있다 그렇지 않을때 max-height를 이용하거나 내부 컨텐츠의 height를 체크하여 아코디언 메뉴를 만들 수 있으나 더욱 간단하게 쓸 수 있는 방법이 있다 //css .accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s; } .accordion-content[aria-hidden="false"] { grid-template-rows: 1fr; } .accordion-content > div { overflow: hidden; } // html 버튼 { const activePane..

jquery는 .on을 이용할 수 있으나 jquery를 쓰지 않을경우 일반적인 "addEventListener"로는 이벤트를 주기가 어렵다 이럴때 이용할 수 있는 방법으로 ".matches"가 있다 document.addEventListener("click", e => { // 이벤트 버블링 e.target 비교 const target = e.target.matches(".target"); if (!target)return; if (target) { alert("클릭!"); } });

교차 관찰자는 기본적으로 관찰 중인 요소(Element)가 뷰포트(Viewport)와 교차하고 있는지를 감지하는 API인데, 관찰 중인 요소가 사용자가 보는 화면 영역 내에 들어왔는지를 알려주는 API entries 관찰 대상의 여러 정보들이 배열로 담겨져 있다. - boundingClientRect: 관찰 대상의 사각형 정보(DOMRectReadOnly) - intersectionRect: 관찰 대상의 교차한 영역 정보(DOMRectReadOnly) - intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number) - isIntersecting: 관찰 대상의 교차 상태(Boolean) - root..

이미지의 원본 사이즈를 확인하기 위한 방법으로 naturalWidth, naturalHeight를 쓸 수 있다. 로드가 시작 되었다면 확인가능하다 셀렉터.naturalWidth 셀렉터.naturalHeight

Javascript 최적화 - for문for문의 최적화for (var i in array) | forEach .. 를 사용하지 말자for in 문은 매우 느리다. object의 key를 확인해야하는게 아니면 for in 문 사용을 자제하자!for (var i = 0; i < array.length; i++) .. 대부분 이런방식이다.이것도 최적화된 방법은 아니다.아주 기본적인 방법이다. 그럼 뭘사용해요 빼에에ㅔ엑!따라서 성능에 제일 좋은 방법은 length 를 매번 체크하지않고 저장해서 사용하는법이다.for (var i = 0, length = array.length; i < length; i++) .. 이방식이다. 이로써 우리는 for in 문보다 64배 빠른 for 문을 사용할수있다. "!!!!!!!..

var prevPosition = 0;$(window).on('scroll', function(event){ var initPosition = $(this).scrollTop(); if(initPosition > prevPosition){ //스크롤다운중; } else { //스크롤 업중; } prevPosition = initPosition});스크롤 이벤트 체크많은 스크롤 체크 관련 소스가 있지만 쉽게 알 수 있어서 가져옵니다출처 : http://cafe.naver.com/hacosa/136825 고씨님 댓글

HTML5을 이용한 애니메이션과 게임을 만들기 위한 자바스크립트 라이브러리 http://jindo.dev.naver.com/collie/

http://www.catswhocode.com/blog/10-regular-expressions-for-efficient-web-development?utm_source=twitterfeed&utm_medium=twitter

AJAXIAN.KR 에서 좋은정보가 있네요 자바스크립트 연습장 아주 유용할 듯 합니다 그러나저 언제쯤 자스정복을... ㅜㅜ http://sandbox.jsninja.kr/ 출처 : AJAXIAN.KR

두번째 onmouseover onmouseover는 마우스가 올라왔을 때 발생하는 이벤트입니다.