SMALL 프론트엔드 개발자/JS29 자바스크립트 javascript 7. 서브메뉴만들기 3 - css 의 hover 기능으로 메뉴 만들기 html MENU1 submenu1 submenu2 submenu3 submenu4 submenu5 MENU2 submenu1 submenu2 submenu3 submenu4 submenu5 MENU3 submenu1 submenu2 submenu3 submenu4 submenu5 MENU4 submenu1 submenu2 submenu3 submenu4 submenu5 MENU5 submenu1 submenu2 submenu3 submenu4 submenu5 css * { margin:0; padding:0; box-sizing: border-box; } .hbox { height: 100px; background-color: #ccc; } .list { width: 1000px; display: fl.. 2023. 4. 4. 자바스크립트 javascript 7. 서브메뉴만들기 2 (간단형) css * { margin: 0; padding: 0; box-sizing: border-box; } .hbox { height: 100px; background-color: #ccc; } .list { width: 1000px; display: flex; margin: 0 auto; } .list > li { flex: none; width: 200px; list-style: none; } .list > li >a { display: block; height: 100px; text-align: center; line-height: 100px; text-decoration: none; color: #333; font-size: 30px; } .list > li:hover > a { background-c.. 2023. 4. 4. 자바스크립트 javascript 7. 서브메뉴만들기 1 * { margin:0; padding:0; box-sizing: border-box; } li { list-style: none; } .spacer { height: 50px; } body { padding: 50px; } .menu { width: 100px; height: 100px; background-color: #fc0; text-align: center; line-height: 100px; position: relative; } .menu .sub { position: absolute; left:100%; top:0; width: 150px; height: 100px; background-color: #0f0; } /* CSS로 메뉴1설정하기 */ .menu1 .sub { display:no.. 2023. 4. 4. 자바스크립트 javascript 6 .DOM요소 클래스 제어하기 element.classList.메쏘드() 1. add() 클래스 생성 element.classList.add('on') on을 생성 2. remove() 클래스 삭제 element.classList.remove('on') on을 삭제 3. contains() 클래스 유무 체크( true, false) element.classList.contains('on') on이 있으면 true, 없으면 false ==> if문과 함께 사용 4. toggle() 클래스가 있으면 삭제 없으면 생성 element.classList.toggle('on') on이 있으면 삭제, 없으면 생성 2023. 4. 4. 이전 1 2 3 4 5 6 7 8 다음 LIST
