블로그를 새로 깔면 제일 먼저 하는 일이 이거다. 글 하나를 만들어서 쓸 수 있는 걸 전부 넣어보고, 뭐가 깨지는지 본다. 깨진 건 대개 스타일 하나가 빠졌거나 플러그인이 안 붙은 거다.

제목 1

제목 2

제목 3

제목 4

제목 5

제목 6

제목에 `코드`와 링크를 넣으면

앵커가 어떻게 잡히는지도 같이 본다.

문단과 줄바꿈

문단은 빈 줄로 나뉜다. 이 문장은 위 문단과 별개다.

한 문단 안에서 줄을 끊으려면 역슬래시를 쓴다.
이 줄은 같은 문단의 새 줄이다.

이스케이프도 된다 — *별표는 별표로*, _밑줄은 밑줄로_, `백틱은 백틱으로`.

인라인 서식

굵게, 기울임, 굵은 기울임, ~~취소선~~, 인라인 코드, 그리고 백틱이 든 코드 `이렇게`.

HTML 도 그대로 산다 — H₂O, x², 형광펜,

CSS, Ctrl.

이모지도 나온다 🎉 🇰🇷 👨‍💻

링크

인라인 링크: 글 목록
제목 달린 링크: 프로젝트
참조식 링크: Astro 와 같은 참조를 두 번
그냥 URL: https://astro.build
꺾쇠 자동 링크는 MDX 에서 못 쓴다 — < 를 JSX 로 읽는다. [텍스트](주소) 로 적는다.
같은 글 안 앵커: 목록으로

순서 없는 목록

첫 항목
중첩도 된다
- 두 번째 깊이
  - 세 번째 깊이
코드와 서식이 든 항목

순서 있는 목록

첫 항목
두 번째
1. 중첩된 번호
2. 축이 흐트러지지 않아야 한다
세 번째

5부터 시작하는 목록도 있다.

다섯
여섯
일곱

느슨한 목록

항목 사이에 빈 줄이 있으면 각 항목이 문단이 된다.
그래서 이 항목은 위 항목과 간격이 넓다.
세 번째 항목.

항목 안에 블록 넣기

코드 블록을 품은 항목
```
bun run dev
```
인용을 품은 항목

목록 안에서도 인용은 인용이다.
표를 품은 항목

키 값
a 1

키	값
a	1

체크박스

끝낸 일
안 끝낸 일
체크박스가 글머리와 같은 축에 서는지

인용

좋은 코드는 아예 쓰지 않은 코드다.

인용 안의 인용.

인용 안에서도 서식과 코드가 살고, 목록도 들어간다.

첫 항목

두 번째 항목
const quoted = true;

코드

인라인

인라인은 const x = 1 처럼.

언어를 적은 블록

type Shortcut = readonly string[];

export function press(keys: Shortcut): string {
  return keys.map((key) => key.toUpperCase()).join(' + ');
}

bun run dev

- const old = '지운 줄';
+ const next = '더한 줄';

언어를 안 적은 블록

plain text
  들여쓰기가 그대로 남는다

가로로 긴 블록

가로로 긴 줄은 블록 안에서 스크롤돼야 한다.

export const wide = {
  alpha: 1,
  bravo: 2,
  charlie: 3,
  delta: 4,
  echo: 5,
  foxtrot: 6,
  golf: 7,
  hotel: 8,
  india: 9,
};

표

기본

컬렉션	원본	언어 처리
`posts`	`content/posts/*.mdx`	frontmatter lang
`projects`	`content/projects/**`	디렉토리로 분리

정렬

왼쪽	가운데	오른쪽
left	center	right
짧게	조금 길게	아주 길게
`code`	굵게	기울임

가로로 긴 표

키	맥	윈도우	리눅스	비고	추가	더	또	계속
팔레트	`cmdshiftPp`	`CtrlctrlShiftshiftPp`	`CtrlctrlShiftshiftPp`	전부 같다	a	b	c	d
저장	`cmdSs`	`CtrlctrlSs`	`CtrlctrlSs`	습관	e	f	g	h

단축키

cmdshiftPp 하나면 나머지는 거기서 다 찾을 수 있다. 취소는 escesc, 확정은 enter.

수식

문장 안에서

문장 안에 $E = mc^2$ 처럼 넣는다.

따로 떼서

\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

여러 줄 정렬

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

이미지

그대로 넣기

가로 사진 560x320

링크로 감싸기

제목을 달고 링크로 감싼 이미지.

캡션 달기

캡션이 달린 가로 사진 560x320 — 캡션은 본문보다 작고 흐리게, 본문과 같은 축에 선다

비율별

원격 이미지는 astro:assets 최적화를 안 탄다 - 아래 넷은 picsum 이 주는 그대로다. 화면 폭을 줄여가며 어디서 깨지는지 보라고 넣어뒀다.

첫 장만 본문보다 커서 폭에 맞춰 줄고, 나머지 셋은 원본이 작아 그 크기 그대로 선다.

가로로 긴 파노라마 2400x600

본문보다 좁은 600x400

좁고 세로로 긴 300x450

MDX

중괄호 표현식

중괄호는 표현식이다 — 2 + 2 는 4, 오늘 연도는 2026. 글자로 쓰려면 이스케이프한다 { 이렇게 }.

Callout

Stats

23매핑된 키

0px정렬 편차

5스토리

Steps

1
글을 만든다
src/content/posts/<slug>/index.mdx 하나면 라우트가 생긴다.
2
문법을 넣는다
표, 수식, 각주, 체크박스까지 한 번에 확인한다.
3
깨진 걸 고친다
대개 prose 스타일 하나가 빠져 있다.

Detail

전체 키 목록

cmdoptctrlshiftcapsfnfnentertabbacktabbackspacedelescescspacespaceupdownleftrightpageuppagedownhomeendejectwin

구분선

세 개 이상의 하이픈이 한 줄에 있으면 구분선이다. 위 이미지와 MDX 사이에도 하나 있다.

각주

각주는 이렇게 달고¹, 여러 개도 된다². 본문 순서와 상관없이 아래에 모인다.

여기까지 멀쩡하면 글을 써도 된다.

Footnotes

첫 각주. 안에서도 코드와 링크가 산다. ↩
둘째 각주. ↩