<!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>contents_radio</title>
<style>
* {margin: 0; padding: 0;}
/* #rad01:checked ~ .sheet .sheet01 {display: block;}
#rad01:checked ~ .sheet .sheet02 {display: none;}
#rad01:checked ~ .sheet .sheet03 {display: none;}
#rad01:checked ~ .sheet .sheet04 {display: none;}
#rad01:checked ~ .sheet .sheet05 {display: none;}
#rad02:checked ~ .sheet .sheet01 {display: none;}
#rad02:checked ~ .sheet .sheet02 {display: block;}
#rad02:checked ~ .sheet .sheet03 {display: none;}
#rad02:checked ~ .sheet .sheet04 {display: none;}
#rad02:checked ~ .sheet .sheet05 {display: none;}
#rad03:checked ~ .sheet .sheet01 {display: none;}
#rad03:checked ~ .sheet .sheet02 {display: none;}
#rad03:checked ~ .sheet .sheet03 {display: block;}
#rad03:checked ~ .sheet .sheet04 {display: none;}
#rad03:checked ~ .sheet .sheet05 {display: none;}
#rad04:checked ~ .sheet .sheet01 {display: none;}
#rad04:checked ~ .sheet .sheet02 {display: none;}
#rad04:checked ~ .sheet .sheet03 {display: none;}
#rad04:checked ~ .sheet .sheet04 {display: block;}
#rad04:checked ~ .sheet .sheet05 {display: none;}
#rad05:checked ~ .sheet .sheet01 {display: none;}
#rad05:checked ~ .sheet .sheet02 {display: none;}
#rad05:checked ~ .sheet .sheet03 {display: none;}
#rad05:checked ~ .sheet .sheet04 {display: none;}
#rad05:checked ~ .sheet .sheet05 {display: block;} */
#rad01, #rad02, #rad03, #rad04, #rad05 {display: none;}
#rad01:checked ~ .sheet .sheet01 {display: block;}
#rad02:checked ~ .sheet .sheet02 {display: block;}
#rad03:checked ~ .sheet .sheet03 {display: block;}
#rad04:checked ~ .sheet .sheet04 {display: block;}
#rad05:checked ~ .sheet .sheet05 {display: block;}
.sheet div {
display: none;
width: 500px; height: 300px;
border: 1px solid black;
}
.label label {
display: block;
width: 50px; height: 50px;
background-color: #ccc;
float: left;
margin-right: 10px;
border-radius: 25px;
}
#rad01:checked ~ .label label:nth-child(1),
#rad02:checked ~ .label label:nth-child(2),
#rad03:checked ~ .label label:nth-child(3),
#rad04:checked ~ .label label:nth-child(4),
#rad05:checked ~ .label label:nth-child(5) {
background-color: black;
}
</style>
</head>
<body>
<input type="radio" id="rad01" name="tab" checked>
<input type="radio" id="rad02" name="tab">
<input type="radio" id="rad03" name="tab">
<input type="radio" id="rad04" name="tab">
<input type="radio" id="rad05" name="tab">
<div class="sheet">
<div class="sheet01">sheet01</div>
<div class="sheet02">sheet02</div>
<div class="sheet03">sheet03</div>
<div class="sheet04">sheet04</div>
<div class="sheet05">sheet05</div>
</div>
<div class="label">
<label for="rad01"></label>
<label for="rad02"></label>
<label for="rad03"></label>
<label for="rad04"></label>
<label for="rad05"></label>
</div>
<!-- input은 절대 박스로 싸면 안된다. ~ 사용할 때 부모가 달라진다.
부모 아래있는 2레벨에 적용되어야하는데, 박스싸면 같이 2레벨이 된다.
input은 항상 제일 위에 둔다. sheet와 label은 위치를 바꿔줘도 된다.
위치 바꿔서 탭버튼을 어디 둘 것이냐 결정하면 된다. -->
</body>
</html>