CSS 탭 메뉴 (자바스크립트 없이) 순서
- input[type="radio"]를 사용해서 각각의 탭에 해당하는 선택 상태를 만든다.
- 각 탭에 label을 달아서 클릭 시 input이 체크되도록 연결 (
for, id 사용).
- 탭에 맞는 컨텐츠는 div로 나눠서 각각의 영역을 만든다.
- CSS에서
input:checked ~ .contents .tab1 { display: block; } 이런 식으로
체크된 input에 따라 어떤 내용이 보일지 결정한다.
- 나머지 탭 내용은
display: none; 처리해서 안 보이게 함.
- 탭 디자인은 Flex로.
**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-only Tab Menu</title>
<style>
body {
font-family: sans-serif;
background: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.tab-container {
width: 300px;
}
/* 라디오 버튼 숨기기 */
input[type="radio"] {
display: none;
}
/* 탭 버튼 */
.tabs {
display: flex;
gap: 5px;
}
.tabs label {
flex: 1;
text-align: center;
padding: 10px;
background: #ddd;
cursor: pointer;
border-radius: 5px 5px 0 0;
transition: background 0.3s;
}
/* 선택된 탭 강조 */
#tab1:checked ~ .tabs label[for="tab1"],
#tab2:checked ~ .tabs label[for="tab2"],
#tab3:checked ~ .tabs label[for="tab3"] {
background: #333;
color: #fff;
}
/* 콘텐츠 박스 */
.content {
border: 2px solid #333;
padding: 20px;
background: #fff;
border-radius: 0 0 5px 5px;
}
.tab-content {
display: none;
}
/* 선택된 탭만 표시 */
#tab1:checked ~ .content .c1,
#tab2:checked ~ .content .c2,
#tab3:checked ~ .content .c3 {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<!-- radio buttons -->
<input type="radio" id="tab1" name="tabs" checked>
<input type="radio" id="tab2" name="tabs">
<input type="radio" id="tab3" name="tabs">
<!-- tab labels -->
<div class="tabs">
<label for="tab1">귀가하니 8시</label>
<label for="tab2">저녁식사는</label>
<label for="tab3">오레오 오즈+우유</label>
</div>
<!-- tab contents -->
<div class="content">
<div class="tab-content c1">저녁을 밥이 아니라 오레오 오즈로 먹다니</div>
<div class="tab-content c2">밥먹을 시간을 버렸다.</div>
<div class="tab-content c3">과제한다고 맘이 급해서 슬픈 선택을 하고 말았다.</div>
</div>
</div>
</body>
</html>
순서 요약 다시 정리
| 순서 |
작업내용 |
| 1 |
<input type="radio">로 탭 상태 관리 |
| 2 |
<label for="radio_id">로 클릭 가능하게 만듦 |
| 3 |
.tab-content는 전부 display: none 처리 |
| 4 |
선택된 라디오에 맞는 .tab-content만 display: block |
| 5 |
.label도 :checked에 따라 스타일 변경 |
탭 애니메이션 넣기
.tab-content {
opacity: 0;
transition: opacity 0.3s ease;
}
#tab1:checked ~ .content .c1,
#tab2:checked ~ .content .c2,
#tab3:checked ~ .content .c3 {
display: block;
opacity: 1;
}
(단, display: none은 트랜지션이 안 먹음)
