"Common.css"의 두 판 사이의 차이
North Korea Humanities
| 4번째 줄: | 4번째 줄: | ||
} | } | ||
| − | + | /* 기본 탭 컨테이너 스타일 */ | |
| − | /* 기본 스타일 */ | + | .tabs-container { |
| − | tabs-container { | ||
font-family: Arial, sans-serif; | font-family: Arial, sans-serif; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
| 12번째 줄: | 11번째 줄: | ||
} | } | ||
| − | tab-input { | + | /* 라디오 버튼을 숨기기 */ |
| − | display: none; | + | .tab-input { |
| + | display: none; | ||
} | } | ||
| − | tab-label { | + | /* 탭 버튼 스타일 */ |
| + | .tab-label { | ||
background-color: #f8f8f8; | background-color: #f8f8f8; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
| 23번째 줄: | 24번째 줄: | ||
font-size: 16px; | font-size: 16px; | ||
border-radius: 5px; | border-radius: 5px; | ||
| − | |||
display: inline-block; | display: inline-block; | ||
margin-right: 5px; | margin-right: 5px; | ||
| + | transition: background-color 0.3s; | ||
} | } | ||
| − | tab-label:hover { | + | .tab-label:hover { |
background-color: #e2e2e2; | background-color: #e2e2e2; | ||
} | } | ||
| − | tab-input:checked + .tab-label { | + | /* 선택된 탭 스타일 */ |
| + | .tab-input:checked + .tab-label { | ||
background-color: #007BFF; | background-color: #007BFF; | ||
color: white; | color: white; | ||
| 38번째 줄: | 40번째 줄: | ||
} | } | ||
| − | tab-content { | + | /* 탭 콘텐츠 영역 스타일 */ |
| + | .tab-content { | ||
margin-top: 10px; | margin-top: 10px; | ||
| + | border-top: 2px solid #007BFF; | ||
| + | padding: 10px; | ||
| + | background-color: #f9f9f9; | ||
} | } | ||
| − | tab-pane { | + | /* 탭 콘텐츠 (숨기기 및 표시) */ |
| + | .tab-pane { | ||
display: none; | display: none; | ||
padding: 15px; | padding: 15px; | ||
| 49번째 줄: | 56번째 줄: | ||
} | } | ||
| − | + | /* 각 탭에 맞는 콘텐츠 표시 */ | |
| − | |||
| − | |||
| − | |||
| − | |||
#tab1:checked ~ .tab-content #content1, | #tab1:checked ~ .tab-content #content1, | ||
#tab2:checked ~ .tab-content #content2, | #tab2:checked ~ .tab-content #content2, | ||
2024년 11월 23일 (토) 17:27 판
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
cite {
box-shadow: inset 0 -20px 0 #FAFAFA;
}
/* 기본 탭 컨테이너 스타일 */
.tabs-container {
font-family: Arial, sans-serif;
border: 1px solid #ccc;
padding: 10px;
}
/* 라디오 버튼을 숨기기 */
.tab-input {
display: none;
}
/* 탭 버튼 스타일 */
.tab-label {
background-color: #f8f8f8;
border: 1px solid #ccc;
padding: 10px 15px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
display: inline-block;
margin-right: 5px;
transition: background-color 0.3s;
}
.tab-label:hover {
background-color: #e2e2e2;
}
/* 선택된 탭 스타일 */
.tab-input:checked + .tab-label {
background-color: #007BFF;
color: white;
border-color: #007BFF;
}
/* 탭 콘텐츠 영역 스타일 */
.tab-content {
margin-top: 10px;
border-top: 2px solid #007BFF;
padding: 10px;
background-color: #f9f9f9;
}
/* 탭 콘텐츠 (숨기기 및 표시) */
.tab-pane {
display: none;
padding: 15px;
background-color: #f9f9f9;
border-top: 1px solid #ccc;
}
/* 각 탭에 맞는 콘텐츠 표시 */
#tab1:checked ~ .tab-content #content1,
#tab2:checked ~ .tab-content #content2,
#tab3:checked ~ .tab-content #content3,
#tab4:checked ~ .tab-content #content4,
#tab5:checked ~ .tab-content #content5,
#tab6:checked ~ .tab-content #content6,
#tab7:checked ~ .tab-content #content7,
#tab8:checked ~ .tab-content #content8,
#tab9:checked ~ .tab-content #content9,
#tab10:checked ~ .tab-content #content10 {
display: block;
}