제목 1 (Heading 1)
제목 2 (Heading 2)
제목 3 (Heading 3)
제목 4 (Heading 4)
제목 5 (Heading 5)
제목 6 (Heading 6)
📌 텍스트 스타일
이것은 굵은 텍스트(Bold) 입니다.
이것은 기울임 텍스트(Italic) 입니다.
이것은 굵은 기울임(Bold & Italic) 입니다.
이것은
취소선(Strikethrough)
입니다.
이것은 인라인 코드(Inline Code) 입니다.
이것은 밑줄(Underline) 입니다.
이것은 일반 텍스트^위첨자^ 입니다.
이것은 일반 텍스트
아래첨자
입니다.
💡 이것은 인용문(Blockquote) 입니다.
여러 줄로 작성할 수 있습니다.중첩된 인용문도 가능합니다.
3단계 중첩 인용문
📋 목록 (Lists)
순서 없는 목록
- 항목 1
- 하위 항목 1-1
- 하위 항목 1-1-1
- 하위 항목 1-2
- 하위 항목 1-1
- 항목 2
- 항목 3
순서 있는 목록
- 첫 번째
- 두 번째
- 두 번째의 하위 1
- 두 번째의 하위 2
- 세 번째
체크리스트
- 완료된 항목
- 이것도 완료
- 미완료 항목
- 아직 안 한 일
🔗 링크 & 이미지
링크
자동 링크
이미지
이미지 + 링크
📊 테이블 (Table)
| 이름 | 나이 | 직업 | 비고 |
|---|---|---|---|
| 홍길동 | 25 | 개발자 | 풀스택 |
| 김철수 | 30 | 디자이너 | UI/UX |
| 이영희 | 28 | PM | |
| 박지민 | 22 | 학생 | 인턴 |
:---왼쪽 정렬 |:---:가운데 정렬 |---:오른쪽 정렬
💻 코드 블록 (Code Blocks)
JavaScript
// 화살표 함수와 비동기 처리
const fetchUserData = async (userId) => {
try {
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
const { name, email, age } = data;
console.log(`사용자: ${name}, 이메일: ${email}`);
return data;
} catch (error) {
console.error('데이터 가져오기 실패:', error.message);
throw error;
}
};
// 배열 메서드 체이닝
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers
.filter(n => n % 2 === 0)
.map(n => n ** 2)
.reduce((acc, cur) => acc + cur, 0);
console.log(result); // 220Python
from dataclasses import dataclass
from typing import List, Optional
import asyncio
@dataclass
class User:
name: str
email: str
age: int
role: str = "member"
class UserService:
def __init__(self):
self._users: List[User] = []
async def get_active_users(self) -> List[User]:
"""활성 사용자 목록을 반환합니다."""
users = await self._fetch_from_db()
return [u for u in users if u.role != "inactive"]
def add_user(self, name: str, email: str, age: int) -> User:
user = User(name=name, email=email, age=age)
self._users.append(user)
return user
# 딕셔너리 컴프리헨션
scores = {"alice": 85, "bob": 92, "charlie": 78, "diana": 95}
top_students = {k: v for k, v in scores.items() if v >= 90}
print(top_students) # {'bob': 92, 'diana': 95}TypeScript
interface ApiResponse<T> {
data: T;
status: number;
message: string;
timestamp: Date;
}
type UserRole = 'admin' | 'editor' | 'viewer';
interface User {
id: number;
name: string;
email: string;
role: UserRole;
createdAt: Date;
}
async function fetchUsers(): Promise<ApiResponse<User[]>> {
const response = await fetch('/api/users');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
}
// 제네릭 유틸리티
function groupBy<T>(array: T[], key: keyof T): Record<string, T[]> {
return array.reduce((groups, item) => {
const value = String(item[key]);
groups[value] = [...(groups[value] || []), item];
return groups;
}, {} as Record<string, T[]>);
}HTML / CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>샘플 페이지</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
padding: 2rem;
}
.card {
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>카드 제목</h2>
<p>카드 내용입니다.</p>
</div>
</div>
</body>
</html>Bash / Shell
#!/bin/bash
# 변수 및 조건문
PROJECT_NAME="my-project"
ENV="${1:-development}"
echo "🚀 배포 시작: $PROJECT_NAME ($ENV)"
if [ "$ENV" = "production" ]; then
echo "⚠️ 프로덕션 배포입니다!"
read -p "계속하시겠습니까? (y/n): " confirm
[ "$confirm" != "y" ] && exit 1
fi
# 함수 정의
deploy() {
local env=$1
echo "📦 빌드 중..."
npm run build --mode="$env"
echo "✅ 배포 완료!"
}
deploy "$ENV"SQL
-- 사용자별 월간 주문 통계
SELECT
u.name AS 사용자명,
DATE_FORMAT(o.created_at, '%Y-%m') AS 주문월,
COUNT(o.id) AS 주문건수,
SUM(o.total_amount) AS 총주문금액,
AVG(o.total_amount) AS 평균주문금액,
RANK() OVER (
PARTITION BY DATE_FORMAT(o.created_at, '%Y-%m')
ORDER BY SUM(o.total_amount) DESC
) AS 순위
FROM users u
INNER JOIN orders o ON u.id = o.user_id
WHERE o.status = 'completed'
AND o.created_at >= '2024-01-01'
GROUP BY u.name, DATE_FORMAT(o.created_at, '%Y-%m')
HAVING COUNT(o.id) >= 3
ORDER BY 주문월 DESC, 총주문금액 DESC;JSON
{
"project": "markdown-sample",
"version": "2.0.0",
"author": {
"name": "홍길동",
"email": "hong@example.com"
},
"dependencies": {
"react": "^18.2.0",
"next": "^14.0.0",
"typescript": "^5.3.0"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"features": ["dark-mode", "i18n", "analytics"],
"config": {
"port": 3000,
"debug": false,
"maxRetries": 3
}
}YAML
# Docker Compose 설정
version: '3.8'
services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
environment:
- NODE_ENV=production
- DATABASE_URL=postgresql://user:pass@db:5432/mydb
depends_on:
- db
- redis
restart: unless-stopped
db:
image: postgres:16-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
environment:
POSTGRES_DB: mydb
POSTGRES_USER: user
POSTGRES_PASSWORD: pass
redis:
image: redis:7-alpine
ports:
- "6379:6379"
volumes:
postgres_data:📐 Mermaid 다이어그램
플로우차트 (Flowchart)
flowchart TD
A[🏠 시작] --> B{로그인 여부?}
B -->|Yes| C[✅ 대시보드]
B -->|No| D[🔑 로그인 페이지]
D --> E{인증 성공?}
E -->|Yes| C
E -->|No| F[❌ 에러 메시지]
F --> D
C --> G[📊 데이터 조회]
C --> H[⚙️ 설정]
C --> I[📝 콘텐츠 관리]
G --> J[📈 리포트 생성]
I --> K[✏️ 글 작성]
I --> L[🗑️ 글 삭제]
style A fill:#4CAF50,color:#fff
style C fill:#2196F3,color:#fff
style F fill:#f44336,color:#fff시퀀스 다이어그램 (Sequence Diagram)
sequenceDiagram
actor User as 👤 사용자
participant FE as 🖥️ 프론트엔드
participant API as ⚙️ API 서버
participant DB as 🗄️ 데이터베이스
participant Cache as 📦 Redis
User->>FE: 로그인 요청
FE->>API: POST /api/auth/login
API->>DB: 사용자 조회
DB-->>API: 사용자 정보
API->>API: 비밀번호 검증
API->>Cache: 세션 저장
Cache-->>API: OK
API-->>FE: JWT 토큰 반환
FE-->>User: 로그인 성공 🎉
Note over User,Cache: 이후 API 요청 시
User->>FE: 데이터 요청
FE->>API: GET /api/data (+ JWT)
API->>Cache: 캐시 확인
alt 캐시 히트
Cache-->>API: 캐시된 데이터
else 캐시 미스
API->>DB: 데이터 조회
DB-->>API: 조회 결과
API->>Cache: 캐시 저장
end
API-->>FE: 데이터 응답
FE-->>User: 화면 렌더링클래스 다이어그램 (Class Diagram)
classDiagram
class User {
+int id
+String name
+String email
+UserRole role
+login()
+logout()
+updateProfile()
}
class Post {
+int id
+String title
+String content
+Date createdAt
+publish()
+archive()
}
class Comment {
+int id
+String body
+Date createdAt
+edit()
+delete()
}
class Category {
+int id
+String name
+String slug
}
User "1" --> "*" Post : 작성
User "1" --> "*" Comment : 작성
Post "1" --> "*" Comment : 포함
Post "*" --> "*" Category : 분류ER 다이어그램 (Entity Relationship)
erDiagram
USERS ||--o{ ORDERS : "주문하다"
USERS ||--o{ REVIEWS : "작성하다"
ORDERS ||--|{ ORDER_ITEMS : "포함하다"
PRODUCTS ||--o{ ORDER_ITEMS : "주문되다"
PRODUCTS ||--o{ REVIEWS : "리뷰받다"
CATEGORIES ||--o{ PRODUCTS : "분류하다"
USERS {
int id PK
string name
string email UK
string password
date created_at
}
PRODUCTS {
int id PK
string name
int price
int stock
int category_id FK
}
ORDERS {
int id PK
int user_id FK
string status
int total_amount
date ordered_at
}
ORDER_ITEMS {
int id PK
int order_id FK
int product_id FK
int quantity
int unit_price
}상태 다이어그램 (State Diagram)
stateDiagram-v2
[*] --> 작성중
작성중 --> 검토중: 제출
검토중 --> 승인됨: 승인
검토중 --> 반려됨: 반려
반려됨 --> 작성중: 수정
승인됨 --> 게시됨: 게시
게시됨 --> 보관됨: 보관
보관됨 --> 게시됨: 복원
게시됨 --> [*]: 삭제
state 검토중 {
[*] --> 1차검토
1차검토 --> 2차검토: 통과
2차검토 --> [*]: 완료
}간트 차트 (Gantt Chart)
gantt
title 프로젝트 개발 일정
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 기획
요구사항 분석 :done, req, 2024-01-01, 7d
화면 설계 :done, design, after req, 5d
기술 스택 결정 :done, tech, after req, 3d
section 개발
DB 설계 :active, db, after design, 5d
API 개발 :active, api, after db, 14d
프론트엔드 개발 : fe, after db, 18d
통합 테스트 : test, after api, 7d
section 배포
스테이징 배포 : staging, after test, 3d
프로덕션 배포 :crit, prod, after staging, 2d
모니터링 : monitor, after prod, 7d파이 차트 (Pie Chart)
pie title 기술 스택 사용 비율
"React" : 35
"Vue.js" : 25
"Angular" : 15
"Svelte" : 10
"Next.js" : 10
"기타" : 5Git 그래프 (Git Graph)
gitGraph
commit id: "init"
commit id: "setup"
branch develop
checkout develop
commit id: "feat: 로그인"
commit id: "feat: 회원가입"
branch feature/dashboard
checkout feature/dashboard
commit id: "feat: 대시보드 UI"
commit id: "feat: 차트 추가"
checkout develop
merge feature/dashboard id: "merge: 대시보드"
branch feature/settings
checkout feature/settings
commit id: "feat: 설정 페이지"
checkout develop
merge feature/settings id: "merge: 설정"
checkout main
merge develop id: "release: v1.0.0" tag: "v1.0.0"
commit id: "hotfix: 버그수정"마인드맵 (Mindmap)
mindmap
root((웹 개발))
프론트엔드
HTML/CSS
JavaScript
React
Vue.js
TypeScript
백엔드
Node.js
Python
Java
Go
데이터베이스
MySQL
PostgreSQL
MongoDB
DevOps
Docker
Kubernetes
CI/CD
AWS
도구
Git
VS Code
Figma🧮 수학 수식 (Math - KaTeX/LaTeX)
인라인 수식: $E = mc^2$
블록 수식:
$$
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) , e^{2\pi i \xi x} , d\xi
$$
$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$
📌 기타 문법
각주 (Footnotes)
이것은 각주가 있는 문장입니다[^1].
또 다른 각주입니다[^note].
[^1]: 첫 번째 각주 내용입니다.
[^note]: 이름이 있는 각주도 가능합니다.
정의 목록 (Definition List)
마크다운
: 경량 마크업 언어로, 텍스트를 HTML로 변환합니다.
Mermaid
: 텍스트 기반의 다이어그램 생성 도구입니다.
축약어 (Abbreviation)
HTML은 웹의 기본 마크업 언어입니다.
*[HTML]: HyperText Markup Language
이모지
🎉 🚀 💡 ⚡ ✅ ❌ 🔥 💻 📱 🎨 🔧 📊 🗂️ 🏆 👍
수평선 스타일
키보드 키
Ctrl
+
Shift
+
P
로 명령 팔레트를 엽니다.
접기/펼치기 (Collapsible)
📂 클릭하면 펼쳐집니다
숨겨진 내용이 여기에 표시됩니다.
- 항목 1
- 항목 2
- 항목 3
console.log("숨겨진 코드!");경고/알림 블록 (GitHub Style Alerts)
[!NOTE]
참고할 유용한 정보입니다.
[!TIP]
더 나은 결과를 위한 팁입니다.
[!IMPORTANT]
꼭 알아야 할 중요한 정보입니다.
[!WARNING]
주의가 필요한 내용입니다.
[!CAUTION]
위험할 수 있는 행동에 대한 경고입니다.
✨ 이 문서는 마크다운의 거의 모든 문법을 포함하고 있습니다.
렌더러에 따라 일부 문법이 지원되지 않을 수 있습니다.
'티스토리' 카테고리의 다른 글
| 티스토리 스킨에 Mermaid 다이어그램 적용하기 (0) | 2026.04.17 |
|---|---|
| mermaid 코드 (0) | 2026.04.17 |
| 티스토리 hello 스킨 사용 (0) | 2026.04.17 |