틀:알림 상자/CSS: 두 판 사이의 차이
< 틀:알림 상자
(Hsl0님이 비 기본값 "CSS" 콘텐츠 모델을 사용해 틀:알림 상자/CSS 문서를 만들었습니다) |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
.ambox { | |||
width: clamp(80%, 40em, calc(100% - 10px)); | |||
margin: 3px auto; | |||
padding: 5px; | |||
padding-bottom: 0; /* gap이 맨 아랫줄에 적용되는 문제 수정 */ | |||
gap: 5px; | |||
display: grid; | |||
grid-template-rows: auto 1fr auto; | |||
grid-template-areas: | |||
"ambox-title ambox-title ambox-title" | |||
"ambox-image-left ambox-detail ambox-image-right"; | |||
text-align: center; | |||
background-color: #ededed; | |||
} | |||
.ambox-title { | |||
width: calc(100% - 10px); | |||
padding: 5px; | |||
grid-area: ambox-title; | |||
background-color: #404040; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.ambox-detail { | |||
width: calc(100% - 10px); | |||
padding: 0 5px 5px; | |||
grid-area: ambox-detail; | |||
} | |||
.ambox-image { | |||
place-self: center; | |||
} | |||
.ambox-image-left {grid-area: ambox-image-left;} | |||
.ambox-image-right {grid-area: ambox-image-right} |
2024년 9월 26일 (목) 00:49 판
.ambox {
width: clamp(80%, 40em, calc(100% - 10px));
margin: 3px auto;
padding: 5px;
padding-bottom: 0; /* gap이 맨 아랫줄에 적용되는 문제 수정 */
gap: 5px;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"ambox-title ambox-title ambox-title"
"ambox-image-left ambox-detail ambox-image-right";
text-align: center;
background-color: #ededed;
}
.ambox-title {
width: calc(100% - 10px);
padding: 5px;
grid-area: ambox-title;
background-color: #404040;
color: white;
font-weight: bold;
}
.ambox-detail {
width: calc(100% - 10px);
padding: 0 5px 5px;
grid-area: ambox-detail;
}
.ambox-image {
place-self: center;
}
.ambox-image-left {grid-area: ambox-image-left;}
.ambox-image-right {grid-area: ambox-image-right}