틀:중요: 두 판 사이의 차이

2026년 11월 4일 (수) 14:08 기준 최신판

대문 디자인 틀: 개요 · 타이틀 · 타이틀 라운드 · 요점 · 결론 · 중요 · 설명 · 핵심 · 강조 · 서브 · SQL · 관련글 · 난이도 · 평점 · FAQ · 전체 보기

주의·중요 사항 박스 (주황 강조). 대문 디자인(초록 계열 팔레트)에 맞춰 개편했으며, 기존 변수는 그대로 사용할 수 있습니다.

사용법

{{중요|내용=운영 DB에서는 실습하지 마세요.}}

변수

변수	설명	기본값
`내용 / 1 / 제목`	본문	필수
`라벨`	상단 라벨	중요
`배경색`	배경	#fdf6ec
`테두리색`	테두리 색	#c0620f
`선굵기`	테두리 두께 (CSS border-width)	0 0 0 4px
`스타일`	테두리 스타일 (solid, dashed …)	solid
`둥굴기`	모서리 둥글기	7px
`사이즈`	글자 크기	100%
`아이콘이름`	Material 아이콘 이름	priority_high
`아이콘색`	아이콘 색
`아이콘클래스`	아이콘 글꼴 클래스	material-icons-outlined
`속성 / id`	CSS class / id

미리보기

중요

운영 DB에서는 실습하지 마세요.

@@ 1번째 줄: / 1번째 줄: @@
-<div style="position: inherit;
+<includeonly><div class="{{{속성|}}}" {{#if:{{{id|}}}|id="{{{id}}}"}} style="display:flex;gap:12px;align-items:flex-start;padding:14px 18px;margin:16px 0;color:#20382e;border-width:{{{선굵기|0 0 0 4px}}};border-style:{{{스타일|solid}}};border-color:{{{테두리색|#c0620f}}};border-radius:{{{둥굴기|7px}}};background:{{{배경색|#fdf6ec}}};font-size:{{{사이즈|100%}}};"><span style="flex:0 0 auto;padding-top:2px;"><span class="{{{아이콘클래스|material-icons-outlined}}}" style="font-size:20px;line-height:1;vertical-align:-4px;color:{{{아이콘색|#c0620f}}};" aria-hidden="true">{{{아이콘이름|priority_high}}}</span></span><div style="flex:1;min-width:0;line-height:1.75;"><div style="margin-bottom:4px;"><span style="font-size:11px;font-weight:600;line-height:18px;letter-spacing:0.99px;color:#c0620f;">{{{라벨|중요}}}</span></div><div style="font-size:14px;">{{{내용|{{{1|{{{제목|}}}}}}}}}</div></div></div></includeonly><noinclude>
-        top: 100px;
+<div style="font-size:12px;color:#6c7b72;margin:0 0 12px;">대문 디자인 틀: [[틀:개요|개요]] · [[틀:타이틀|타이틀]] · [[틀:타이틀 라운드|타이틀 라운드]] · [[틀:요점|요점]] · [[틀:결론|결론]] · [[틀:중요|중요]] · [[틀:설명|설명]] · [[틀:핵심|핵심]] · [[틀:강조|강조]] · [[틀:서브|서브]] · [[틀:SQL|SQL]] · [[틀:관련글|관련글]] · [[틀:난이도|난이도]] · [[틀:평점|평점]] · [[틀:FAQ|FAQ]] · [[:분류:디자인 틀|전체 보기]]</div>
-        left: 100px;
+주의·중요 사항 박스 (주황 강조). 대문 디자인(초록 계열 팔레트)에 맞춰 개편했으며, 기존 변수는 그대로 사용할 수 있습니다.
-        width: 100%;
-        border: 1px solid {{{보더색|#222428}}}; /* 어두운 테두리 */
+== 사용법 ==
-        background-color: {{{배경색|#23272f}}}; /* 어두운 배경 */
+<pre>
-        margin: 1.0em 0 0.7em;
+{{중요|내용=운영 DB에서는 실습하지 마세요.}}
-        padding: 0.2em 0.2em;
+</pre>
-        font-size: 1.0em;
-        line-height: 2.1em;
+== 변수 ==
-        overflow: visible;
+{| class="wikitable"
-        -moz-border-radius: 0.5em;
+! 변수 !! 설명 !! 기본값
-        -webkit-border-radius: 0.5em;
+|-
-        border-radius: 0.5em;">
+| <code>내용 / 1 / 제목</code> || 본문 || 필수
-    <i class="material-icons icon-image-preview"
+|-
-       style="display: inline-block;
+| <code>라벨</code> || 상단 라벨 || 중요
-              transform: translate(-10%, 20%);
+|-
-              color: {{{아이콘색|#ffd700}}}; /* 밝은 골드 계열 아이콘 */
+| <code>배경색</code> || 배경 || #fdf6ec
-              ">&nbsp;{{{아이콘|attach_file}}}</i><font style="color: {{{폰트색|#f5f5f5}}};">{{{제목|제목을넣으세요}}}</font> <!-- 밝은 글자색 -->
+|-
-</div>
+| <code>테두리색</code> || 테두리 색 || #c0620f
+|-
+| <code>선굵기</code> || 테두리 두께 (CSS border-width) || 0 0 0 4px
+|-
+| <code>스타일</code> || 테두리 스타일 (solid, dashed …) || solid
+|-
+| <code>둥굴기</code> || 모서리 둥글기 || 7px
+|-
+| <code>사이즈</code> || 글자 크기 || 100%
+|-
+| <code>아이콘이름</code> || Material 아이콘 이름 || priority_high
+|-
+| <code>아이콘색</code> || 아이콘 색 ||
+|-
+| <code>아이콘클래스</code> || 아이콘 글꼴 클래스 || material-icons-outlined
+|-
+| <code>속성 / id</code> || CSS class / id ||
+|}
+== 미리보기 ==
+{{중요|내용=운영 DB에서는 실습하지 마세요.}}
+[[분류:틀]]
+[[분류:디자인 틀]]
+</noinclude>