결과
<!DOCTYPE html>
<html lang="ko">
<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></title>
<style>
/*-------- default setting --------*/
* {margin: 0; padding: 0;}
a {color: black; text-decoration: none;}
li {list-style: none;}
/*-------- notice_box --------*/
#rad01, #rad02, #rad03 {display: none;}
#rad01:checked ~ .notice_sheet .sheet01 {display: block;}
#rad01:checked ~ .notice_sheet .sheet02 {display: none;}
#rad01:checked ~ .notice_sheet .sheet03 {display: none;}
#rad02:checked ~ .notice_sheet .sheet01 {display: none;}
#rad02:checked ~ .notice_sheet .sheet02 {display: block;}
#rad02:checked ~ .notice_sheet .sheet03 {display: none;}
#rad03:checked ~ .notice_sheet .sheet01 {display: none;}
#rad03:checked ~ .notice_sheet .sheet02 {display: none;}
#rad03:checked ~ .notice_sheet .sheet03 {display: block;}
.notice_box {
width: 500px; height: 450px;
/* background-color: #ccc; */
margin: 20px 0 0 20px;
}
/* #rad01:checked ~ .notice_label .lab01 {
background-color: yellow;
color: black;
font-weight: bold;
}
#rad02:checked ~ .notice_label .lab02 {
background-color: yellow;
color: black;
font-weight: bold;
}
#rad03:checked ~ .notice_label .lab03 {
background-color: yellow;
color: black;
font-weight: bold;
} */
#rad01:checked ~ .notice_label .lab01,
#rad02:checked ~ .notice_label .lab02,
#rad03:checked ~ .notice_label .lab03 {
background-color: yellow;
color: black;
font-weight: bold;
}
.notice_box .notice_label {overflow: hidden;}
.notice_box .notice_label label {
display: block;
width: 100px; height: 50px;
background-color: #eee;
color: white;
text-align: center;
line-height: 50px;
float: left;
border-radius: 20px 20px 0 0;
cursor: pointer;
}
.notice_box .notice_sheet div {
width: 500px; height: 400px;
background-color: yellow;
font-weight: bold;
font-size: 32px;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<section class="notice_box">
<input type="radio" id="rad01" name="tap_btn" checked>
<input type="radio" id="rad02" name="tap_btn">
<input type="radio" id="rad03" name="tap_btn">
<!-- input 박싱하면 안된다. 부모가 달라진다. ~을 쓸 수 없다. -->
<div class="notice_label">
<label for="rad01" class="lab01">공지사항</label>
<label for="rad02" class="lab02">오시는 길</label>
<label for="rad03" class="lab03">Q&A</label>
</div>
<div class="notice_sheet">
<div class="sheet01">공지사항_sheet</div>
<div class="sheet02">오시는 길_sheet</div>
<div class="sheet03">Q&A_sheet</div>
</div>
</section>
</body>
</html>