본문·제목·메뉴·버튼·코드는 Pretendard를 사용합니다. 100~900의 9개 굵기를 제공하며 본문은 Regular(400), 굵은 글자는 Bold(700)입니다. 폰트를 불러오지 못하면 맑은 고딕·시스템 sans-serif를 사용합니다. 수식은 기호 배치를 위해 KaTeX 전용 글꼴을 사용합니다. 폰트 출처와 사용 안내를 확인하세요.

1. 클래스 지정

글을 아직 공개하지 않으려면 맨 위 YAML에 published: false를 넣습니다. 자세한 저장·미리보기·발행 방법은 임시 저장 안내를 참고하세요.

문단·목록·표·인용문은 블록 바로 다음 줄에 속성을 붙입니다. 중간에 빈 줄을 넣지 마세요.

메모 내용입니다.
{: .post-it .tape}

이미지·링크·강조 텍스트는 닫는 기호 바로 뒤에 붙입니다.

**중요한 내용**{: .highlight-yellow}

![사진 설명](사진경로){: .polaroid data-caption="사진 설명"}

[전체 글](/archive/){: .btn .btn-primary}

여러 클래스는 공백으로 구분합니다. {: #section-id .class-name }처럼 ID도 함께 지정할 수 있습니다. 프로젝트 사이트에서는 실제 링크·이미지 경로에 relative_url 필터를 사용하세요.

이 문법은 Jekyll의 kramdown 속성 문법입니다. MkDocs의 !!! note, === "탭" 문법을 그대로 해석하지는 않습니다.

2. 글꼴과 정렬

본문은 데스크톱 18px, 모바일 17px입니다. 글 제목은 각각 30px·26px이며, 메뉴·버튼·코드는 16px을 사용합니다.

본문 글꼴: Pretendard. 한글, 숫자 0123456789, 영문 Notebook.

공용 글꼴: Pretendard. 메뉴와 버튼에도 같은 글꼴이 적용됩니다.

왼쪽 정렬은 기본값입니다.

가운데 정렬

오른쪽 정렬

보조 설명은 작은 크기로 표시할 수 있습니다.

3. 형광펜과 라벨

노랑 · 초록 · 분홍 · 파랑

물결 밑줄 · 메모 · 확인

**강조할 내용**{: .highlight-green}
*메모*{: .sticker}
*확인*{: .stamp}
*밑줄*{: .underline}

4. 안내 상자

안내 상자 끝에 {: .클래스명 }을 붙입니다. 예를 들어 팁 상자는 {: .tip }으로 지정합니다.

참고 · .note

추가 설명이나 관련 정보를 적는 영역입니다.

정보 · .info

설정과 사용 환경에 대한 정보를 적습니다.

팁 · .tip

작업할 때 참고할 방법을 적습니다.

완료 · .success

작업 결과와 확인 내용을 적습니다.

주의 · .warning

실행 전에 확인할 조건을 적습니다.

경고 · .danger

데이터 삭제 등 주의가 필요한 동작을 설명합니다.

예제 · .example

본문과 구분해서 예제를 작성합니다.

질문 · .question

확인할 질문이나 미해결 항목을 적습니다.

> **주의**
>
> 변경하기 전에 설정 파일을 확인하세요.
{: .warning}

짧은 안내는 문단에 바로 지정해도 됩니다.

5. 포스트잇과 종이

모든 포스트잇은 본문 영역의 너비를 100% 사용합니다.

• 글 초안 작성
• 이미지 크기 확인
• 링크 검사

분홍 포스트잇

파랑 포스트잇

초록 포스트잇

메모 내용입니다.
{: .post-it .pink .tape}

찢어진 포스트잇

.post-it-torn은 메모지 한 장을 뜯어 붙인 모양입니다. 위쪽에는 반듯한 접착 띠, 아래쪽에는 넓고 불규칙한 찢김, 오른쪽 아래에는 작게 들린 모서리가 있습니다. 본문 너비를 100% 사용하며 오른쪽으로 아주 살짝 기울어집니다. 노랑·분홍·파랑·초록을 지원하고, .tape를 더하면 테이프도 붙일 수 있습니다.

오늘 떠오른 생각을 잊기 전에 한 장 뜯어 붙여 둡니다.

분홍 메모도 손으로 찢은 종이처럼 남겨 둡니다.

메모 내용입니다.
{: .post-it .post-it-torn .pink}

여러 문단이나 목록은 <div class="post-it post-it-torn blue tape" markdown="1"> 안에 넣고, 내용 앞뒤에 빈 줄을 둡니다. 종이 배경만 잘라내므로 테이프와 링크의 포커스 표시는 그대로 보입니다.

모눈 종이

모눈 종이 (기존 paper-lined 클래스와 호환)

점선 모눈 종이

무지 종이

여러 문단을 한 영역으로 묶으려면 HTML 컨테이너를 사용합니다.

<div class="paper-grid" markdown="1">

## 제목

여러 문단과 목록을 함께 작성합니다.

</div>

6. 사진과 폴라로이드

기본 본문 이미지는 두 모서리에 테이프가 붙습니다.

폴라로이드는 선택한 이미지에만 적용합니다. 아래쪽의 넓은 여백에 설명을 넣을 수 있습니다.

![책상 사진](사진경로){: .polaroid data-caption="책상 · 2026.10"}

![커피 사진](사진경로){: .polaroid .polaroid-dark .photo-small}

사진 클래스는 이미지 옆 또는 이미지 단독 문단의 다음 줄에 지정할 수 있습니다. 모바일에서는 좌우 배치를 해제합니다. 크롭 클래스는 이미지 일부가 잘릴 수 있습니다.

![사진 설명](사진경로)
{: .polaroid .photo-wide}

프레임 없이 원본 이미지를 배치하는 예제입니다.

대표 사진에도 적용하려면 글 상단 front matter에 다음 값을 추가합니다. 해당 글의 목록 사진, 대표 사진, 사진첩에 함께 적용됩니다.

photo_style: polaroid

JavaScript 없이도 캡션까지 표시하려면 아래 HTML을 사용하세요. 기본 테이프·이미지 IAL의 자동 캡션은 JavaScript로 처리됩니다.

<figure class="polaroid">
  <img src="사진경로" alt="사진 설명">
  <figcaption>사진 설명</figcaption>
</figure>

7. 목록

• 파일 작성
• 내용 확인
• 배포

1. 저장소 설정
2. 글 작성
3. 빌드 확인

• 10.14 — 블로그 생성
• 10.16 — 예시 글 작성
• 10.17 — 스타일 추가

1. 첫 단계
2. 다음 단계
{: .steps}

직접 체크하는 체크리스트

목록에 .checklist를 붙이면 항목을 클릭해 체크·해제할 수 있습니다. 키보드에서는 Tab으로 체크박스에 이동한 뒤 Space를 누르세요. 아래에 완료 개수가 표시되고, 초기화를 누르면 글을 작성할 때 지정한 체크 상태로 돌아갑니다.

처음부터 완료한 항목은 [x], 미완료 항목은 [ ]로 작성합니다. 일반 목록에 .checklist만 붙여도 모두 미완료 상태로 시작합니다.

• 글 작성
• 링크 확인
• 배포

- [x] 글 작성
- [x] 링크 확인
- [ ] 배포
{: .checklist #publish-checklist}

체크 상태는 현재 브라우저에만 저장되어 새로고침해도 유지됩니다. 다른 기기·브라우저와 동기화되거나 원본 글에 반영되지는 않습니다. 브라우저 데이터를 삭제하면 기록도 사라집니다. 저장을 사용할 수 없으면 목록 아래에 안내하며 현재 화면에서는 계속 체크할 수 있습니다.

목록마다 서로 다른 ID(예: #publish-checklist)를 지정하면 다른 목록을 앞에 추가해도 저장 위치가 유지됩니다. 항목 내용·순서·기본 체크 상태를 바꾸면 새 목록으로 시작합니다. JavaScript가 꺼져 있으면 작성 당시 상태를 표시합니다.

8. 카드와 열

• 작성 — 마크다운으로 글을 작성합니다.
• 분류 — 카테고리와 태그를 지정합니다.
• 사진 — 이미지와 설명을 추가합니다.
• 발행 — 빌드 후 GitHub Pages에 배포합니다.

- **작성** — 마크다운으로 글을 작성합니다.
- **발행** — 빌드 후 배포합니다.
{: .cards}

• 왼쪽 항목
• 오른쪽 항목

.cards는 테두리가 있는 2열 카드, .columns-2는 테두리 없는 2열 목록입니다. 모바일에서는 1열로 표시합니다.

9. 표

| 항목 | 설명 |
| --- | --- |
| RSS | 새 글 구독 |
{: .table-striped .table-compact}

.table-bordered는 테두리를 강조하고, .table-plain은 가로 구분선만 표시합니다. .table-hover는 행에 마우스를 올렸을 때 배경을 강조합니다.

10. 하이퍼링크와 버튼 링크

본문의 일반 링크는 파란색 밑줄과 연결고리 아이콘으로 표시합니다. 방문한 링크는 보라색이며, 마우스를 올리거나 키보드로 선택하면 연한 파란 배경으로 강조합니다. 아이콘은 링크 표시이며 새 창 열기를 의미하지 않습니다.

공책 소개 읽기 · GitHub 방문하기 · 이 페이지의 목록으로 이동

[링크 이름](https://example.com/)
[같은 페이지의 항목](#section-id)

기본 Markdown 링크에 자동 적용됩니다. 버튼·사진 링크·별표 주석은 각각의 전용 모양을 사용합니다.

버튼으로 표시하기

전체 글 사진첩 RSS

[링크 이름](링크주소){: .btn .btn-primary}

11. 접기 영역

toc: false

<details class="fold" markdown="1">
<summary>제목</summary>

접힌 영역의 내용입니다.

</details>

12. 작성 시 참고

• 블록 속성은 대상 블록 바로 다음 줄에 작성합니다.
• 본문 스타일은 .prose 안에서 적용됩니다. 글 페이지에는 자동으로 들어갑니다.
• 일반 페이지는 front matter에 prose: true를 지정합니다.
• .photo-left, .photo-right는 모바일에서 일반 이미지로 배치됩니다.
• .no-frame과 프레임 클래스는 동시에 사용하지 않습니다.
• data-caption은 일반 텍스트로 처리하며 HTML을 실행하지 않습니다.

문법 참고: kramdown 속성 목록.

13. 코드 블록

코드 블록은 찢어진 종이 배경, 상단 테이프, 언어 표시와 복사 버튼으로 구성됩니다. 글꼴은 본문과 같은 Pretendard이며 긴 줄은 코드 영역 안에서 가로 스크롤됩니다. 고정폭 글꼴이 아니므로 문자별 너비는 다릅니다.

// 원본 들여쓰기와 줄바꿈을 유지합니다.
function createNote(title, tags = []) {
  return {
    title,
    tags,
    published: false,
  };
}

const note = createNote("작업 기록", ["Jekyll", "CSS"]);
console.log(note);

언어 이름을 코드 펜스에 지정하면 상단 라벨과 구문 색상에 반영됩니다. 기존 글의 코드에도 자동 적용됩니다. Tab 키로 코드 영역에 포커스를 이동한 뒤 방향키로 가로 스크롤할 수 있습니다.

14. 그려지는 강조 표시

화면에 들어올 때 선이 그려집니다. 마우스를 올리거나 아래 버튼을 누르면 다시 재생합니다. 운영체제에서 동작 줄이기를 설정한 경우 애니메이션 없이 표시합니다.

**밑줄**{: .underline}
**두 줄**{: .underline-double}
**물결**{: .underline-wavy}
**동그라미**{: .mark-circle .ink-red}
**별표**{: .mark-star}
**체크**{: .mark-check .ink-blue}
**괄호**{: .mark-bracket}

짧은 단어나 구절에 사용하세요. 긴 문구가 줄바꿈되면 전체 영역을 감쌉니다. 별표·체크는 장식이며 체크박스의 상태를 나타내지 않습니다.

15. Hover와 키보드 포커스

메뉴, 색인 탭, 버튼, 태그, 페이지 번호, 사진 링크, 검색 입력, 접기 제목, 목차 링크에 hover 효과가 있습니다. 키보드로 이동할 때는 포커스 표시로 위치를 확인할 수 있습니다. 터치 기기에서는 hover 전용 이동 효과를 적용하지 않습니다.

16. 수식

KaTeX로 수식을 표시합니다. 렌더러와 수식 폰트는 사이트 안에 포함되어 있습니다.

인라인 수식: 문장 안에 넣기

인라인 수식도 가능합니다. 이 블로그에서는 문장 안의 수식을 $$ 두 개씩으로 감쌉니다. 문장과 같은 줄에 작성하면 kramdown이 인라인 수식으로 처리합니다.

에너지와 질량의 관계는 \(E = mc^2\)입니다.

에너지와 질량의 관계는 $$E = mc^2$$입니다.
배열의 첫 번째 원소는 $$a_1$$이고, 일반항은 $$a_{n+1}$$입니다.
확률은 $$P(A) = \frac{1}{2}$$로 나타낼 수 있습니다.

다른 편집기에서 자주 쓰는 단일 $...$ 문법은 이 블로그에서 지원하지 않습니다. $10 같은 가격을 수식으로 오인하지 않도록 한 설정입니다. 수식이 코드처럼 보이면 감싼 백틱을 제거하고, 위 예제처럼 본문에 직접 작성하세요.

블록 수식: 별도의 줄에 크게 표시하기

여는 $$, 수식, 닫는 $$를 각각 별도 줄에 쓰고, 수식 블록 앞뒤에 빈 줄을 둡니다.

적분 결과는 다음과 같습니다.

$$
\int_0^1 x^2\,dx = \frac{1}{3}
$$

이어서 설명을 작성합니다.

자주 쓰는 문법

아래 표의 코드를 인라인 또는 블록 수식의 $$ 안에 넣습니다. 명령어는 백슬래시 \ 하나로 시작하며, 여러 글자를 묶을 때는 중괄호 {...}를 씁니다.

여러 줄 수식: 등호 맞추기

aligned 안에서 &는 정렬 기준, \\는 줄바꿈입니다. 아래 코드를 그대로 복사해서 수정하면 됩니다.

$$
\begin{aligned}
f(x) &= x^2 + 2x + 1 \\
     &= (x+1)^2
\end{aligned}
$$

행렬

pmatrix는 소괄호가 있는 행렬입니다. 열은 &, 행은 \\로 구분합니다. 대괄호는 bmatrix로 바꿔 쓰세요.

$$
A = \begin{pmatrix}
1 & 2 \\
3 & 4
\end{pmatrix}
$$

표시 설정과 작성 시 주의점

게시글과 prose: true인 페이지는 수식을 자동으로 지원합니다. 일반적인 작성에는 math: true를 따로 추가할 필요가 없습니다. 코드 블록과 인라인 코드 안의 수식은 변환하지 않으므로, 위 코드 상자는 작성법을 보여주는 용도입니다.

• 블록 수식이 문장에 붙으면 앞뒤 빈 줄과 $$의 줄 위치를 확인하세요.
• 아래첨자·위첨자가 한 글자에만 적용되면 x^{n+1}처럼 범위를 중괄호로 묶으세요.
• 수식이 오류로 표시되면 명령어 철자와 중괄호 짝을 확인하세요. 명령어 앞의 백슬래시는 하나이며, aligned·행렬의 줄바꿈에만 두 개를 씁니다.
• 긴 블록 수식은 가로로 스크롤됩니다. 긴 식은 인라인보다 블록으로 작성하면 읽기 쉽습니다.

글 맨 위의 YAML front matter에 math: false가 있으면 수식 렌더러가 꺼집니다. 수식을 사용할 때는 해당 줄을 지우거나 math: true로 바꾸세요. 끄는 설정은 다음과 같습니다.

math: false

인라인 수식은 주변 글자와 같은 크기입니다. 일반 본문에서는 데스크톱 18px, 모바일 17px이며, 블록 수식은 주변 글자보다 10% 크게 표시합니다. 아래첨자·위첨자는 수식의 자연스러운 비율에 맞게 작아집니다. 본문과 UI의 최소 글자 크기 12pt(16px)를 수식의 첨자에 강제로 적용하지 않습니다.

17. 코드 설명

설명 옆의 행 버튼을 누르면 연결된 코드 줄이 강조됩니다. 다시 누르면 강조를 해제합니다. 복사 버튼은 원본 코드만 복사합니다.

function total(price, count) {
  const amount = price * count;
  return amount;
}

<div class="code-example" markdown="1">

~~~javascript
const price = 1200;
const count = 3;
console.log(price * count);
~~~

<ol class="code-notes">
<li data-lines="1-2">입력 값을 정의합니다.</li>
<li data-lines="3">계산 결과를 출력합니다.</li>
</ol>
</div>

data-lines="1,3-5"처럼 쉼표와 범위로 여러 줄을 지정할 수 있습니다. 행 번호는 1부터 시작합니다.

18. 콘텐츠 탭

bundle exec jekyll serve --host 127.0.0.1

bundle exec jekyll serve --host 127.0.0.1

<div class="content-tabs" data-label="언어 선택" markdown="1">
<section class="tab-panel" data-tab="JavaScript" markdown="1">

첫 번째 탭의 내용입니다.

</section>
<section class="tab-panel" data-tab="Python" markdown="1">

두 번째 탭의 내용입니다.

</section>
</div>

탭에서 좌우 방향키·Home·End를 사용할 수 있습니다. JavaScript가 꺼져 있거나 인쇄할 때는 모든 탭의 내용을 표시합니다.

19. 이미지 확대

본문 사진·대표 이미지·사진첩의 확대 ↗ 버튼으로 사진을 크게 볼 수 있습니다. 확대 창에서 확대 200% / 화면에 맞춤, 이전·다음 사진, Esc 또는 닫기를 사용합니다. 확대된 사진은 스크롤하거나 터치로 밀어서 확인합니다. 사진에 연결된 기존 링크는 그대로 사용할 수 있습니다.

특정 이미지를 제외하려면 .no-zoom 클래스을 지정합니다.

20. 읽기 진행률

화면 맨 위에 페이지 콘텐츠 기준 읽기 진행도를 얇은 막대로 표시합니다. 숫자나 별도 카드 없이 스크롤에 따라 막대가 채워집니다. 화면 크기, 이미지 로드, 탭 전환과 접기 영역의 높이 변화에 맞춰 갱신됩니다. 짧아서 화면에 모두 표시되는 콘텐츠는 막대가 가득 찹니다.

21. 도장

**완료**{: .stamp .stamp-green}
**검토**{: .stamp .stamp-blue .stamp-round}
**작성 중**{: .stamp .stamp-outline .stamp-gray}

.stamp는 사각 도장, .stamp-round는 원형 도장입니다. 색상은 .stamp-blue, .stamp-green, .stamp-gray로 바꿉니다. 기본색은 붉은 잉크색입니다. 도장은 장식이며 클릭으로 상태를 바꾸지는 않습니다.

22. 손으로 그린 테두리

버튼과 탭의 테두리에는 조금씩 어긋난 선을 사용합니다. 상자에도 .sketch-box로 같은 느낌을 적용할 수 있습니다.

테두리는 손으로 그린 선처럼 표현하고, 내용은 그대로 읽기 쉽게 표시합니다.

상자에 넣을 내용입니다.
{: .sketch-box}

23. 취소선

짧은 문구를 펜으로 지우듯 표시합니다. 화면 진입 시 천천히 그려지고, 마우스를 올리면 다시 재생됩니다. 동작 줄이기 설정에서는 정적으로 표시합니다.

~~삭제할 문구~~{: .strike}
~~삭제할 문구~~{: .strike-double .ink-blue}
~~삭제할 문구~~{: .strike-zigzag}
~~삭제할 문구~~{: .strike-scribble}
~~삭제할 문구~~{: .strike-cross .ink-green}

HTML로 작성할 때는 <del class="strike-zigzag">삭제할 문구</del>을 사용할 수 있습니다. .ink-red, .ink-blue, .ink-green으로 색상을 지정합니다. 짧은 단어나 구절에 사용하세요. JavaScript가 꺼져 있어도 기본 취소선이 표시됩니다.

24. 이모지와 구분선

이모지는 그대로 입력하면 Twemoji로 표시됩니다.

😀 ✨ 📓 ✅ ❤️ 👍🏽 👩‍💻 🇰🇷

구분선은 문단 사이 빈 줄에 ---를 입력합니다.

코드 안의 😀는 변환하지 않습니다. 원래 이모지를 유지하려면 다음 클래스를 지정합니다.

😀 기기 기본 이모지

25. 수평 구분선 디자인

게시글 제목·설명 아래의 구분선과 본문의 기본 구분선은 2px 점선입니다. 본문에서는 --- 바로 다음 줄에 클래스를 지정해 모양을 선택합니다. 구분선 앞뒤에는 빈 줄을 둡니다.

앞 문단

---
{: .hr-wave }

다음 문단

실선 · .hr-solid

긴 점선 · 기본 · .hr-dashed

이중선 · .hr-double

작은 점선 · .hr-dotted

물결선 · .hr-wave

지그재그 · .hr-zigzag

손으로 그은 두 줄 · .hr-pencil

26. 별 주석 (Annotations)

설명이 있는 단어 끝에 별 모양 표시가 붙습니다. 단어나 표시를 누르면 설명 메모가 열립니다. Markdown 설명 예시와 같은 설명을 다시 여는 예시도 확인해 보세요.

[설명할 단어](#my-note){: .annotation}

<div id="my-note" class="annotation-note" markdown="1">

**설명 제목**

여기에 설명을 작성합니다. **강조**, 목록, 링크를 사용할 수 있습니다.

</div>

링크의 #my-note와 설명의 id="my-note"를 맞추세요. ID는 한 페이지에서 중복되지 않게 지정하며, 여러 단어가 같은 설명을 가리킬 수 있습니다. 일반 문단·안내 상자·목록·표·콘텐츠 탭 안의 링크에서 사용할 수 있습니다. 설명 안에 다시 주석을 넣는 중첩 구성과 코드 블록 내부는 지원하지 않습니다. 기존 코드 줄 설명 기능은 별도로 사용합니다.

JavaScript가 꺼져 있으면 설명을 본문에서 읽고 링크로 이동할 수 있습니다. 인쇄할 때도 설명이 표시됩니다. Material의 (1) 문법을 변환하는 기능은 아니며, 위 Jekyll 문법을 사용합니다.

27. 제목 단계별 표시

모든 제목 앞에 세이지 그린 크레파스로 그린 # 하나를 표시합니다. 기호는 왼쪽으로 6도 살짝 기울고, 제목 글자는 반듯하게 유지합니다. 크레파스의 알갱이와 조금씩 휘어진 획으로 손으로 그린 느낌을 더했습니다. 별도의 클래스는 필요하지 않으며 게시글 제목에도 적용됩니다.

Markdown의 # 개수는 제목의 단계를 정합니다. 화면에서는 기호를 반복하지 않고 글자 크기·굵기·위아래 여백으로 구분합니다. 긴 제목의 둘째 줄은 기호가 아닌 제목 글자에 맞춰 정렬됩니다.

28. 이미지 로딩 표시

이미지를 불러오는 동안 모눈 종이 위에 파란 지그재그가 그려집니다. 다운로드와 이미지 디코딩이 끝나면 실제 사진으로 바뀝니다. 캐시에 있는 이미지는 바로 보여주며, 실패하면 오류 문구를 표시합니다. 본문뿐 아니라 홈·글 목록·사진첩·프로필·확대 창 등 사이트 전체의 사진에 자동 적용됩니다. 이모지·UI 아이콘·장식 전용 이미지는 제외합니다.

아래는 로딩 표시 미리보기입니다. 이 예시만 애니메이션이 계속 반복됩니다.

HTML5 지연 로딩도 함께 사용합니다. 일반 사진은 화면 근처에서 요청하고, 프로필·대표 이미지·확대 창은 즉시 요청합니다. 첫 화면에서 바로 보여야 하는 이미지는 다음처럼 지정하세요. width·height는 실제 이미지 비율에 맞춰 작성하면 로딩 전 공간도 확보됩니다.

![사진 설명](/assets/images/desk.jpg){: loading="eager" width="1200" height="800"}

명시한 로딩 속성과 원본 경로는 유지합니다. 움직임 줄이기 설정에서는 지그재그가 정지한 상태로 표시됩니다. JavaScript가 꺼져 있으면 브라우저의 기본 이미지 표시를 사용합니다. 이미지 압축이나 작은 해상도 파일 생성은 별도 작업입니다.

29. 문단 안의 연결 화살표

한 문단 안에서 출발 단어에 .arrow-from, 도착 단어에 .arrow-to를 지정합니다. 같은 data-arrow 값을 가진 두 영역이 연결됩니다. Hi에서 minsu를 가리키는 예시입니다. 출발 단어는 녹색, 도착 단어는 적갈색의 손그림 네모 상자로 감쌉니다. 상자 사이에는 곡선만 연결하며 점이나 화살촉은 표시하지 않습니다.

Hi, My name is minsu.

*Hi*{: .arrow-from data-arrow="intro"}, My name is *minsu*{: .arrow-to data-arrow="intro"}.

같은 줄에서는 위쪽 곡선으로, 다른 줄에서는 문단 옆 여백을 거쳐 연결됩니다. 화면 크기·폰트 로딩·접기 영역 변화에 맞춰 위치를 다시 계산합니다.

출발 단어에서 연결을 시작합니다. 창 너비가 좁아지거나 문장이 길어져도 글자 위치에 맞춰 화살표를 그립니다. 다음 줄에 있는 대상도 같은 문단 안이라면 연결할 수 있습니다.
이 문장에서 연결할 대상은 도착 단어입니다.

도착을 먼저 적고, 뒤에 있는 출발에서 거꾸로 가리킬 수도 있습니다.

한 문단에 한 쌍만 있으면 data-arrow는 생략해도 됩니다. 여러 쌍을 넣을 때는 각각 다른 이름을 사용하세요. 출발이나 도착이 없거나 같은 이름이 중복되면 해당 연결은 그리지 않습니다. 현재는 같은 문단 안의 연결만 지원하며, 문단 사이·목록·표·코드 내부 연결은 제외합니다. JavaScript가 꺼져 있으면 텍스트만 표시됩니다.

30. 문단 묶음 괄호

여러 문단을 왼쪽 괄호로 묶습니다. 기본은 대괄호이고, .group-brace를 더하면 중괄호입니다. data-label은 묶음 위에 표시할 제목이며 생략할 수 있습니다.

<div class="note-group group-brace" data-label="핵심 정리" markdown="1">
첫 번째 문단입니다.

두 번째 문단입니다.
</div>

31. 빨간펜 첨삭

원문에 빨간 취소선을 긋고, 수정할 표현을 위에 적습니다. del은 원문, ins는 수정문입니다. 긴 문장 전체보다는 수정할 단어나 짧은 구절에 사용하세요.

회의는 화요일수요일에 진행합니다.

회의는 <span class="proofread"><del>화요일</del><ins>수요일</ins></span>에 진행합니다.

32. 빈칸 학습

정답에 .study-blank를 붙이면 처음에는 가려집니다. 클릭하거나 키보드로 포커스를 옮겨 Enter·Space를 누르면 정답이 나오고, 다시 누르면 가려집니다. 정답은 페이지에 포함되므로 시험 보안용 기능은 아닙니다.

Jekyll의 기본 템플릿 언어는 Liquid입니다.

Jekyll의 기본 템플릿 언어는 *Liquid*{: .study-blank}입니다.

빈칸 여러 개는 각각 독립적으로 열고 닫을 수 있습니다. 링크·버튼을 포함한 내용에는 적용하지 않으며, 인쇄하거나 JavaScript를 끄면 정답을 보여줍니다.

33. 손그림 강조 테두리

단어나 짧은 구절을 손으로 그린 듯한 선으로 감쌉니다.

네모 테두리 · 타원 테두리 · 구름 테두리

*중요한 내용*{: .doodle-box}
*핵심 개념*{: .doodle-oval}
*추가로 생각할 내용*{: .doodle-cloud}

34. 크레파스

종이에 크레파스를 문지른 듯한 알갱이와 거친 가장자리로 강조합니다. .crayon은 넓게 칠하고, .crayon-underline은 오른쪽으로 살짝 올라가는 사선 밑줄을 긋습니다. .crayon-circle은 손으로 그린 듯한 동그라미로 감쌉니다. 색상을 생략하면 노랑입니다.

노랑 크레파스 · 분홍 크레파스 · 파랑 크레파스

초록 크레파스 · 주황 크레파스 · 보라 크레파스

기억하고 싶은 문장 · 다시 살펴볼 아이디어

핵심 · 중요한 개념 · 다시 확인

사선은 양 끝의 높이 차이를 약 2px로 제한해 완만하게 표시합니다. 밑줄과 동그라미는 단어나 짧은 구절에 사용하세요. 동그라미는 글자 길이에 따라 타원으로 늘어나며, 화면보다 긴 구절은 내부에서 줄바꿈됩니다. 밑줄은 구절의 마지막 줄 아래에 표시됩니다.

긴 문장에도 사용할 수 있습니다. 천천히 쌓아 온 작은 기록들이 모여 새로운 생각의 출발점이 됩니다. 줄이 바뀌어도 크레파스의 질감은 각 줄의 글자를 따라 이어집니다.

**중요한 내용**{: .crayon}
**새로운 아이디어**{: .crayon .crayon-pink}
*기억할 문장*{: .crayon-underline .crayon-green}
*핵심 개념*{: .crayon-circle .crayon-pink}

색상 클래스는 .crayon-yellow, .crayon-pink, .crayon-blue, .crayon-green, .crayon-orange, .crayon-purple 중 하나를 강조·밑줄·동그라미 클래스와 함께 사용합니다. 제목의 일부를 강조할 때도 같은 문법을 사용할 수 있습니다. JavaScript 없이 표시되며, 인쇄와 고대비 모드에서는 일반 밑줄과 동그라미 테두리로 표시합니다.

35. 임시 저장과 발행

글의 맨 위 --- 사이에 published: false를 넣으면 임시 저장됩니다. 비공개 Git 저장소에는 커밋·푸시해도 됩니다. 블로그에는 글 페이지가 생성되지 않아 주소를 직접 입력해도 읽을 수 없고, 홈·검색·아카이브·사진첩·RSS·사이트맵에서도 제외됩니다.

---
title: "작성 중인 글"
date: 2026-10-18 09:00:00 +0900
categories: [일상]
published: false
---

여기에 초안을 작성합니다.

false에는 따옴표를 붙이지 않습니다. 발행하려면 published: true로 바꾸거나 해당 줄을 지운 뒤 main에 푸시하세요. 글 날짜가 미래이면 해당 날짜 전에는 발행되지 않습니다.

초안을 확인할 때는 터미널에서 다음 명령을 실행합니다.

npm run preview:drafts

Windows PowerShell에서는 npm.cmd run preview:drafts를 사용할 수 있습니다. 브라우저에서 http://127.0.0.1:4002/를 열면 임시 저장한 글도 볼 수 있습니다. 일반 미리보기와 공개 블로그에는 표시되지 않습니다. 초안 미리보기 결과는 별도 폴더에 저장하며 배포하지 않습니다.

_drafts/글이름.md에 작성하는 방법도 지원합니다. 발행할 때는 _posts/YYYY-MM-DD-글이름.md로 옮기고, published: false가 있으면 제거합니다.

assets/에 넣은 이미지·첨부파일은 글의 임시 저장 상태와 관계없이 공개 배포됩니다. 초안 전용 비공개 첨부파일은 해당 폴더에 넣지 마세요. 이미 공개했던 글의 외부 복사본·검색 캐시까지 삭제되는 기능은 아닙니다.