"Common.css"의 두 판 사이의 차이
North Korea Humanities
| 6번째 줄: | 6번째 줄: | ||
/* 기본 스타일 */ | /* 기본 스타일 */ | ||
| − | + | tabs-container { | |
font-family: Arial, sans-serif; | font-family: Arial, sans-serif; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
| 12번째 줄: | 12번째 줄: | ||
} | } | ||
| − | + | tab-input { | |
display: none; /* 라디오 버튼 숨기기 */ | display: none; /* 라디오 버튼 숨기기 */ | ||
} | } | ||
| − | + | tab-label { | |
background-color: #f8f8f8; | background-color: #f8f8f8; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
| 28번째 줄: | 28번째 줄: | ||
} | } | ||
| − | + | tab-label:hover { | |
background-color: #e2e2e2; | background-color: #e2e2e2; | ||
} | } | ||
| − | + | tab-input:checked + .tab-label { | |
background-color: #007BFF; | background-color: #007BFF; | ||
color: white; | color: white; | ||
| 38번째 줄: | 38번째 줄: | ||
} | } | ||
| − | + | tab-content { | |
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
| − | + | tab-pane { | |
display: none; | display: none; | ||
padding: 15px; | padding: 15px; | ||
| 49번째 줄: | 49번째 줄: | ||
} | } | ||
| − | + | tab-input:checked + .tab-label + .tab-content .tab-pane { | |
display: block; | display: block; | ||
} | } | ||
| − | + | ||
#tab1:checked ~ .tab-content #content1, | #tab1:checked ~ .tab-content #content1, | ||
#tab2:checked ~ .tab-content #content2, | #tab2:checked ~ .tab-content #content2, | ||
2024년 11월 23일 (토) 17:26 판
/* 이 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;
transition: background-color 0.3s;
display: inline-block;
margin-right: 5px;
}
tab-label:hover {
background-color: #e2e2e2;
}
tab-input:checked + .tab-label {
background-color: #007BFF;
color: white;
border-color: #007BFF;
}
tab-content {
margin-top: 10px;
}
tab-pane {
display: none;
padding: 15px;
background-color: #f9f9f9;
border-top: 1px solid #ccc;
}
tab-input:checked + .tab-label + .tab-content .tab-pane {
display: block;
}
#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;
}