JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<main>
		<nav>
			<ul class="menu">
				<li><input type="radio" name="tabmenu" id="radio1"><label for="radio1">공지사항</label></li>
				<li><input type="radio" name="tabmenu" id="radio2"><label for="radio2">월별행사</label></li>
				<li><input type="radio" name="tabmenu" id="radio3"><label for="radio3">잠깐 퀴즈</label></li>
			</ul>
		</nav>
		<section>
			<div class="tabbox tab01">
				<h3>공지사항</h3>
				<ol id="gongji">
					<li>창문을 닫아 주세요</li>
					<li>냉난방 전원 끄기</li>
					<li>음료수는 반입 불가 입니다</li>
				</ol>
			</div>
			<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 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>

CSS

* { margin: 0; padding:0; }
	input[type="radio"] {
		display:none;
	}
	div.tabbox {
		display:none;
	}
	input[type="radio"]:checked + label {
		color:red;
	}
	nav {
		position: relative;
		height: 35px;
	}
	nav ul{
		background-color: lightgreen;
		display:flex;
		width : 500px;
		justify-content: center;
		margin:auto;
		position:absolute;
		top:-20px;
		left: calc(50% - 250px);
	}
	nav ul:hover {
		position: relative;
		top:0;
		left:0;
	}
	nav ul li{
		list-style-type: none;
		margin-right: 30px; line-height: 35px;
	}
	main:has(input[type="radio"]#radio1:checked) div.tab01 {
		display:block;
		padding: 20px;
	}
	main:has(input[type="radio"]#radio2:checked) div.tab02 {
		display:block;
		padding: 20px;
	}
	main:has(input[type="radio"]#radio3:checked) div.tab03 {
		display:block;
		padding: 20px;
	}
	section {
		background: antiquewhite;
		margin: 20px auto;
		width: 1000px;
	}
	section h3 {
		text-align: center;
	}
	.tab02 {
		text-align: center;
	}
	.tab02 table {
		margin: 0 auto;
    	background: lightgrey;
    	border-collapse: collapse;
	}
	.tab02 table tr {
		border-bottom: 2px solid blue;
	}
	.tab02 table td {
		padding:0 10px;
	}
	ul#quiz li span {
		display:none;
	}
	ul#quiz li:hover span {
		display:inline-block;
		margin-left: 20px;
	}