html 질문합니다.
-
게시물 수정 , 삭제는 로그인 필요
이 사진의 결과처럼 출력되는 css 코드(style 태그)를 작성하려고 합니다. 클래스 속성이 있을 경우 클래스 선택자를 사용하고 입력 요소는 속성 선택자를 사용하고요. 자식 요소는 자손 선택자를 사용할 것. 메뉴 바위에 마우스가 있을 때만 전체 메뉴가 표시되게끔 하는 겁니다. 모든 요소는 가운데에 정렬해야 하고요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0; padding:0; }
.nav{
background-color: aquamarine;
height: 35px; width : 500px;
padding-left: 40px;
}
.nav ul{
background-color: red; display: none;
}
.nav>li{
float: left; /* display: inline-block; */
list-style-type: none;
margin-right: 30px; line-height: 35px; color:#fff;
}
.mainmenu>li:hover ul{ display: block; position: absolute; }
.mainmenu>li ul li { padding:0 10px; }
</style>
</head>
<<body>
<main>
<nav>
<ul class="menu">
<li><label for="radio1">공지사항</label></li>
<li><label for="radio2">월별행사</label></li>
<li><label for="radio3">잠깐 퀴즈</label></li>
</ul>
</nav>
<section>
<input type="radio" name="tabmenu" id="radio1">
<input type="radio" name="tabmenu" id="radio2">
<input type="radio" name="tabmenu" id="radio3">
<div class="tabbox tab02">
<h3>월별행사</h3>
<table>
<tr>
<td>월</td>
<td>제목</td>
<td>비고</td>
</tr>
<tr>
<td>3월</td>
<td>1학기 개강</td>
<td>동아리 회원 모집</td>
</tr>
<tr>
<td>4월</td>
<td>중간고사</td>
<td>시험시간공지</td>
</tr>
<tr>
<td>5월</td>
<td>비봉축전</td>
<td>개교기념일</td>
</tr>
</table>
</div>
<div class="tabbox tab01">
<h3>공지사항</h3>
<ol id="gongji">
<li>창문을 닫아 주세요</li>
<li>냉난방 전원 끄기</li>
<li>음료수는 반입 불가 입니다</li>
</ol>
</div>
<div class="tabbox tab03">
<h3>잠깐퀴즈</h3>
<ul id="quiz">
<li>HTML이란?<span>(문서구조)</span></li>
<li>CSS란 무엇인가<span>(문서 스타일)</span></li>
<li>JavaScript란 무엇인가? <span>(문서동적효과)</span></li>
</ul>
</div>
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0; padding:0; }
.nav{
background-color: aquamarine;
height: 35px; width : 500px;
padding-left: 40px;
}
.nav ul{
background-color: red; display: none;
}
.nav>li{
float: left; /* display: inline-block; */
list-style-type: none;
margin-right: 30px; line-height: 35px; color:#fff;
}
.mainmenu>li:hover ul{ display: block; position: absolute; }
.mainmenu>li ul li { padding:0 10px; }
</style>
</head>
<<body>
<main>
<nav>
<ul class="menu">
<li><label for="radio1">공지사항</label></li>
<li><label for="radio2">월별행사</label></li>
<li><label for="radio3">잠깐 퀴즈</label></li>
</ul>
</nav>
<section>
<input type="radio" name="tabmenu" id="radio1">
<input type="radio" name="tabmenu" id="radio2">
<input type="radio" name="tabmenu" id="radio3">
<div class="tabbox tab02">
<h3>월별행사</h3>
<table>
<tr>
<td>월</td>
<td>제목</td>
<td>비고</td>
</tr>
<tr>
<td>3월</td>
<td>1학기 개강</td>
<td>동아리 회원 모집</td>
</tr>
<tr>
<td>4월</td>
<td>중간고사</td>
<td>시험시간공지</td>
</tr>
<tr>
<td>5월</td>
<td>비봉축전</td>
<td>개교기념일</td>
</tr>
</table>
</div>
<div class="tabbox tab01">
<h3>공지사항</h3>
<ol id="gongji">
<li>창문을 닫아 주세요</li>
<li>냉난방 전원 끄기</li>
<li>음료수는 반입 불가 입니다</li>
</ol>
</div>
<div class="tabbox tab03">
<h3>잠깐퀴즈</h3>
<ul id="quiz">
<li>HTML이란?<span>(문서구조)</span></li>
<li>CSS란 무엇인가<span>(문서 스타일)</span></li>
<li>JavaScript란 무엇인가? <span>(문서동적효과)</span></li>
</ul>
</div>
</section>
</main>
</body>
</html>
