틀:알림 상자/CSS: 두 판 사이의 차이
< 틀:알림 상자
편집 요약 없음 |
편집 요약 없음 |
||
| 4번째 줄: | 4번째 줄: | ||
margin: 3px auto; | margin: 3px auto; | ||
padding: 5px; | padding: 5px; | ||
gap: 5px; | gap: 5px; | ||
display: grid; | display: grid; | ||
grid-template- | grid-template-columns: auto 1fr auto; | ||
grid-template-areas: | grid-template-areas: | ||
"ambox-title ambox-title ambox-title" | "ambox-title ambox-title ambox-title" | ||
| 15번째 줄: | 14번째 줄: | ||
text-align: center; | text-align: center; | ||
background-color: # | background-color: #f5f5f5; | ||
box-shadow: 0 0 4px 0px #c8ccd1; | |||
} | } | ||
.ambox-title { | .ambox-title { | ||
| 29번째 줄: | 29번째 줄: | ||
} | } | ||
.ambox-detail { | .ambox-detail { | ||
width: | width: 100%; | ||
grid-area: ambox-detail; | grid-area: ambox-detail; | ||
} | } | ||
.ambox-image { | .ambox-image { | ||
min-width: 60px; | |||
place-self: center; | place-self: center; | ||
} | } | ||
.ambox-image-left {grid-area: ambox-image-left;} | .ambox-image-left {grid-area: ambox-image-left;} | ||
.ambox-image-right {grid-area: ambox-image-right} | .ambox-image-right {grid-area: ambox-image-right} | ||
2024년 10월 6일 (일) 15:12 기준 최신판
.ambox {
width: clamp(80%, 40em, calc(100% - 10px));
margin: 3px auto;
padding: 5px;
gap: 5px;
display: grid;
grid-template-columns: 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: #f5f5f5;
box-shadow: 0 0 4px 0px #c8ccd1;
}
.ambox-title {
width: calc(100% - 10px);
padding: 5px;
grid-area: ambox-title;
background-color: #404040;
color: white;
font-weight: bold;
}
.ambox-detail {
width: 100%;
grid-area: ambox-detail;
}
.ambox-image {
min-width: 60px;
place-self: center;
}
.ambox-image-left {grid-area: ambox-image-left;}
.ambox-image-right {grid-area: ambox-image-right}