1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <!DOCTYPE html> <html> <!-- Ctrl alt B--> <head> <title>예제 1</title> <style> #wrap{ overflow:hidden; } .menu { border:1px solid gray; margin:5px; padding:5px; /*text에 따라 크기가 변경된다.*/ width:80px; height:30px; /* 수평 정렬*/ float:left; /* 텍스트 중앙 정렬*/ text-align: center; } li:first-child{ border-radius:10px 0 0 10px; } li:last-child{ border-radius:0 10px 10px 0; } #menu1{ margin-left: -10px; } #menu1 > li:hover{ color:red; } #menu1 > li{ list-style: none; float:left; border: 1px solid gray; padding:5px; width:80px; height:30px; /*border*/ /*텍스트 중앙 정렬*/ text-align:center; /*수평 정렬*/ float:left; /*배경 색*/ background-color: black; /*글자 색*/ color:white; /*폰트 크기*/ font-size:20px; } </style> </head> <body> <div id="wrap"> <div class="menu">메뉴1</div> <div class="menu">메뉴2</div> <div class="menu">메뉴3</div> <div class="menu">메뉴4</div> </div> <ul id="menu1"> <li>메뉴 1</li> <li>메뉴 2</li> <li>메뉴 3</li> <li>메뉴 4</li> </ul> </body> </html> | cs |
Develop/HTML_CSS
댓글