Skip to Content
Blog학습 노트 예시

페이지 상단의 YAML 프론트매터로 제목·설명·(선택) 테마를 지정할 수 있습니다. 본문은 아래처럼 작성합니다.

제목 (Heading)

#은 보통 문서 제목과 겹치므로 본문은 ##부터 쓰는 편이 좋습니다.

세 번째 수준

네 번째 수준

강조·코드·링크

일반 문단입니다. 굵게, 기울임, 둘 다, 인라인 코드를 쓸 수 있습니다.

외부 링크  · 같은 사이트 내 문서 · 자동 링크는 https://example.com처럼 백틱으로 쓰거나 example.com  형태로 씁니다.

목록

순서 없는 목록:

  • 항목 하나
  • 항목 둘
    • 들여쓰기
    • 하위 항목

순서 있는 목록:

  1. 첫 번째
  2. 두 번째

체크리스트(GFM):

  • 완료한 일
  • 할 일

인용·GitHub 스타일 알림

일반 인용문입니다.
여러 줄 가능합니다.

블록 인용 + 알림 타입(NOTE, TIP, IMPORTANT, WARNING, CAUTION):

[!NOTE] 참고용 메모입니다.

[!TIP] 팁을 적을 때 사용합니다.

[!WARNING] 주의가 필요할 때 사용합니다.

Callout 컴포넌트

<Callout>으로도 강조 박스를 만들 수 있습니다.

info — 참고 정보

warning — 주의할 점

error — 위험·오류 가능성

코드 블록

언어를 지정하면 하이라이트됩니다. (필요하면 코드 블록에 copy/filename 등 Nextra 속성을 추가할 수 있습니다.)

# 터미널 예시
npm install
npm run dev
// JavaScript
export function greet(name) {
  return `Hello, ${name}`
}
// TSX
interface Props {
  title: string
}
 
export function Title({ title }: Props) {
  return <h1>{title}</h1>
}

표 (GFM)

열 A열 B열 C
1설명✓
2또 다른✗

접기 (Details)

HTML <details> / <summary>:

펼치기 제목

숨겨진 내용입니다. 긴 로그나 부가 설명을 접어 둘 때 씁니다.

탭 (Tabs)

패키지 매니저별 설치 예시:

pnpm i

단계 (Steps)

절차를 번호 스타일로 보여줄 때:

저장소 클론

git clone https://github.com/example/repo.git
cd repo

의존성 설치

위 Tabs 예시의 명령 중 하나를 실행합니다.

개발 서버 실행

npm run dev

구분선·기타

위에서 ---를 쓰면 수평선이 됩니다.

취소선: 이전에 쓰던 표현

이미지

public 폴더에 두었다면:

![대체 텍스트](/파일명.png)

실제 파일이 없으면 깨지므로, 넣을 때만 경로를 맞추면 됩니다.

수식 (프로젝트에서 KaTeX 등을 켠 경우)

인라인: E=mc2E = mc^2

블록:

∫01x dx=12\int_0^1 x\,dx = \frac{1}{2}

(수식이 안 보이면 next.config의 Nextra latex 옵션을 확인하세요.)

마무리 체크리스트

문서를 올릴 때 자주 확인하는 것:

  1. 프론트매터에 title / description 넣기
  2. 같은 폴더에 _meta.jsx가 있으면 사이드바 제목·순서 조정
  3. 코드 블록에 맞는 언어 태그
  4. 링크가 상대 경로(/blog/...)로 의도한 대로인지

추가로 Mermaid, Cards, FileTree 등은 nextra/components에서 import 해 사용할 수 있습니다. 필요하면 이 페이지에 이어서 예시를 붙이면 됩니다.

마지막 수정