"Common.css"의 두 판 사이의 차이
North Korea Humanities
| 6번째 줄: | 6번째 줄: | ||
/* Accordion 기본 스타일 */ | /* Accordion 기본 스타일 */ | ||
| − | + | cdx-accordion { | |
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
border-radius: 8px; | border-radius: 8px; | ||
| 15번째 줄: | 15번째 줄: | ||
/* Header 스타일링 */ | /* Header 스타일링 */ | ||
| − | + | cdx-accordion__header { | |
background-color: #0066cc; | background-color: #0066cc; | ||
color: #ffffff; | color: #ffffff; | ||
| 29번째 줄: | 29번째 줄: | ||
} | } | ||
| − | + | cdx-accordion__header:hover { | |
background-color: #005bb5; | background-color: #005bb5; | ||
} | } | ||
/* 아이콘 변환 효과 */ | /* 아이콘 변환 효과 */ | ||
| − | + | cdx-accordion[open] .cdx-accordion__header::after { | |
content: "▲"; /* 상징적 아이콘 */ | content: "▲"; /* 상징적 아이콘 */ | ||
font-size: 20px; | font-size: 20px; | ||
} | } | ||
| − | + | cdx-accordion:not([open]) .cdx-accordion__header::after { | |
content: "▼"; /* 기본 ▼ 아이콘 */ | content: "▼"; /* 기본 ▼ 아이콘 */ | ||
font-size: 20px; | font-size: 20px; | ||
| 45번째 줄: | 45번째 줄: | ||
/* Content 스타일링 */ | /* Content 스타일링 */ | ||
| − | + | cdx-accordion__content { | |
padding: 15px; | padding: 15px; | ||
background-color: #f1f1f1; | background-color: #f1f1f1; | ||
| 55번째 줄: | 55번째 줄: | ||
/* 내용이 펼쳐졌을 때의 애니메이션 */ | /* 내용이 펼쳐졌을 때의 애니메이션 */ | ||
| − | + | cdx-accordion[open] .cdx-accordion__content { | |
max-height: 500px; /* 필요에 따라 조정 */ | max-height: 500px; /* 필요에 따라 조정 */ | ||
} | } | ||
/* 텍스트 내 기본 여백 설정 */ | /* 텍스트 내 기본 여백 설정 */ | ||
| − | + | cdx-accordion__content p { | |
margin: 10px 0; | margin: 10px 0; | ||
} | } | ||
2024년 11월 23일 (토) 16:53 판
/* 이 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;
}