SMALL 전체 글133 자바스크립트 javascript 7. 서브메뉴만들기 4 (업그레이드편) 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. 서브메뉴만들기 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 34 다음 LIST
