서식 테스트
Published
- 7 min read
블로그에서 사용 가능한 모든 서식 요소를 한 페이지에서 확인합니다.
텍스트 서식
일반 본문에서 자주 쓰는 인라인 서식이 자연스럽게 보이는지 확인합니다.
굵은 글씨, 기울임 글씨, 취소선, inline code, 내부 링크, 외부 링크
Ctrl + Shift + P 같은 단축키 표기도 함께 확인합니다.
목록
불릿 목록
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
순서 있는 목록
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
중첩 목록
- 상위 항목 A
- 하위 항목 A-1
- 하위 항목 A-2
- 상위 항목 B
- 하위 항목 B-1
인용문
기본 blockquote
이 영역은 인용문 스타일과 문단 여백을 확인하기 위한 예시입니다. 두 줄 이상 이어질 때도 자연스럽게 보여야 합니다.
quote 디렉티브
출처가 있는 인용은 :::quote[출처] 구문을 사용합니다.
Stay hungry, stay foolish.
이 인용문은 cite가 함께 표시되는지 확인하기 위한 예시입니다.
콜아웃
note
참고: note 디렉티브 스타일과 링크, 인라인 코드가 함께 자연스럽게 보이는지 확인합니다. 테스트 링크와 inline code도 함께 확인합니다.
멀티라인 note 테스트입니다.
- 불릿 목록 A
- 불릿 목록 B
- 불릿 목록 C
pnpm installpnpm run buildcaution
주의: caution 디렉티브 스타일과 긴 문단 흐름을 확인합니다. 문단이 두 줄 이상 이어질 때도 아이콘, 여백, 강조색이 과하지 않고 안정적으로 보여야 합니다.
멀티라인 caution 테스트입니다.
- 첫 번째 점검 항목
- 두 번째 점검 항목
- 세 번째 점검 항목
{ "mode": "warning", "requiresReview": true}코드 블록
마우스를 올리면 안내 문구가 보이고, 클릭하면 복사됩니다.
const greet = (name) => `Hello, ${name}!`console.log(greet('Astro'))type TabState = 'idle' | 'active'const currentState: TabState = 'active'npm run build{ "name": "snd-blog", "version": "1.1.0"}표
| 항목 | 값 | 설명 |
|---|---|---|
| 상태 | Active | 현재 공개 테스트 중 |
| 컴포넌트 | Zippy | HTML5 details 기반 |
| 렌더링 | MDX | 글로벌 컴포넌트 등록 |
이미지
구분선
위아래 본문 흐름에서 구분선이 너무 두드러지지 않는지 확인합니다.
아코디언
기본 아코디언
:::zippy[제목] 구문으로 작성한 아코디언입니다.
텍스트 + 목록
첫 번째 멀티라인 아코디언입니다.
단락이 여러 개 이어져도 잘 동작하는지 확인합니다.
- 항목 A
- 항목 B
- 항목 C
코드 블록 포함
여러 언어의 코드 블록을 포함한 예시입니다.
echo "hello world"const greet = (name) => `Hello, ${name}!`console.log(greet('Astro'))혼합 콘텐츠 종합
텍스트, 코드, 목록, 표, 인용문이 한 블록 안에서 안정적으로 렌더링되는지 확인합니다.
- 리스트 항목 A
- 리스트 항목 B
아코디언 내부 인용문 예시
{ "component": "zippy", "status": "ok"}| 키 | 값 |
|---|---|
| mode | test |
| layout | stable |
탭
FAQ
구글 FAQ 리치 결과를 위한 schema.org 마이크로데이터가 포함된 아코디언입니다.
단순 텍스트 답변
Astro 4.8 기반의 정적 사이트 생성기(SSG)를 사용하며, 스타일은 Tailwind CSS, 콘텐츠는 MDX 형식으로 작성됩니다. 배포는 Vercel을 통해 이루어집니다.
불릿 목록이 포함된 답변
설치 순서는 아래와 같습니다.
- Node.js 20 이상 설치
pnpm또는npm으로 의존성 설치npm run dev로 개발 서버 시작
순서 목록이 포함된 답변
배포 절차입니다.
npm run build로 정적 파일 생성- Vercel CLI 또는 Git 연동으로 배포
- 도메인 설정 및 캐시 확인
코드 블록이 포함된 답변
개발 서버 실행 명령어입니다.
npm run dev환경 변수 설정 예시입니다. 아래는 빈줄 삽입
이것은 단락 빈줄 추가 후
PUBLIC_WALINE_SERVER_URL=https://your-waline.vercel.app표가 포함된 답변
지원하는 콘텐츠 형식 목록입니다.
| 형식 | 설명 |
|---|---|
.md | 기본 마크다운 |
.mdx | MDX (컴포넌트 사용 가능) |
.astro | Astro 컴포넌트 |
여러 서식이 혼합된 긴 답변
이 블로그는 Obsidian 친화적으로 설계되어 있습니다.
주요 기능은 다음과 같습니다.
:::zippy[제목]구문으로 아코디언 작성:::note/:::caution으로 콜아웃 작성::::faq+:::q[질문]으로 FAQ 작성
Obsidian에서 작성하고 그대로 블로그에 붙여넣기만 하면 됩니다.
# 빌드 후 정적 검색 인덱스 생성npm run build