Form:학습노트: 두 판 사이의 차이

2026년 11월 13일 (금) 14:33 기준 최신판

이해하고, 확인하고, 함께 쌓는 학습 노트

오늘 정리한 개념을
노트로 남겨볼까요?

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

01

제목 입력

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

02

정보 채우기

요약 · 핵심 정리 · 분야 · 난이도

03

본문 작성

뼈대를 따라 채우고 저장

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

@@ 1번째 줄: / 1번째 줄: @@
 <noinclude>
-<div class="dsn dsn-form dsn-start">
+<div style="background:#fafbf8;border:1px solid #e6eae3;border-radius:22px;padding:40px 38px;margin:0 0 16px;color:#20382e">
-<div class="dsn-eyebrow">이해하고, 확인하고, 함께 쌓는 학습 노트</div>
+<div style="font-size:13px;color:#6c7b72;letter-spacing:.02em"><span style="display:inline-block;width:24px;border-top:1px solid #9aa79f;vertical-align:middle;margin-right:10px"></span>이해하고, 확인하고, 함께 쌓는 학습 노트</div>
-<div class="dsn-title">오늘 정리한 개념을<br /><em>노트로 남겨볼까요?</em></div>
+<div style="font-size:38px;font-weight:800;line-height:1.28;letter-spacing:-1.5px;color:#20382e;margin:18px 0 14px">오늘 정리한 개념을<br /><span style="color:#7a9a83">노트로 남겨볼까요?</span></div>
-<div class="dsn-desc">문서 제목을 입력하고 '''새 글 만들기'''를 누르세요. 정보 상자와 분류가 자동으로 붙고, 본문에는 기본 뼈대가 미리 들어갑니다.</div>
+<div style="font-size:15px;line-height:1.7;color:#55635b;max-width:680px">문서 제목을 입력하고 '''새 글 만들기'''를 누르세요. 정보 상자와 분류가 자동으로 붙고, 본문에는 기본 뼈대가 미리 들어갑니다.</div>
+<div style="margin:26px 0 0">
 {{#forminput:form=학습노트|size=40|placeholder=예: 인덱스가 있어도 Full Table Scan을 하는 이유|button text=새 글 만들기}}
-<div class="dsn-flow">
-<div><span class="dsn-num">01</span><b>제목 입력</b><span>검색하기 쉬운 짧은 제목으로</span></div>
-<div><span class="dsn-num">02</span><b>정보 채우기</b><span>요약 · 핵심 정리 · 분야 · 난이도</span></div>
-<div><span class="dsn-num">03</span><b>본문 작성</b><span>뼈대를 따라 채우고 저장</span></div>
 </div>
-<div class="dsn-links">[[틀:학습노트|정보 상자 틀]] · [[틀:학습노트/본문|본문 기본 뼈대]] · [[:분류:학습노트|학습노트 모아보기]] · [[mw:Help:Formatting/ko|위키 문법 도움말]]</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:36px 0 22px">
+<div style="background:#fff;border:1px solid #e3e7e0;border-radius:14px;padding:22px 20px"><div style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#779171">01</div><div style="font-size:16px;font-weight:700;color:#20382e;margin:10px 0 4px">제목 입력</div><div style="font-size:13.5px;color:#6c7b72">검색하기 쉬운 짧은 제목으로</div></div>
+<div style="background:#fff;border:1px solid #e3e7e0;border-radius:14px;padding:22px 20px"><div style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#779171">02</div><div style="font-size:16px;font-weight:700;color:#20382e;margin:10px 0 4px">정보 채우기</div><div style="font-size:13.5px;color:#6c7b72">요약 · 핵심 정리 · 분야 · 난이도</div></div>
+<div style="background:#fff;border:1px solid #e3e7e0;border-radius:14px;padding:22px 20px"><div style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#779171">03</div><div style="font-size:16px;font-weight:700;color:#20382e;margin:10px 0 4px">본문 작성</div><div style="font-size:13.5px;color:#6c7b72">뼈대를 따라 채우고 저장</div></div>
 </div>
-</noinclude><includeonly><div class="dsn dsn-form">
+<div style="border-top:1px solid #e3e7e0;padding-top:18px;font-size:14px">[[틀:학습노트|<span style="color:#20382e;font-weight:600">정보 상자 틀</span>]]<span style="margin:0 12px;color:#b3bcb5">·</span>[[틀:학습노트/본문|<span style="color:#20382e;font-weight:600">본문 기본 뼈대</span>]]<span style="margin:0 12px;color:#b3bcb5">·</span>[[:분류:학습노트|<span style="color:#20382e;font-weight:600">학습노트 모아보기</span>]]<span style="margin:0 12px;color:#b3bcb5">·</span>[[mw:Help:Formatting/ko|<span style="color:#20382e;font-weight:600">위키 문법 가이드</span>]]</div>
-<div class="dsn-head">
-<div class="dsn-eyebrow">DBSTUDY NOTE · 학습노트 작성</div>
-<div class="dsn-title">이해한 것을 <em>기록하는 시간.</em></div>
-<div class="dsn-desc"><span class="dsn-req">*</span> 표시는 필수 항목입니다. 본문의 안내 문구를 지우고 내용을 채워 주세요. 필요 없는 문단은 삭제해도 됩니다.</div>
 </div>
-<div class="dsn-step"><span class="dsn-num">01</span><span class="dsn-step-title">문서 정보</span><span class="dsn-step-desc">문서 맨 위 정보 상자와 분류에 자동으로 쓰입니다</span></div>
+</noinclude><includeonly><div style="background:#fafbf8;border:1px solid #e6eae3;border-radius:22px;padding:40px 38px;margin:0 0 16px;color:#20382e">
-<div class="dsn-card">
+<div style="padding-bottom:24px;border-bottom:1px solid #e3e7e0">
+<div style="font-size:13px;color:#6c7b72;letter-spacing:.02em"><span style="display:inline-block;width:24px;border-top:1px solid #9aa79f;vertical-align:middle;margin-right:10px"></span>DBSTUDY NOTE · 학습노트 작성</div>
+<div style="font-size:38px;font-weight:800;line-height:1.28;letter-spacing:-1.5px;color:#20382e;margin:18px 0 14px">이해한 것을 <span style="color:#7a9a83">기록하는 시간.</span></div>
+<div style="font-size:15px;line-height:1.7;color:#55635b;max-width:680px"><span style="color:#c2410c;margin-left:2px">*</span> 표시는 필수 항목입니다. 본문의 안내 문구를 지우고 내용을 채워 주세요. 필요 없는 문단은 삭제해도 됩니다.</div>
+</div>
+<div style="display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:30px 0 12px"><span style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#779171">01</span><span style="font-size:17px;font-weight:700;color:#20382e">문서 정보</span><span style="font-size:13px;color:#6c7b72">문서 맨 위 정보 상자와 분류에 자동으로 쓰입니다</span></div>
+<div style="background:#fff;border:1px solid #e3e7e0;border-radius:14px;padding:8px 24px">
 {{{for template|학습노트}}}
-{| class="formtable"
+{| class="formtable" style="width:100%;border-collapse:collapse;border:0;margin:0;background:none"
-! 한 줄 요약<span class="dsn-req">*</span>
+! style="width:130px;text-align:left;vertical-align:top;padding:22px 16px 14px 0;border-bottom:1px solid #e3e7e0;font-size:14px;font-weight:700;color:#20382e;background:none" | 한 줄 요약<span style="color:#c2410c;margin-left:2px">*</span>
-| {{{field|요약|input type=text|size=80|mandatory|placeholder=이 글을 한 문장으로 소개해 주세요}}}
+| style="padding:14px 0;border-bottom:1px solid #e3e7e0;vertical-align:top;background:none" | {{{field|요약|input type=text|size=80|mandatory|placeholder=이 글을 한 문장으로 소개해 주세요}}}
 |-
-! 핵심 정리
+! style="width:130px;text-align:left;vertical-align:top;padding:22px 16px 14px 0;border-bottom:1px solid #e3e7e0;font-size:14px;font-weight:700;color:#20382e;background:none" | 핵심 정리
-| {{{field|핵심|input type=textarea|rows=4|placeholder=이 글에서 꼭 기억할 내용을 한 줄에 하나씩 적어 주세요 (3~5개 권장)}}}
+| style="padding:14px 0;border-bottom:1px solid #e3e7e0;vertical-align:top;background:none" | {{{field|핵심|input type=textarea|rows=4|placeholder=이 글에서 꼭 기억할 내용을 한 줄에 하나씩 적어 주세요 (3~5개 권장)}}}
 |-
-! 분야<span class="dsn-req">*</span>
+! style="width:130px;text-align:left;vertical-align:top;padding:22px 16px 14px 0;border-bottom:1px solid #e3e7e0;font-size:14px;font-weight:700;color:#20382e;background:none" | 분야<span style="color:#c2410c;margin-left:2px">*</span>
-| {{{field|분야|input type=dropdown|values=Oracle,MySQL,MariaDB,PostgreSQL,SQL Server,SQL,데이터모델링,성능튜닝,백업·복구,기타|mandatory}}}
+| style="padding:14px 0;border-bottom:1px solid #e3e7e0;vertical-align:top;background:none" | {{{field|분야|input type=dropdown|values=Oracle,MySQL,MariaDB,PostgreSQL,SQL Server,SQL,데이터모델링,성능튜닝,백업·복구,기타|mandatory}}}
 |-
-! 난이도<span class="dsn-req">*</span>
+! style="width:130px;text-align:left;vertical-align:top;padding:22px 16px 14px 0;border-bottom:1px solid #e3e7e0;font-size:14px;font-weight:700;color:#20382e;background:none" | 난이도<span style="color:#c2410c;margin-left:2px">*</span>
-| {{{field|난이도|input type=radiobutton|values=입문,초급,중급,고급|default=입문|mandatory}}}
+| style="padding:14px 0;border-bottom:1px solid #e3e7e0;vertical-align:top;background:none" | {{{field|난이도|input type=radiobutton|values=입문,초급,중급,고급|default=입문|mandatory}}}
 |-
-! 실행 환경
+! style="width:130px;text-align:left;vertical-align:top;padding:22px 16px 14px 0;border-bottom:1px solid #e3e7e0;font-size:14px;font-weight:700;color:#20382e;background:none" | 실행 환경
-| {{{field|환경|input type=text|size=80|placeholder=예: Oracle 19c / Linux 8}}}
+| style="padding:14px 0;border-bottom:1px solid #e3e7e0;vertical-align:top;background:none" | {{{field|환경|input type=text|size=80|placeholder=예: Oracle 19c / Linux 8}}}
 |-
-! 키워드
+! style="width:130px;text-align:left;vertical-align:top;padding:22px 16px 14px 0;border-bottom:1px solid #e3e7e0;font-size:14px;font-weight:700;color:#20382e;background:none" | 키워드
-| {{{field|키워드|input type=text|size=80|placeholder=쉼표로 구분 (예: 인덱스, 실행계획)}}}
+| style="padding:14px 0;border-bottom:1px solid #e3e7e0;vertical-align:top;background:none" | {{{field|키워드|input type=text|size=80|placeholder=쉼표로 구분 (예: 인덱스, 실행계획)}}}
 |-
-! 작성일
+! style="width:130px;text-align:left;vertical-align:top;padding:22px 16px 14px 0;font-size:14px;font-weight:700;color:#20382e;background:none" | 작성일
-| {{{field|작성일|input type=datepicker|default=now}}}
+| style="padding:14px 0;vertical-align:top;background:none" | {{{field|작성일|input type=datepicker|default=now}}}
 |}
 {{{end template}}}
 </div>
-<div class="dsn-step"><span class="dsn-num">02</span><span class="dsn-step-title">본문 작성</span><span class="dsn-step-desc">위키 문법으로 자유롭게 작성 · [[mw:Help:Formatting/ko|문법 도움말]]</span></div>
+<div style="display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:30px 0 12px"><span style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#779171">02</span><span style="font-size:17px;font-weight:700;color:#20382e">본문 작성</span><span style="font-size:13px;color:#6c7b72">위키 문법으로 자유롭게 작성 · [[mw:Help:Formatting/ko|문법 가이드]]</span></div>
 {{{standard input|free text|rows=28|preload=틀:학습노트/본문}}}
-<div class="dsn-step"><span class="dsn-num">03</span><span class="dsn-step-title">저장하기</span><span class="dsn-step-desc">미리 보기로 확인한 뒤 저장하세요</span></div>
+<div style="display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:30px 0 12px"><span style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#779171">03</span><span style="font-size:17px;font-weight:700;color:#20382e">저장하기</span><span style="font-size:13px;color:#6c7b72">미리 보기로 확인한 뒤 저장하세요</span></div>
-<div class="dsn-card ds-pad">
+<div style="background:#fff;border:1px solid #e3e7e0;border-radius:14px;padding:8px 24px;padding:20px 24px">
 {{{standard input|summary}}}