틀:강조 - 편집 역사

Dbstudy: 대문 디자인에 맞춰 틀 디자인 개편 (기존 변수 호환)

2026-11-04T05:08:31Z

대문 디자인에 맞춰 틀 디자인 개편 (기존 변수 호환)

← 이전 판		2026년 11월 4일 (수) 14:08 판
1번째 줄:		1번째 줄:
			<includeonly><div style="border:1px solid #dde4dc;border-radius:8px;overflow:hidden;margin:16px 0;color:#20382e;background:#ffffff;"><div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#eef3eb;border-bottom:1px solid #dde4dc;font-size:14px;font-weight:650;"><span class="material-icons-outlined" style="font-size:18px;line-height:1;vertical-align:-4px;color:#256448;" aria-hidden="true">{{{아이콘\|star}}}</span><span>{{{제목\|제목}}}</span></div>{{#if:{{{내용\|{{{1\|}}}}}}\|<div style="display:flex;gap:8px;align-items:flex-start;padding:12px 16px;font-size:14px;line-height:1.75;"><span class="material-icons-outlined" style="font-size:18px;line-height:1;vertical-align:-4px;color:#8b9c8c;" aria-hidden="true">{{{내용아이콘\|playlist_add_check}}}</span><div style="flex:1;min-width:0;font-weight:500;">{{{내용\|{{{1\|}}}}}}</div></div>}}</div></includeonly><noinclude>
			<div style="font-size:12px;color:#6c7b72;margin:0 0 12px;">대문 디자인 틀: [[틀:개요\|개요]] · [[틀:타이틀\|타이틀]] · [[틀:타이틀 라운드\|타이틀 라운드]] · [[틀:요점\|요점]] · [[틀:결론\|결론]] · [[틀:중요\|중요]] · [[틀:설명\|설명]] · [[틀:핵심\|핵심]] · [[틀:강조\|강조]] · [[틀:서브\|서브]] · [[틀:SQL\|SQL]] · [[틀:관련글\|관련글]] · [[틀:난이도\|난이도]] · [[틀:평점\|평점]] · [[틀:FAQ\|FAQ]] · [[:분류:디자인 틀\|전체 보기]]</div>
			제목 머리줄 + 본문으로 구성된 강조 카드 ([[틀:핵심]]과 같은 형태). 대문 디자인(초록 계열 팔레트)에 맞춰 개편했으며, 기존 변수는 그대로 사용할 수 있습니다.

	~~<div style~~="		== 사용법 ==
	~~background-color: #f0f4f8; /* Very light blue-gray */~~		<pre>
	~~border-left: 5px solid #007bff; /* Primary blue for accent */~~		{{강조\|제목=바인드 변수\|내용=리터럴 대신 바인드 변수를 쓰면 하드 파싱이 줄어듭니다.}}
	~~border-radius: 5px;~~		</pre>
	~~padding: 15px 20px;~~
	~~margin-bottom: 1.0em;~~
	~~font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;~~
	~~line-height: 1.6;~~
	~~color: #333;~~
	~~border-style: solid;~~
	~~background-color:~~ {{~~{배경색~~\|~~#e3e8ec}}};~~
	/*
	~~#f0f4f8~~
	~~10% 진하게: #e3e8ec (RGB: 227, 232, 236)~~
	~~20% 진하게: #d6dfe5 (RGB: 214, 223, 229)~~
	~~30% 진하게: #c9d6de (RGB: 201, 214, 222)~~
	~~40% 진하게: #bccdd7 (RGB: 188, 205, 215)~~
	~~50% 진하게: #afc4d0 (RGB: 175, 196, 208)~~
	~~border-width: 2px 0;~~
	~~background-color: {{{배경색~~\|~~#f0f4f8~~}}};
	~~border-width: {{{선굵기\|3px 0}}};~~
	~~border-color: {{{테두리색\|#de5a5a}}};~~
	~~width: {{{사이즈\|100%}}};~~
	~~border-radius: {{{둥굴기\|4px}}};~~
	~~border-style: {{{스타일\|dashed}}};~~
	clear: both; */

	">		== 변수 ==
	~~<div style~~="		{\| class="wikitable"
	~~font~~-~~size: 1.0em;~~		! 변수 !! 설명 !! 기본값
	color: #0056b3; /* Darker blue for title */		\|-
	~~margin~~-~~bottom: 8px;~~		\| <code>제목</code> \|\| 머리줄 제목 \|\| 제목
	">		\|-
	~~<i class="material~~-~~icons icon-image-preview" style="display: inline-block; transform: translate(-10%, 20%); color: {{{아이콘색색~~\|~~#ffa500}}};"~~>~~ {{{~~아이콘~~\| vpn_key}}}~~</i> ~~{{{제목~~\|~~제목}}}~~		\| <code>내용 / 1</code> \|\| 본문 \|\|
	</~~div~~>		\|-
	~~<div~~		\| <code>아이콘</code> \|\| 머리줄 아이콘 \|\| star
	~~style~~="		\|-
	~~font-size: 0.9em;~~		\| <code>내용아이콘</code> \|\| 본문 아이콘 \|\| playlist_add_check
	">		\|}
	~~<i class~~=~~"material-icons icon-image-preview" style~~=~~"display: inline-block; transform: translate(-10%, 20%); color: {~~{{~~내용 아이콘색색~~\|~~#007bff}}};"> {{{내용아이콘~~\| ~~playlist_add_check}}}</i><b>{{{~~내용\|}}~~}</b></div>~~
	</~~div~~>		== 미리보기 ==
			{{강조\|제목=바인드 변수\|내용=리터럴 대신 바인드 변수를 쓰면 하드 파싱이 줄어듭니다.}}

			[[분류:틀]]
			[[분류:디자인 틀]]
			</noinclude>

2025년 8월 28일 (목) 02:50에 Dbstudy님의 편집

2025-08-28T02:50:09Z

← 이전 판		2025년 8월 28일 (목) 11:50 판
10번째 줄:		10번째 줄:
	color: #333;		color: #333;
	border-style: solid;		border-style: solid;
			background-color: {{{배경색\|#e3e8ec}}};
			/*
			#f0f4f8
			10% 진하게: #e3e8ec (RGB: 227, 232, 236)
			20% 진하게: #d6dfe5 (RGB: 214, 223, 229)
			30% 진하게: #c9d6de (RGB: 201, 214, 222)
			40% 진하게: #bccdd7 (RGB: 188, 205, 215)
			50% 진하게: #afc4d0 (RGB: 175, 196, 208)
	border-width: 2px 0;		border-width: 2px 0;
	background-color: {{{배경색\|#~~f7d4063e~~}}};		background-color: {{{배경색\|#f0f4f8}}};
	border-width: {{{선굵기\|3px 0}}};		border-width: {{{선굵기\|3px 0}}};
	border-color: {{{테두리색\|#de5a5a}}};		border-color: {{{테두리색\|#de5a5a}}};
17번째 줄:		25번째 줄:
	border-radius: {{{둥굴기\|4px}}};		border-radius: {{{둥굴기\|4px}}};
	border-style: {{{스타일\|dashed}}};		border-style: {{{스타일\|dashed}}};
	clear: both;		clear: both; */

	">		">

Dbstudy: 새 문서:
Very light blue-gray: border-left: 5px solid #007bff; Primary blue for accent: border-radius: 5px; padding: 15px 20px; margin-bottom: 1.0em; font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333; border-style: solid; border-width: 2px 0; background-color: {{{배경색|#f7d4063e}}}; border-width: {{{선굵기|3px 0}}}; border-color: {{{테두리...

새 문서

<div style="
background-color: #f0f4f8; /* Very light blue-gray /
border-left: 5px solid #007bff; / Primary blue for accent /
border-radius: 5px;
padding: 15px 20px;
margin-bottom: 1.0em;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
border-style: solid;
border-width: 2px 0;
background-color: {{{배경색|#f7d4063e}}};
border-width: {{{선굵기|3px 0}}};
border-color: {{{테두리색|#de5a5a}}};
width: {{{사이즈|100%}}};
border-radius: {{{둥굴기|4px}}};
border-style: {{{스타일|dashed}}};
clear: both;

">
<div style="
font-size: 1.0em;
color: #0056b3; / Darker blue for title */
margin-bottom: 8px;
">
<i class="material-icons icon-image-preview" style="display: inline-block; transform: translate(-10%, 20%); color: {{{아이콘색색|#ffa500}}};"> {{{아이콘| vpn_key}}}</i> {{{제목|제목}}}
</div>
<div
style="
font-size: 0.9em;
">
<i class="material-icons icon-image-preview" style="display: inline-block; transform: translate(-10%, 20%); color: {{{내용 아이콘색색|#007bff}}};"> {{{내용아이콘| playlist_add_check}}}</i><b>{{{내용|}}}</b></div>
</div>