틀:알림 상자: 두 판 사이의 차이

2024년 9월 26일 (목) 00:45 판

게임 내 알림 사항을 표시하는 틀입니다.

{{알림 상자
|색 = 
|폭 = 
|경계선 = 
|왼쪽 그림 =
|왼쪽 그림 크기 =
|오른쪽 그림 = 
|오른쪽 그림 크기 =
|제목 = 
|본문 = 
}}

파라미터 구현 목록

왼쪽 그림 = 제목 왼편 그림, 비우면 안 뜸. (그림 파일을 띄울 수도 있습니다.)
- 왼쪽 그림 예외 = 왼쪽 그림 자리에 대신 띄울 내용
오른쪽 그림 = 제목 오른편 그림, 없어도 됨
- 오른쪽 그림 예외 = 오른쪽 그림 자리에 대신 띄울 내용
경계선 : 기본은 1px solid #aafaaa입니다.
제목: 제목을 적으면 됩니다.
본문: 상세 내용을 적으면 됩니다. 그림 아래에 표시됩니다.
왼쪽 그림 크기 및 오른쪽 그림 크기: 기본값은 45px입니다.
폭: 기본 80%입니다.

이전 알림 상자와의 파라미터 차이

추후 차이점을 줄이기 위해 업데이트 예정입니다. 'X'는 아직 미구현 상태라는 뜻입니다.

'폭' 파라미터 관련
- 데스크톱, 모바일 공용으로 적용됨
오른쪽색 : X
왼쪽 그림 설명 : X
오른쪽 그림 설명 : X
왼쪽/오른쪽 그림 예외 : 왼쪽/오른쪽 그림을 별도로 지정하지 않아도 표시됨
제목이 내용 및 그림 '위'에 표시됨(레거시 버전은 그림들 '사이'에 제목이 내용과 같이 표시됨)
간격: X

@@ 1번째 줄: / 1번째 줄: @@
-<onlyinclude><div class="template-ambox {{#if:{{{폭|}}}||ambox-hybrid}}" style="clear:both;display:flex;justify-content:center;">
+<onlyinclude>{{#css:
-<div style="display:table;width:{{{폭|80%}}};border:{{{경계선|1px solid #aafaaa}}};text-align:center;">
+.ambox {
-<div style="display:table-row;vertical-align:center;">
+    width: clamp(80%, 40em, calc(100% - 10px));
-{{#if: {{{왼쪽 그림|}}}{{{왼쪽 그림 예외|}}}|<span style="display: table-cell;width:{{{왼쪽 그림 크기|45px}}};">{{{왼쪽 그림 예외|[[파일:{{{왼쪽 그림}}}|{{{왼쪽 그림 크기|45px}}}]]}}}</span>|}}<span style="display: table-cell;">'''{{{제목| }}}'''</span>{{#if: {{{오른쪽 그림|}}}{{{오른쪽 그림 예외|}}}|<span style="display: table-cell;width:{{{오른쪽 그림 크기|45px}}};">{{{오른쪽 그림 예외|[[파일:{{{오른쪽 그림}}}|{{{오른쪽 그림 크기|45px}}}]]}}}</span>|}}</div>
-<div style="display:table-row;">{{#if: {{{왼쪽 그림|}}}{{{왼쪽 그림 예외|}}}|<span style="display: table-cell;width:{{{왼쪽 그림 크기|45px}}};"><!-- 공백 --></span>|}}<span style="display: table-cell;">{{{본문| }}}</span>{{#if: {{{오른쪽 그림|}}}{{{오른쪽 그림 예외|}}}|<span style="display: table-cell;width:{{{오른쪽 그림 크기|45px}}};"><!-- 공백 --></span>|}}</div>
+    margin: 3px auto;
-</div>
+    padding: 5px;
-</div></onlyinclude>
+    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}
+}}<div class="ambox" style="background: {{{배경색|#ededed}}};{{#if:{{{본문색|}}}|color:{{{본문색}}};}}">{{#if:{{{왼쪽 그림|}}}{{{왼쪽 그림 예외|}}}|<div class="ambox-image ambox-image-left">{{{왼쪽 그림 예외|[[파일:{{{왼쪽 그림}}}|{{{왼쪽 그림 크기|45px}}}]]}}}</div>}}<div class="ambox-title" style="{{#if:{{{색|}}}|background: {{{색}}};}}{{#if:{{{제목색|}}}|color:{{{제목색}}};}}">{{{제목|}}}</div><div class="ambox-detail">{{{본문|}}}</div>{{#if:{{{오른쪽 그림|}}}{{{오른쪽 그림 예외|}}}|<div class="ambox-image ambox-image-right">{{{오른쪽 그림 예외|[[파일:{{{오른쪽 그림}}}|{{{오른쪽 그림 크기|45px}}}]]}}}</div>}}</div></onlyinclude>
 게임 내 알림 사항을 표시하는 틀입니다.
 <pre>{{알림 상자
+|색 =
 |폭 =
 |경계선 =
@@ 32번째 줄: / 67번째 줄: @@
 === [[보존:알림 상자/레거시|이전 알림 상자]]와의 파라미터 차이 ===
 추후 차이점을 줄이기 위해 업데이트 예정입니다. 'X'는 아직 미구현 상태라는 뜻입니다.
-* 색 : X
 * '폭' 파라미터 관련
 ** 데스크톱, 모바일 공용으로 적용됨
-* 배경색 : X
 * 오른쪽색 : X
 * 왼쪽 그림 설명 : X
 * 오른쪽 그림 설명 : X
 * 왼쪽/오른쪽 그림 예외 : 왼쪽/오른쪽 그림을 별도로 지정하지 않아도 표시됨
-* 본문색 : X
+* '''제목'''이 내용 및 그림 '위'에 표시됨(레거시 버전은 그림들 '사이'에 제목이 내용과 같이 표시됨)
-* 제목색 : X
-* '''내용'''이 그림 및 제목 '아래'에 표시됨(레거시 버전은 그림들 '사이'에 내용이 제목과 같이 표시됨)
 * 간격: X
 [[분류:머릿글 틀]]

틀:알림 상자: 두 판 사이의 차이

2024년 9월 26일 (목) 00:45 판

파라미터 구현 목록

이전 알림 상자와의 파라미터 차이

둘러보기 메뉴

검색