코딩짜는 일상

📕 오늘 배운 것jQueryjQuery 효과Sliding 효과slideDown() / slideUp() / slideToggle()Fading 효과fadeIn() / fadeOut() / fadeToggle() / fadeTo(속도, 투명도)Animate 효과animate() / stop()응용 예제음성 녹음 & 다운로드 기능 캔버스 기능사각형 출력이미지 출력이미지 내 포인트와 텍스트 출력챗봇 대화 출력 📙새로 알게 된 것stop()대상 객체 애니메이션 멈춤stop(true)대상 객체에 걸린 대기열 예약 애니메이션 전부 삭제. 초기화.

📕 오늘 배운 것jQuery 이벤트종류마우스 이벤트키보드 이벤트입력 양식 이벤트$.each() 메소드이벤트 객체의 중단 메소드jQuery DOM 요소 조작삽입 또는 삭제속성 추가 및 삭제클래스 속성jQuery 효과Basic 효과hide() / show() / toggle() 📙 새로 알게 된 것stopPropagation() / shopImmediatePropagation()맨날 preventDefault() 만 쓰다가 2가지 새로운 이벤트 중단 메소드 알게됨!근데... 이거 어떨 때 구분해서 쓰는거지...? preventDefault() 만 써도 충분하지 않나...? 나중에 강사님께 여쭤봐야 할 듯😂 📗 오늘 회고밀린 TIL 작성! 💪🔥

📕 오늘 배운 것jQuery 선택자직접 선택자인접 관계 선택자상위 요소하위 요소형제 요소필터 선택자속성 선택자jQuery 변수jQuery 이벤트사용 방법2개 이벤트 동시 적용종류윈도우 이벤트마우스 이벤트 📙 새로 알게 된 것메소드 체이닝객체.메소드1.메소드2. ... 형태로 하나의 객체에 여러가지 메소드를 한 줄에 적용시킬 수 있음.원래도 쓰고는 있었는데 이게 jquery 기능이었구나... 워낙 jquery랑 javascript를 혼용해 쓰다보니 몰랐다...😜jQuery 메서드 사용이 가능한 object 형태의 변수변수명 앞에 $를 붙이면 jQuery 메서드 사용이 가능한 object 형태의 변수임을 의미하게 된다고 한다!Ex) var $obj = $('#box1');의미도 몰랐는데 회사에선 나..

📕 오늘 배운 것javascript객체(object)브라우저 객체setInterval()문서 객체 모델(DOM)문서 내 요소(태그) 제어 메서드요소 생성동적 태그 객체 생성요소 속성 변경요소 참조이벤트이벤트 리스너이벤트 핸들러폼 객체폼 객체 사용법유효성 확인jQueryjQuery란?사용 방법다운로드 / CDN 📙 새로 알게 된 것setInterval() 사용시 보안 이슈setInterval('함수명()', 1000) 의 형태로 사용시 문자열이 넘어가면 보안상 이슈가 있을 수 있다고 비권장한다고 하셨다. 인터넷에서 찾아본 자세한 이유는 아래와 같다.크로스 사이트 스크립팅(XSS) : '함수명()' 부분에 공격자가 다른 코드를 삽입해 브라우저에서 실행되도록 할 수 있음.문자열 기반 코드는 가독성이 떨..

메뉴의 서브메뉴를 숨겼다 펼치거나 특정 목차의 컨텐츠 내용을 접었다 펼칠 때 주로 collapse 또는 아코디언을 검색합니다. 찾아보시면 여러가지 방법을 소개하고 있지만 일단 이 글에선 Javascript와 jQuery를 쓰는 방식을 비교해보고자 합니다. 먼저 HTML은 다음과 같습니다. HTML main 1 sub 1 sub 2 sub 3 Javascript 먼저 자바스크립트 입니다. 서브 메뉴의 max-height를 0으로 만들거나 원래 높이로 되돌리는 방식으로 접었다 폈다 하는 컨셉입니다. sub 클래스 스타일에 transition을 추가해주지 않으면 애니메이션 없이 팟 나타났다가 팟 사라집니다. 주의!! jQuery 마지막으로 제이쿼리 입니다. 자바스크립트보다 코드가 훨씬 짧아졌습니다! 서브 메뉴..

(업데이트) html, body 둘다 overflow를 먹인채로 scrollTo를 써야하는 경우가 있어서... 좀 더 고심끝에 새로운 방법을 찾았습니다! - 20220802 #1 원인 스크립트가 동작하지 않는다면 가장 먼저 생각해볼 것은 함수 function 이 제대로 동작하지 않는 것입니다. 함수 안에 console.log('확인문구')를 입력해서 console에 문구가 찍히는지 확인해보면 알 수 있죠. 하지만 문구가 찍히는데도 scrollTo가 안 먹힌다? 1. 이동해야 할 위치값을 못 받음 2. scrollTo로 움직일 스크롤을 잘못 특정함 원인은 이 둘 중에 하나일 것입니다. #2 구조 저는 요소를 클릭하면 javascript를 이용해 지정한 페이지로 이동하는 웹 페이지를 만들었습니다. 2번으로 ..