jQuery 네비게이션 full dropdown_navi

CSS @charset "utf-8"; /* CSS Document */ *{margin:0; padding:0;} body{font-family:"돋움", "돋움체"; font-size:16px; color:#333;} h3{font-size:1rem;} ul,ol{ list-style:none;} a{color:inherit; text-decoration:none;} body{background: green;} .wrap{width: 100%;} #headerArea{position: fixed; left:0; top:0; width:100%; height:50px; border-bottom:1px solid #999; background: #fff;} #gnb{clear:both; width:120..

2021.12.09

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

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