표 문법

표는 Markdown 확장 문법의 중요한 부분으로, 데이터를 구조화된 방식으로 표시하는 데 사용됩니다.

기본 표 문법

간단한 표

파이프 |를 사용하여 열을 구분하고 -를 사용하여 헤더 구분 행을 만듭니다:

markdown

| 이름  | 나이 | 직업 |
|-------|-----|------------|
| 장    | 25  | 엔지니어   |
| 이    | 30  | 디자이너   |
| 왕    | 28  | 제품 관리자 |

렌더링된 출력:

이름	나이	직업
장	25	엔지니어
이	30	디자이너
왕	28	제품 관리자

표 정렬

콜론 :을 사용하여 열 정렬을 제어합니다:

markdown

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:-----------|:------------:|------------:|
| 내용 1  | 내용 1    | 내용 1   |
| 내용 2  | 내용 2    | 내용 2   |
| 내용 3  | 내용 3    | 내용 3   |

렌더링된 출력:

왼쪽 정렬	가운데 정렬	오른쪽 정렬
내용 1	내용 1	내용 1
내용 2	내용 2	내용 2
내용 3	내용 3	내용 3

정렬 세부사항

정렬 문법

문법	정렬	예시
`---`	왼쪽 (기본값)	`
`:--:`	가운데	`
`--:`	오른쪽	`

숫자 데이터 표

오른쪽 정렬은 숫자를 표시하는 데 적합합니다:

markdown

| 제품 | 가격 | 판매량 | 매출 |
|:--------|------:|------:|--------:|
| A       | ¥99   | 1,250 | ¥123,750|
| B       | ¥199  | 856   | ¥170,344|
| C       | ¥299  | 432   | ¥129,168|
| **총계** |      | **2,538** | **¥423,262** |

렌더링된 출력:

제품	가격	판매량	매출
A	¥99	1,250	¥123,750
B	¥199	856	¥170,344
C	¥299	432	¥129,168
총계		2,538	¥423,262

표의 형식

인라인 형식

표 셀은 Markdown 인라인 형식을 지원합니다:

markdown

| 기능      | 상태      | 설명                |
|-------------|-------------|----------------------------|
| **로그인**   | ✅ 완료     | 사용자가 이메일로 로그인 가능 |
| *회원가입*  | 🚧 진행 중 | 타사 회원가입 지원 |
| `비밀번호 재설정` | ❌ 할 일 | 이메일로 비밀번호 재설정   |
| [사용자 센터](/) | ⏳ 계획됨 | 사용자 정보 관리 |

렌더링된 출력:

기능	상태	설명
로그인	✅ 완료	사용자가 이메일로 로그인 가능
회원가입	🚧 진행 중	타사 회원가입 지원
`비밀번호 재설정`	❌ 할 일	이메일로 비밀번호 재설정
사용자 센터	⏳ 계획됨	사용자 정보 관리

표의 코드

markdown

| 명령어 | 기능      | 예시           |
|---------|--------------|-------------------|
| `ls`    | 파일 목록   | `ls -la`          |
| `cd`    | 디렉토리 변경   | `cd /home/user`   |
| `mkdir` | 디렉토리 생성     | `mkdir new-folder`|
| `rm`    | 파일 삭제 | `rm -rf folder/`  |

렌더링된 출력:

명령어	기능	예시
`ls`	파일 목록	`ls -la`
`cd`	디렉토리 변경	`cd /home/user`
`mkdir`	디렉토리 생성	`mkdir new-folder`
`rm`	파일 삭제	`rm -rf folder/`

복잡한 표 예시

기술 비교 표

markdown

| 기능         | React | Vue | Angular |
|:---------------|:-----:|:---:|:-------:|
| **학습 곡선** | 중간 | 쉬움 | 어려움 |
| **성능**    | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **생태계**      | 풍부  | 좋음 | 완전함 |
| **기업 지원** | Facebook | 독립적 | Google |
| **TypeScript**     | ✅    | ✅   | ✅ 내장 |
| **커뮤니티 활동** | 매우 높음 | 높음 | 중간 |

렌더링된 출력:

기능	React	Vue	Angular
학습 곡선	중간	쉬움	어려움
성능	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
생태계	풍부	좋음	완전함
기업 지원	Facebook	독립적	Google
TypeScript	✅	✅	✅ 내장
커뮤니티 활동	매우 높음	높음	중간

API 문서 표

markdown

| 매개변수 | 타입     | 필수 | 기본값   | 설명                |
|-----------|----------|:--------:|-----------|----------------------------|
| `id`      | `number` | ✅       | -         | 고유 사용자 식별자     |
| `name`    | `string` | ✅       | -         | 사용자 이름                  |
| `email`   | `string` | ✅       | -         | 사용자 이메일 주소         |
| `age`     | `number` | ❌       | `null`    | 사용자 나이                   |
| `avatar`  | `string` | ❌       | `"/default.jpg"` | 아바타 URL         |
| `status`  | `enum`   | ❌       | `"active"` | 계정 상태: `active` \| `inactive` |

렌더링된 출력:

매개변수	타입	필수	기본값	설명
`id`	`number`	✅	-	고유 사용자 식별자
`name`	`string`	✅	-	사용자 이름
`email`	`string`	✅	-	사용자 이메일 주소
`age`	`number`	❌	`null`	사용자 나이
`avatar`	`string`	❌	`"/default.jpg"`	아바타 URL
`status`	`enum`	❌	`"active"`	계정 상태: `active` \| `inactive`

표 형식 팁

이모지 사용

markdown

| OS      | 지원 | 참고      |
|---------|:-------:|-----------|
| Windows | ✅      | 완전 지원 |
| macOS   | ✅      | 완전 지원 |
| Linux   | ⚠️      | 부분 지원 |
| iOS     | ❌      | 지원하지 않음 |
| Android | 🚧      | 개발 중 |

렌더링된 출력:

OS	지원	참고
Windows	✅	완전 지원
macOS	✅	완전 지원
Linux	⚠️	부분 지원
iOS	❌	지원하지 않음
Android	🚧	개발 중

사용자 정의 뱃지

markdown

| 프로젝트 | 상태 | 버전 |
|---------|--------|---------|
| React   | ![안정](https://img.shields.io/badge/상태-안정-green) | `v18.2.0` |
| Vue     | ![안정](https://img.shields.io/badge/상태-안정-green) | `v3.3.0`  |
| Angular | ![베타](https://img.shields.io/badge/상태-베타-orange)    | `v16.0.0` |

빈 셀 처리

빈 내용 표현

markdown

| 항목 | Q1   | Q2   | Q3   | Q4   |
|------|:----:|:----:|:----:|:----:|
| 매출 | 1M   | 1.2M | -    | -    |
| 지출 | 800K | 900K | 950K | -    |
| 이익  | 200K | 300K |      |      |

렌더링된 출력:

항목	Q1	Q2	Q3	Q4
매출	1M	1.2M	-	-
지출	800K	900K	950K	-
이익	200K	300K

일반적인 오류 및 해결 방법

1. 파이프 정렬 오류

markdown

❌ 잘못된 예:
| 이름 | 나이|직업|
|------|----|----------|
|장|25|엔지니어|

✅ 올바른 예:
| 이름 | 나이 | 직업 |
|------|-----|------------|
| 장 | 25  | 엔지니어   |

2. 구분 행 누락

markdown

❌ 잘못된 예:
| 이름 | 나이 | 직업 |
| 장 | 25 | 엔지니어 |

✅ 올바른 예:
| 이름 | 나이 | 직업 |
|------|-----|------------|
| 장 | 25  | 엔지니어   |

3. 열 개수 불일치

markdown

❌ 잘못된 예:
| 이름 | 나이 | 직업 |
|------|-----|------------|
| 장 | 25 |  ← 세 번째 열 누락

✅ 올바른 예:
| 이름 | 나이 | 직업 |
|------|-----|------------|
| 장 | 25  | 엔지니어   |

4. 특수 문자 처리

markdown

❌ 문제:
| 가격 | 설명 |
|-------|-------------|
| $100|세금 포함 |  ← 파이프 잘못 사용

✅ 해결:
| 가격 | 설명 |
|-------|-------------|
| $100 | 세금 포함 |
| $200 | 가격\|세금 포함 |  ← 파이프 이스케이프

고급 표 기능

HTML 확장

markdown

<table>
  <tr>
    <th colspan="2">병합된 열 헤더</th>
    <th>일반 열</th>
  </tr>
  <tr>
    <td rowspan="2">병합된 행</td>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
  <tr>
    <td>데이터 3</td>
    <td>데이터 4</td>
  </tr>
</table>

렌더링된 출력:

병합된 열 헤더		일반 열
병합된 행	데이터 1	데이터 2
병합된 행	데이터 3	데이터 4

사용자 정의 표 스타일

markdown

<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">제품</th>
    <th style="border: 1px solid #ddd; padding: 8px;">가격</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
  </tr>
</table>

실제 응용 사례

1. 프로젝트 관리

markdown

## 작업 진행 표

| 작업 | 소유자 | 시작일 | 종료일 | 상태 | 완료율 |
|------|-------|------------|----------|:------:|:----------:|
| 요구사항 분석 | 장 | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| UI 디자인 | 이 | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| 프론트엔드 개발 | 왕 | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| 백엔드 개발 | 조 | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| 테스트 | 손 | 2023-11-06 | 2023-11-12 | ⏳ | 0% |

2. 제품 비교

markdown

## 구독 계획 비교

| 기능 | 무료 | 프로 | 엔터프라이즈 |
|---------|:----:|:---:|:----------:|
| **사용자 제한** | 5 | 50 | 무제한 |
| **저장소** | 1GB | 100GB | 1TB |
| **API 호출** | 1000/월 | 100k/월 | 무제한 |
| **지원** | 커뮤니티 | 이메일 | 전문 지원 |
| **SLA** | - | 99.9% | 99.99% |
| **가격** | 무료 | ¥99/월 | ¥999/월 |
| | [선택](/) | [선택](/) | [연락처](/) |

3. 재무 보고서

markdown

## 월별 재무 보고서

| 항목 | 1월 | 2월 | 3월 | 총계 |
|------|-----:|-----:|-----:|------:|
| **수입** |     |     |     |      |
| 제품 판매 | 50,000 | 55,000 | 60,000 | 165,000 |
| 서비스 수입 | 20,000 | 22,000 | 25,000 | 67,000 |
| 기타 수입 | 2,000 | 1,500 | 3,000 | 6,500 |
| *부분 합계* | *72,000* | *78,500* | *88,000* | *238,500* |
| **지출** |     |     |     |      |
| 급여 | 30,000 | 30,000 | 30,000 | 90,000 |
| 사무실 임대료 | 8,000 | 8,000 | 8,000 | 24,000 |
| 마케팅 | 10,000 | 12,000 | 15,000 | 37,000 |
| *부분 합계* | *48,000* | *50,000* | *53,000* | *151,000* |
| **순이익** | **24,000** | **28,500** | **35,000** | **87,500** |

모범 사례

1. 단순함을 유지하세요

markdown

✅ 권장: 단순하고 명확
| 항목 | 상태 |
|------|--------|
| A    | 완료   |
| B    | 진행 중 |

❌ 권장하지 않음: 정보 과부하
| 프로젝트 이름 | 현재 상태 | 상세 설명 | 소유자 | 시작일 | 종료일 | 비고 |

2. 의미 있는 헤더 사용

markdown

✅ 권장: 설명적 헤더
| 프로그래밍 언어 | 난이도 | 응용 |

❌ 권장하지 않음: 모호한 헤더
| 항목1 | 항목2 | 항목3 |

3. 적절한 정렬 사용

markdown

✅ 권장: 숫자는 오른쪽 정렬
| 제품 | 가격 | 수량 |
|:--------|------:|--------:|
| A       | ¥100  | 50      |

✅ 권장: 텍스트는 왼쪽 정렬
| 이름 | 부서 | 직책 |
|:-----|:-----------|:--------|
| 장 | 기술      | 엔지니어 |

HTML 출력

Markdown 표는 HTML로 변환됩니다:

markdown

| 이름 | 나이 |
|------|-----|
| 장 | 25 |

다음과 같이 변환됩니다:

html

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>장</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

연습

다음 표를 만들어보세요:

팀원 소개 표
제품 가격 비교 표
프로젝트 진행 추적 표
기술 스택 평가 표

표 문법

기본 표 문법

간단한 표

표 정렬

정렬 세부사항

정렬 문법

숫자 데이터 표

표의 형식

인라인 형식

표의 코드

복잡한 표 예시

기술 비교 표

API 문서 표

표 형식 팁

이모지 사용

사용자 정의 뱃지

빈 셀 처리

빈 내용 표현

일반적인 오류 및 해결 방법

1. 파이프 정렬 오류

2. 구분 행 누락

3. 열 개수 불일치

4. 특수 문자 처리

고급 표 기능

HTML 확장

사용자 정의 표 스타일

실제 응용 사례

1. 프로젝트 관리

2. 제품 비교

3. 재무 보고서

모범 사례

1. 단순함을 유지하세요

2. 의미 있는 헤더 사용

3. 적절한 정렬 사용

HTML 출력

관련 문법

연습

추천 도구

표 생성기

표 꾸미기

표 문법 ​

기본 표 문법 ​

간단한 표 ​

표 정렬 ​

정렬 세부사항 ​

정렬 문법 ​

숫자 데이터 표 ​

표의 형식 ​

인라인 형식 ​

표의 코드 ​

복잡한 표 예시 ​

기술 비교 표 ​

API 문서 표 ​

표 형식 팁 ​

이모지 사용 ​

사용자 정의 뱃지 ​

빈 셀 처리 ​

빈 내용 표현 ​

일반적인 오류 및 해결 방법 ​

1. 파이프 정렬 오류 ​

2. 구분 행 누락 ​

3. 열 개수 불일치 ​

4. 특수 문자 처리 ​

고급 표 기능 ​

HTML 확장 ​

사용자 정의 표 스타일 ​

실제 응용 사례 ​

1. 프로젝트 관리 ​

2. 제품 비교 ​

3. 재무 보고서 ​

모범 사례 ​

1. 단순함을 유지하세요 ​

2. 의미 있는 헤더 사용 ​

3. 적절한 정렬 사용 ​

HTML 출력 ​

관련 문법 ​

연습 ​

추천 도구 ​

표 생성기 ​

표 꾸미기 ​

표 문법

기본 표 문법

간단한 표

표 정렬

정렬 세부사항

정렬 문법

숫자 데이터 표

표의 형식

인라인 형식

표의 코드

복잡한 표 예시

기술 비교 표

API 문서 표

표 형식 팁

이모지 사용

사용자 정의 뱃지

빈 셀 처리

빈 내용 표현

일반적인 오류 및 해결 방법

1. 파이프 정렬 오류

2. 구분 행 누락

3. 열 개수 불일치

4. 특수 문자 처리

고급 표 기능

HTML 확장

사용자 정의 표 스타일

실제 응용 사례

1. 프로젝트 관리

2. 제품 비교

3. 재무 보고서

모범 사례

1. 단순함을 유지하세요

2. 의미 있는 헤더 사용

3. 적절한 정렬 사용

HTML 출력

관련 문법

연습

추천 도구

표 생성기

표 꾸미기