transition과 JQuery의 Animate 차이점 CSS - transition transition은 CSS 속성값으로 애니메이션 효과를 발생시킵니다 transition-property : 어떤 속성에 적용할지 transition-duration : 얼마동안 지속할지 transition-timing-function : 시간 함수, 효과 transition-delay : 얼마 후에 시작할지(딜레이) ------------------------------------------------- transition-property: left; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0.7s; 다음과 같이 한줄로..
2020.10.23
이미지 슬라이드 인디케이터 이미지 슬라이드 ver1 See the Pen qBNqVEj by junheeleeme (@junheeleeme) on CodePen. 이미지 추가는 JS소스 수정 없이HTML코드만 삽입하면 자동으로 슬라이드 가능 인디케이터 이미지 슬라이드 ver2 See the Pen 인디케이터 이미지 슬라이드 ver2 by junheeleeme (@junheeleeme) on CodePen.
2020.10.22
숫자 천단위 구분하기(+정규표현식) See the Pen PozbjxM by junheeleeme (@junheeleeme) on CodePen. 천단위 콤마로 구분하기 var money = $("#inputMoney").val().trim(); //앞뒤 공백제거 var res = money.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); //정규표현식 콤마 제거하기 var restore = $("#inputMoney").val().trim(); //공백제거 var restore.replace(/[^\d]+/g, ''); //정규표현식 관련 정규표현식 설명 [JavaScript][정규식] 숫자에 1000단위로 콤마(쉼표 ,) 구분자 넣기 목표 정규식에 대한 이해, 간단 학..
2020.10.22
preventDefault() & stopPropagation() preventDefault() : 기본 이벤트의 실행을 막아줍니다. 네이버 이동 네이버 이동 $("#alert0").click(function(e){ e.preventDefault(); //이벤트 실행을 막음 }); preventDefualt() 메서드로 인해 네이버로 이동하지 않습니다. stopPropagation() : 이벤트 객체의 버블링을 제거해주는 중요한 메서드입니다. 이벤트 버블링이란 부모요소와 자식요소 모두 이벤트가 연결되어 있는 경우 자식요소의 이벤트를 실행했을때 부모요소의 이벤트 또한 같이 실행되는 현상으로 stopPropagation() 메서드를 이용해서 이를 방해야합니다. 알림창 $("#box").click(functi..
2020.10.21
스크롤을 사용한 Top버튼 See the Pen RwRGJEy by junheeleeme (@junheeleeme) on CodePen. TopButton $("#topBtn").click(function(){ window.scrollTo({ top : 0, behavior: "smooth"}); // 부드럽게 Top : 0 으로 이동 }); 위 방법은 데스크탑에서는 부드럽게 잘 작동하나 아이폰 사파리에서는 부드럽게 작동하지 않는다. //아이폰(iOS) 스크롤탑 부드럽게 이동 $("html, body").animate({scrollTop : 0}, 500); iOS 사파리에서 스크롤탑을 부드럽게 하려면 animate로 구현하면 된다. 데스크탑에도 정상적으로 작동하며 스크롤 속도까지 조절가능!
2020.10.21
마우스의 위치, 좌표값을 구하는 방법 제이쿼리를 사용하여 마우스 커서가 위치한 값을 얻기 위해서는 마우스를 사용하는 이벤트 객체를 사용해야 한다. [event.pageX / event.pageY] 빈 공간을 클릭해 주세요. 위 박스안을 클릭했을때 마우스 좌표값 x, y를 알림창으로 띄우는 제이쿼리 소스입니다. x값은 event.pageX, y값은 event.pageY를 사용하며, Document 즉 문서전체를 기준으로한 마우스 커서의 좌표값을 가져옵니다. 브라우저의 크기가 달라도 전체문서를 기준으로 하기 때문에 마우스 좌표값은 유지됩니다. [client.pageX / client.pageY] 빈 공간을 클릭해 주세요. 현재 브라우저를 기준으로 마우스 커서의 위치값을 구하려면 event.clientX와 e..
2020.10.20
트리거(Trigger) 메서드 See the Pen ZEOpEja by junheeleeme (@junheeleeme) on CodePen. 트리거(Trigger) 웹페이지 안에서 버튼이나 엘리먼트 직접 거치지 않고 이벤트를 동작하는 방법 위 예제에서 방아쇠를 클릭하면 총알이 나가지만 아래의 버튼을 눌러도 방아쇠가 당겨지는 이벤트가 발생된다. 버튼 클릭에는 방아쇠가 당겨지는 트리거가 걸려있기 때문이다. $('selector').trigger('선택할 이벤트');
2020.10.20
CSS만 활용한 사이드 메뉴 See the Pen MWeeOKp by junheeleeme (@junheeleeme) on CodePen. checkbox와 태그를 활용한 사이드 메뉴 사용자와 개발자의 체크박스 사용 용도가 달라도 너무 다르다.
2020.10.19
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev