"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; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Accordion 기본 스타일 */ | ||
+ | .cdx-accordion { | ||
+ | background-color: #f9f9f9; | ||
+ | border-radius: 8px; | ||
+ | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
+ | margin-bottom: 10px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /* Header 스타일링 */ | ||
+ | .cdx-accordion__header { | ||
+ | background-color: #0066cc; | ||
+ | color: #ffffff; | ||
+ | padding: 15px; | ||
+ | font-size: 18px; | ||
+ | cursor: pointer; | ||
+ | display: flex; | ||
+ | justify-content: space-between; | ||
+ | align-items: center; | ||
+ | transition: background-color 0.3s ease; | ||
+ | border: none; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .cdx-accordion__header:hover { | ||
+ | background-color: #005bb5; | ||
+ | } | ||
+ | |||
+ | /* 아이콘 변환 효과 */ | ||
+ | .cdx-accordion[open] .cdx-accordion__header::after { | ||
+ | content: "▲"; /* 상징적 아이콘 */ | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | .cdx-accordion:not([open]) .cdx-accordion__header::after { | ||
+ | content: "▼"; /* 기본 ▼ 아이콘 */ | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | /* Content 스타일링 */ | ||
+ | .cdx-accordion__content { | ||
+ | padding: 15px; | ||
+ | background-color: #f1f1f1; | ||
+ | border-top: 1px solid #ccc; | ||
+ | font-size: 16px; | ||
+ | line-height: 1.5; | ||
+ | transition: max-height 0.3s ease; | ||
+ | } | ||
+ | |||
+ | /* 내용이 펼쳐졌을 때의 애니메이션 */ | ||
+ | .cdx-accordion[open] .cdx-accordion__content { | ||
+ | max-height: 500px; /* 필요에 따라 조정 */ | ||
+ | } | ||
+ | |||
+ | /* 텍스트 내 기본 여백 설정 */ | ||
+ | .cdx-accordion__content p { | ||
+ | margin: 10px 0; | ||
} | } |
2024년 11월 23일 (토) 16:52 판
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
cite {
box-shadow: inset 0 -20px 0 #FAFAFA;
}
/* Accordion 기본 스타일 */
.cdx-accordion {
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
overflow: hidden;
}
/* Header 스타일링 */
.cdx-accordion__header {
background-color: #0066cc;
color: #ffffff;
padding: 15px;
font-size: 18px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
border: none;
width: 100%;
}
.cdx-accordion__header:hover {
background-color: #005bb5;
}
/* 아이콘 변환 효과 */
.cdx-accordion[open] .cdx-accordion__header::after {
content: "▲"; /* 상징적 아이콘 */
font-size: 20px;
}
.cdx-accordion:not([open]) .cdx-accordion__header::after {
content: "▼"; /* 기본 ▼ 아이콘 */
font-size: 20px;
}
/* Content 스타일링 */
.cdx-accordion__content {
padding: 15px;
background-color: #f1f1f1;
border-top: 1px solid #ccc;
font-size: 16px;
line-height: 1.5;
transition: max-height 0.3s ease;
}
/* 내용이 펼쳐졌을 때의 애니메이션 */
.cdx-accordion[open] .cdx-accordion__content {
max-height: 500px; /* 필요에 따라 조정 */
}
/* 텍스트 내 기본 여백 설정 */
.cdx-accordion__content p {
margin: 10px 0;
}