Dbstudy: 단계 카드 틀 생성

2026-11-04T04:27:44Z

단계 카드 틀 생성

새 문서

<includeonly><div style="display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px;">{{#if:{{{제목1|}}}|<div style="flex:1 1 {{{최소너비|200px}}};border:1px solid #d6e2ee;border-top:4px solid {{#switch:{{{색상1|파랑}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상1|파랑}}}}};border-radius:10px;padding:16px 18px;background:{{#switch:{{{색상1|파랑}}}|파랑=#f8fbfe|초록=#f6fcfa|주황=#fffaf5|보라=#fbf8fd|빨강=#fdf8f7|갈색=#fdf9f5|회색=#f7f9fa|#default=#fafbfc}};"><div style="font-size:12px;color:{{#switch:{{{색상1|파랑}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상1|파랑}}}}};font-weight:700;letter-spacing:1px;">{{{라벨1|STEP 1}}}</div><div style="font-size:16px;font-weight:700;margin:4px 0 6px;color:#0f2b46;">{{{제목1}}}</div>{{#if:{{{설명1|}}}|<div style="font-size:13px;color:#4a5a6a;line-height:1.6;">{{{설명1}}}</div>}}</div>}}{{#if:{{{제목2|}}}|<div style="flex:1 1 {{{최소너비|200px}}};border:1px solid #d6e2ee;border-top:4px solid {{#switch:{{{색상2|초록}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상2|초록}}}}};border-radius:10px;padding:16px 18px;background:{{#switch:{{{색상2|초록}}}|파랑=#f8fbfe|초록=#f6fcfa|주황=#fffaf5|보라=#fbf8fd|빨강=#fdf8f7|갈색=#fdf9f5|회색=#f7f9fa|#default=#fafbfc}};"><div style="font-size:12px;color:{{#switch:{{{색상2|초록}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상2|초록}}}}};font-weight:700;letter-spacing:1px;">{{{라벨2|STEP 2}}}</div><div style="font-size:16px;font-weight:700;margin:4px 0 6px;color:#0f2b46;">{{{제목2}}}</div>{{#if:{{{설명2|}}}|<div style="font-size:13px;color:#4a5a6a;line-height:1.6;">{{{설명2}}}</div>}}</div>}}{{#if:{{{제목3|}}}|<div style="flex:1 1 {{{최소너비|200px}}};border:1px solid #d6e2ee;border-top:4px solid {{#switch:{{{색상3|주황}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상3|주황}}}}};border-radius:10px;padding:16px 18px;background:{{#switch:{{{색상3|주황}}}|파랑=#f8fbfe|초록=#f6fcfa|주황=#fffaf5|보라=#fbf8fd|빨강=#fdf8f7|갈색=#fdf9f5|회색=#f7f9fa|#default=#fafbfc}};"><div style="font-size:12px;color:{{#switch:{{{색상3|주황}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상3|주황}}}}};font-weight:700;letter-spacing:1px;">{{{라벨3|STEP 3}}}</div><div style="font-size:16px;font-weight:700;margin:4px 0 6px;color:#0f2b46;">{{{제목3}}}</div>{{#if:{{{설명3|}}}|<div style="font-size:13px;color:#4a5a6a;line-height:1.6;">{{{설명3}}}</div>}}</div>}}{{#if:{{{제목4|}}}|<div style="flex:1 1 {{{최소너비|200px}}};border:1px solid #d6e2ee;border-top:4px solid {{#switch:{{{색상4|보라}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상4|보라}}}}};border-radius:10px;padding:16px 18px;background:{{#switch:{{{색상4|보라}}}|파랑=#f8fbfe|초록=#f6fcfa|주황=#fffaf5|보라=#fbf8fd|빨강=#fdf8f7|갈색=#fdf9f5|회색=#f7f9fa|#default=#fafbfc}};"><div style="font-size:12px;color:{{#switch:{{{색상4|보라}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상4|보라}}}}};font-weight:700;letter-spacing:1px;">{{{라벨4|STEP 4}}}</div><div style="font-size:16px;font-weight:700;margin:4px 0 6px;color:#0f2b46;">{{{제목4}}}</div>{{#if:{{{설명4|}}}|<div style="font-size:13px;color:#4a5a6a;line-height:1.6;">{{{설명4}}}</div>}}</div>}}{{#if:{{{제목5|}}}|<div style="flex:1 1 {{{최소너비|200px}}};border:1px solid #d6e2ee;border-top:4px solid {{#switch:{{{색상5|빨강}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상5|빨강}}}}};border-radius:10px;padding:16px 18px;background:{{#switch:{{{색상5|빨강}}}|파랑=#f8fbfe|초록=#f6fcfa|주황=#fffaf5|보라=#fbf8fd|빨강=#fdf8f7|갈색=#fdf9f5|회색=#f7f9fa|#default=#fafbfc}};"><div style="font-size:12px;color:{{#switch:{{{색상5|빨강}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상5|빨강}}}}};font-weight:700;letter-spacing:1px;">{{{라벨5|STEP 5}}}</div><div style="font-size:16px;font-weight:700;margin:4px 0 6px;color:#0f2b46;">{{{제목5}}}</div>{{#if:{{{설명5|}}}|<div style="font-size:13px;color:#4a5a6a;line-height:1.6;">{{{설명5}}}</div>}}</div>}}{{#if:{{{제목6|}}}|<div style="flex:1 1 {{{최소너비|200px}}};border:1px solid #d6e2ee;border-top:4px solid {{#switch:{{{색상6|회색}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상6|회색}}}}};border-radius:10px;padding:16px 18px;background:{{#switch:{{{색상6|회색}}}|파랑=#f8fbfe|초록=#f6fcfa|주황=#fffaf5|보라=#fbf8fd|빨강=#fdf8f7|갈색=#fdf9f5|회색=#f7f9fa|#default=#fafbfc}};"><div style="font-size:12px;color:{{#switch:{{{색상6|회색}}}|파랑=#2b7bb9|초록=#16a085|주황=#e67e22|보라=#8e44ad|빨강=#c0392b|갈색=#d35400|회색=#5d6d7e|#default={{{색상6|회색}}}}};font-weight:700;letter-spacing:1px;">{{{라벨6|STEP 6}}}</div><div style="font-size:16px;font-weight:700;margin:4px 0 6px;color:#0f2b46;">{{{제목6}}}</div>{{#if:{{{설명6|}}}|<div style="font-size:13px;color:#4a5a6a;line-height:1.6;">{{{설명6}}}</div>}}</div>}}</div></includeonly><noinclude>
학습 단계·절차를 '''가로 카드'''로 보여주는 틀입니다. 최대 6단계까지 표시하며, 화면이 좁으면 자동으로 줄바꿈됩니다. [[틀:타이틀 주제]] 바로 아래에 두면 잘 어울립니다.

== 사용법 ==
<pre>
{{단계양식
|제목1 = 개념 이해
|설명1 = 모델링이 무엇이고 왜 필요한지, 3단계 모델의 차이
|제목2 = 구성 요소
|설명2 = 엔터티 · 속성 · 관계 · 식별자, ERD 읽고 그리기
|제목3 = 정규화 · 반정규화
|설명3 = 이상현상 제거, 성능을 위한 의도적 중복
|제목4 = 물리 설계 · 실습
|설명4 = Oracle DDL, 인덱스·파티션, 실전 프로젝트
}}
</pre>

== 변수 ==
{| class="wikitable"
! 변수 !! 필수 !! 설명 !! 기본값
|-
| <code>제목1</code>~<code>제목6</code> || 제목1 필수 || 카드 제목. 입력한 단계만 표시. 링크 가능 (예: <code><nowiki>[[정규화 심화|정규화]]</nowiki></code>) || 없음
|-
| <code>설명1</code>~<code>설명6</code> || 선택 || 카드 설명 || 없음
|-
| <code>라벨1</code>~<code>라벨6</code> || 선택 || 카드 상단 라벨 || STEP 1 ~ STEP 6
|-
| <code>색상1</code>~<code>색상6</code> || 선택 || 파랑 · 초록 · 주황 · 보라 · 빨강 · 갈색 · 회색, 또는 #hex 직접 지정 || 파랑 → 초록 → 주황 → 보라 → 빨강 → 회색 순
|-
| <code>최소너비</code> || 선택 || 카드 최소 너비. 이보다 좁아지면 다음 줄로 넘어감 || 200px
|}

== 예시 ==
=== 기본 (4단계) ===
{{단계양식
|제목1 = 개념 이해
|설명1 = 모델링이 무엇이고 왜 필요한지, 3단계 모델의 차이
|제목2 = 구성 요소
|설명2 = 엔터티 · 속성 · 관계 · 식별자, ERD 읽고 그리기
|제목3 = 정규화 · 반정규화
|설명3 = 이상현상 제거, 성능을 위한 의도적 중복
|제목4 = 물리 설계 · 실습
|설명4 = Oracle DDL, 인덱스·파티션, 실전 프로젝트
}}

=== 라벨·색상 지정 (3단계) ===
<pre>
{{단계양식
|라벨1 = WEEK 1~3 |제목1 = 기초 |설명1 = 처리 원리 |색상1 = 빨강
|라벨2 = WEEK 4~5 |제목2 = 분석 |설명2 = 옵티마이저와 실행계획 |색상2 = 갈색
|라벨3 = WEEK 6~8 |제목3 = [[인덱스 튜닝 심화|핵심]] |설명3 = 인덱스 · 조인 |색상3 = #2b7bb9
}}
</pre>
{{단계양식
|라벨1 = WEEK 1~3 |제목1 = 기초 |설명1 = 처리 원리 |색상1 = 빨강
|라벨2 = WEEK 4~5 |제목2 = 분석 |설명2 = 옵티마이저와 실행계획 |색상2 = 갈색
|라벨3 = WEEK 6~8 |제목3 = [[인덱스 튜닝 심화|핵심]] |설명3 = 인덱스 · 조인 |색상3 = #2b7bb9
}}

<templatedata>
{
"description": "학습 단계·절차를 가로 카드로 표시 (최대 6단계)",
"format": "block",
"params": {
"제목1": { "label": "1단계 제목", "type": "content", "required": true },
"설명1": { "label": "1단계 설명", "type": "content", "suggested": true },
"라벨1": { "label": "1단계 라벨", "type": "string", "default": "STEP 1" },
"색상1": { "label": "1단계 색상", "description": "파랑, 초록, 주황, 보라, 빨강, 갈색, 회색 또는 #hex", "type": "string", "default": "파랑" },
"제목2": { "label": "2단계 제목", "type": "content", "suggested": true },
"설명2": { "label": "2단계 설명", "type": "content", "suggested": true },
"라벨2": { "label": "2단계 라벨", "type": "string", "default": "STEP 2" },
"색상2": { "label": "2단계 색상", "description": "파랑, 초록, 주황, 보라, 빨강, 갈색, 회색 또는 #hex", "type": "string", "default": "초록" },
"제목3": { "label": "3단계 제목", "type": "content", "suggested": true },
"설명3": { "label": "3단계 설명", "type": "content", "suggested": true },
"라벨3": { "label": "3단계 라벨", "type": "string", "default": "STEP 3" },
"색상3": { "label": "3단계 색상", "description": "파랑, 초록, 주황, 보라, 빨강, 갈색, 회색 또는 #hex", "type": "string", "default": "주황" },
"제목4": { "label": "4단계 제목", "type": "content", "suggested": true },
"설명4": { "label": "4단계 설명", "type": "content", "suggested": true },
"라벨4": { "label": "4단계 라벨", "type": "string", "default": "STEP 4" },
"색상4": { "label": "4단계 색상", "description": "파랑, 초록, 주황, 보라, 빨강, 갈색, 회색 또는 #hex", "type": "string", "default": "보라" },
"제목5": { "label": "5단계 제목", "type": "content", "suggested": true },
"설명5": { "label": "5단계 설명", "type": "content", "suggested": true },
"라벨5": { "label": "5단계 라벨", "type": "string", "default": "STEP 5" },
"색상5": { "label": "5단계 색상", "description": "파랑, 초록, 주황, 보라, 빨강, 갈색, 회색 또는 #hex", "type": "string", "default": "빨강" },
"제목6": { "label": "6단계 제목", "type": "content", "suggested": true },
"설명6": { "label": "6단계 설명", "type": "content", "suggested": true },
"라벨6": { "label": "6단계 라벨", "type": "string", "default": "STEP 6" },
"색상6": { "label": "6단계 색상", "description": "파랑, 초록, 주황, 보라, 빨강, 갈색, 회색 또는 #hex", "type": "string", "default": "회색" },
"최소너비": { "label": "카드 최소 너비", "type": "string", "default": "200px" }
}
}
</templatedata>

[[분류:틀]]
</noinclude>

틀:단계양식 - 편집 역사

Dbstudy: 단계 카드 틀 생성