"Common.css"의 두 판 사이의 차이
North Korea Humanities
(내용을 "→이 CSS 설정은 모든 스킨에 적용됩니다: cite { box-shadow: inset 0 -20px 0 #FAFAFA; }"(으)로 바꿈) (태그: 대체됨) |
|||
2번째 줄: | 2번째 줄: | ||
cite { | cite { | ||
box-shadow: inset 0 -20px 0 #FAFAFA; | 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; | ||
} | } |
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;
}