Form:개발노트: 두 판 사이의 차이

시각위키텍스트

2026년 11월 12일 (목) 12:28 기준 최신판

배우고, 기록하고, 함께 나누는 개발 노트

오늘 배운 것을
노트로 남겨볼까요?

문서 제목을 입력하고 새 글 만들기를 누르세요. 정보 상자와 분류가 자동으로 붙고, 본문에는 기본 뼈대가 미리 들어갑니다.

01제목 입력검색하기 쉬운 짧은 제목으로

02정보 채우기요약 · 핵심 정리 · 분야 · 난이도

03본문 작성뼈대를 따라 채우고 저장

정보 상자 틀 · 본문 기본 뼈대 · 개발노트 모아보기 · 위키 문법 가이드

@@ 1번째 줄: / 1번째 줄: @@
 <noinclude>
-<div style="padding:20px 24px;margin:0 0 20px;border-radius:14px;border:1px solid rgba(99,102,241,.35);background:linear-gradient(135deg,rgba(99,102,241,.13),rgba(16,185,129,.08));">
+<div class="dc-home dc-form dc-form-start">
-<div style="font-size:.78em;font-weight:700;letter-spacing:.14em;color:#6366f1;">DEVCAFE NEW NOTE</div>
+<div class="dc-eyebrow">배우고, 기록하고, 함께 나누는 개발 노트</div>
-<div style="font-size:1.3em;font-weight:800;margin:6px 0 8px;">개발노트 새 글 쓰기</div>
+<div class="dc-form-title">오늘 배운 것을<br /><span class="dc-accent">노트로 남겨볼까요?</span></div>
-<div style="opacity:.88;line-height:1.7;margin-bottom:10px;">만들 문서 제목을 입력하고 '''새 글 만들기'''를 누르세요. 요약·분야·난이도를 채우면 정보 상자와 분류가 자동으로 붙고, 본문에는 기본 뼈대가 미리 들어갑니다.</div>
+<div class="dc-form-desc">문서 제목을 입력하고 '''새 글 만들기'''를 누르세요. 정보 상자와 분류가 자동으로 붙고, 본문에는 기본 뼈대가 미리 들어갑니다.</div>
 {{#forminput:form=개발노트|size=40|placeholder=예: 파이썬 엑셀 자동화|button text=새 글 만들기}}
+<div class="dc-form-flow">
+<div><span class="dc-form-num">01</span><b>제목 입력</b><span>검색하기 쉬운 짧은 제목으로</span></div>
+<div><span class="dc-form-num">02</span><b>정보 채우기</b><span>요약 · 핵심 정리 · 분야 · 난이도</span></div>
+<div><span class="dc-form-num">03</span><b>본문 작성</b><span>뼈대를 따라 채우고 저장</span></div>
 </div>
-* 정보 상자 모양: [[틀:개발노트]]
+<div class="dc-form-links">[[틀:개발노트|정보 상자 틀]] · [[틀:개발노트/본문|본문 기본 뼈대]] · [[:분류:개발노트|개발노트 모아보기]] · [[미디어위키 기본 사용법|위키 문법 가이드]]</div>
-* 본문 기본 뼈대: [[틀:개발노트/본문]]
-* 이 양식으로 만든 글 모음: [[:분류:개발노트]]
-</noinclude><includeonly>
-<div style="margin:0 0 16px;padding:12px 16px;border-left:4px solid #10b981;border-radius:8px;background:rgba(16,185,129,.08);">
-'''작성 안내''' — 별표(*) 항목은 필수입니다. 본문의 안내 문구를 지우고 내용을 채워 주세요. 필요 없는 문단은 삭제해도 됩니다.
 </div>
-{{{for template|개발노트|label=문서 정보}}}
+</noinclude><includeonly><div class="dc-home dc-form">
+<div class="dc-form-head">
+<div class="dc-eyebrow">DEVCAFE NOTE · 개발노트 작성</div>
+<div class="dc-form-title">배운 것을 <span class="dc-accent">기록하는 시간.</span></div>
+<div class="dc-form-desc"><span class="dc-req">*</span> 표시는 필수 항목입니다. 본문의 안내 문구를 지우고 내용을 채워 주세요. 필요 없는 문단은 삭제해도 됩니다.</div>
+</div>
+<div class="dc-form-step"><span class="dc-form-num">01</span><span class="dc-form-step-title">문서 정보</span><span class="dc-form-step-desc">문서 맨 위 정보 상자와 분류에 자동으로 쓰입니다</span></div>
+<div class="dc-form-card">
+{{{for template|개발노트}}}
 {| class="formtable"
-! 한 줄 요약
+! 한 줄 요약<span class="dc-req">*</span>
 | {{{field|요약|input type=text|size=80|mandatory|placeholder=이 글을 한 문장으로 소개해 주세요}}}
 |-
-! 분야
+! 핵심 정리
+| {{{field|핵심|input type=textarea|rows=4|placeholder=이 글에서 꼭 기억할 내용을 한 줄에 하나씩 적어 주세요 (3~5개 권장)}}}
+|-
+! 분야<span class="dc-req">*</span>
 | {{{field|분야|input type=dropdown|values=Python,Autoit,AI,Linux,Oracle,Javascript,미디어위키,3D프린터,키보드,기타|mandatory}}}
 |-
-! 난이도
+! 난이도<span class="dc-req">*</span>
-| {{{field|난이도|input type=radiobutton|values=입문,초급,중급,고급|default=입문}}}
+| {{{field|난이도|input type=radiobutton|values=입문,초급,중급,고급|default=입문|mandatory}}}
 |-
 ! 실행 환경
@@ 31번째 줄: / 41번째 줄: @@
 |-
 ! 작성일
-| {{{field|작성일|input type=date|default=now}}}
+| {{{field|작성일|input type=datepicker|default=now}}}
 |}
 {{{end template}}}
+</div>
-'''본문'''
+<div class="dc-form-step"><span class="dc-form-num">02</span><span class="dc-form-step-title">본문 작성</span><span class="dc-form-step-desc">위키 문법으로 자유롭게 작성 · [[미디어위키 기본 사용법|문법 가이드]]</span></div>
 {{{standard input|free text|rows=28|preload=틀:개발노트/본문}}}
+<div class="dc-form-step"><span class="dc-form-num">03</span><span class="dc-form-step-title">저장하기</span><span class="dc-form-step-desc">미리 보기로 확인한 뒤 저장하세요</span></div>
+<div class="dc-form-card dc-pad">
 {{{standard input|summary}}}
@@ 43번째 줄: / 54번째 줄: @@
 {{{standard input|save}}} {{{standard input|preview}}} {{{standard input|changes}}} {{{standard input|cancel}}}
-</includeonly>
+</div>
+</div></includeonly>