jQuery 네비게이션2

CSS @charset "utf-8"; /* CSS Document */ /* base */ *{margin: 0; padding: 0;} body{font-family:Verdana; font-size:16px; color:#333;} ul, ol{list-style:none;} h3{font-size:1rem;} a{color:initial; text-decoration:none} #wrap{width: 100%;} #headerArea{width: 100%; position: fixed; background:green; height:57px;} #headerArea .headerInner{width: 1200px; margin: 0 auto;} .dropdownmenu{width:1200px; he..

2021.12.09

jQuery 네비게이션1

CSS @charset "utf-8"; /* CSS Document */ /* base */ *{margin:0;padding:0} body{font-size:16px; color:#333} ul, ol{list-style:none;} a{color:inherit; text-decoration:none} .hidden{display: block; position: absolute; left: -1000%; width: 1px; height: 1px; overflow: hidden; color: #fff} .dropdownmenu{width:670px; height:50px; margin:50px auto 0; padding:50px; border:1px solid #ddd;} .dropdownmenu::..

2021.12.09

jQuery node(DOM) 선택자

jQuery와 DOM jQuery에서는 선택자 및 필터링 기반 트리탐색이 가능하다. 선택자 기반 트리 탐색 메서드 자식 children('선택자') 선택자에 해당하는 직계자식을 선택 find('선택자') 선택자에 해당하는 자식, 자손을 선택 선택자 생략 불가 부모 parent('선택자') 선택자에 해당하는 직계부모를 선택 parents('선택자') 선택자에 해당하는 부모, 조상을 선택 (body, html까지도..) 선택자 생략 하지말자 다음 next('선택자') 선택자에 해당하는 바로 다음 형제 요소 1개 를 선택 (친구) nextAll('선택자') 선택자에 해당하는 모든 다음 형제 요소를 선택 (친구) 이전 prev('선택자') 선택자에 해당하는 이전 형제 요소 1개 를 선택 (친구) prevAll(..

2021.12.08

jQuery animate hover slide

CSS transition으로도 구현할 수 있지만, jQuery로 구현하면 easing효과도 사용할 수 있다. stop() ＊ animate의 계산을 멈춰준다. ＊ animate hover효과 시 stop() 메소드를 꼭 써줘야 한다. ＊ stop을 써주지 않으면 마우스 hover한 횟수 만큼 animate가 멈추지 않고 실행된다. ＊ 또는 clearQueue를 사용해준다. (이게 더 좋음) clearQueue(); ＊ animate의 계산을 취소/삭제 한다. ＊ stop은 단순히 멈추게 해주는것이고, clearQueue는 큐(저장공간)를 삭제시켜준다. (훨씬 좋다) 예제 :)

2021.12.08

jQuery 기본문법

jQuery jQuery(제이쿼리)는 자바스크립트를 더 쉽고, 단순하게 조작할 수 있도록 설계된 자바스크립트 라이브러리다. jQuery는 MIT 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. $ 문법. $ 대신 jQuery 사용 가능 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animat..

2021.12.06

form 이름,패스워드 검사

이름 5자 이상 입력 검사 window.onload=function(){ var elUsername = document.getElementById('username'); // input 지정 var elMsg = document.getElementById('feedback'); // 피드백이 나올 곳 지정 function checkUsername() { // 함수 생성 if (this.value.length < 5) { elMsg.textContent = 'Username must be 5 characters or more'; } else { elMsg.textContent = ''; } } elUsername.addEventListener('blur', checkUsername, false); // 함..

2021.12.03