jQuery 네비게이션3

CSS @charset "utf-8"; /* CSS Document */ /* base */ *{margin: 0; padding: 0;} body{font-family:arial; font-size: 16px; color:#333;} h3{font-size:1rem} ul,ol{list-style:none;} a{color:inherit; 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; heig..

2021.12.09

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

a href=# 클릭 시 상단 이동 방지

a href = # 클릭 시 상단 이동 방지 탭버튼의 경우 키보드 포커스를 받기 위해 a 태그를 사용하게 되는데, 이를 클릭 하게 될 경우 이벤트 실행 동시에 페이지가 상단으로 올라가서 사용하기 불편해진다. 이를 방지하기 위한 4가지 방법이 있다. 방법1 ) 없는 아이디를 하나 링크시켜 준다. 버튼기능 방법2 ) void(0) 를 링크시켜 준다. 버튼기능 방법 3) JavaScript 내부에 링크 방지 코드를 삽입한다. $('.box a').click(function(e){ e.preventDefault(); // href=# 방지 }); 방법4 ) 이벤트 끝에 return false;를 삽입해준다. 버튼기능

2021.12.08

jQuery node(DOM) 선택자

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

2021.12.08

jQuery 선택 리스트 박스 (Family Site)

접근성을 고려한 스크립도 같이 넣어줘야 한다. ＊ jQuery 노드(DOM) 에 관련된 메소드를 알아야 한다. ＊ focus, blur 이벤트는 a태그에만 사용 가능하다 CSS *{margin:0; padding:0;} ul{ list-style:none;} a{ color:#333; text-decoration:none} .select{position:relative; width:200px; height:40px; border:1px solid #ccc; background:url(plus.jpg) 95% 50% no-repeat #fff; margin:50px} .select .arrow{ display:block; height: 40px; line-height: 40px; padding-left:2..

2021.12.08