정렬 방식 상세 설명: 왼쪽 정렬, 가운데, 오른쪽 정렬
이 과정을 마치면 할 수 있는 것
- 세 가지 정렬 방식의 구문과 효과를 마스터합니다
- 구분 행이 정렬 방식을 지정하는 방법을 이해합니다
- 셀 패딩 알고리즘의 작동 원리를 알아봅니다
- 구분 행이 자동으로 너비를 조정하는 이유를 이해합니다
현재 겪고 있는 문제
AI가 테이블을 생성했지만 열 정렬이 아름답지 않습니다:
| 이름 | 타입 | 설명 |
|--- | --- | ---|
| 사용자 | string | 사용자명 |
| 나이 | number | 나이 |
| is_active | boolean | 활성화 여부 |특정 열을 가운데 또는 오른쪽으로 정렬하여 테이블을 더 읽기 쉽게 만들고 싶지만 지정 방법을 모릅니다.
언제 사용하나요
- 테이블의 특정 열을 가운데로 정렬하고 싶을 때 (예: 상태, 태그)
- 숫자 열을 오른쪽으로 정렬하고 싶을 때 (크기 비교 용이)
- 텍스트 열을 왼쪽으로 정렬하고 싶을 때 (기본 동작)
- 정렬의 구현 원리를 이해하고 싶을 때
핵심 아이디어: 구분 행이 정렬 방식을 결정합니다
Markdown 테이블의 정렬 방식은 각 행에 작성하는 것이 아니라 구분 행을 통해 통일적으로 지정합니다.
구분 행의 구문은: :?-+:? (콜론 + 하이픈 + 콜론)
| 콜론 위치 | 정렬 방식 | 예시 |
|---|---|---|
| 양쪽 모두 | 가운데 정렬 | :---: |
| 오른쪽만 | 오른쪽 정렬 | ---: |
| 없음 | 왼쪽 정렬 | --- 또는 :--- |
구분 행의 각 셀은 한 열의 정렬 방식에 해당하며, 플러그인은 이 규칙에 따라 전체 열을 포맷합니다.
따라 해보세요: 세 가지 정렬 방식
1단계: 왼쪽 정렬 (기본)
왜 사용하나요
왼쪽 정렬은 테이블의 기본 동작이며 텍스트 데이터에 적합합니다.
구문
| 이름 | 설명 |
| :--- | :--- | ← 왼쪽에 콜론이 있거나 콜론이 없으면 왼쪽 정렬
| 사용자 | 사용자명 |예상 결과
| 이름 | 설명 |
|--- | ---|
| 사용자 | 사용자명 |구분 행은 :--- (왼쪽 정렬 표시)로 표시되며 텍스트는 왼쪽으로 정렬됩니다.
소스 코드 구현
// getAlignment 함수: 정렬 방식 파싱
function getAlignment(delimiterCell: string): "left" | "center" | "right" {
const trimmed = delimiterCell.trim()
const hasLeftColon = trimmed.startsWith(":")
const hasRightColon = trimmed.endsWith(":")
if (hasLeftColon && hasRightColon) return "center"
if (hasRightColon) return "right"
return "left" // 기본값으로 left 반환
}소스 코드 위치: index.ts:141-149
논리 설명
- 양쪽 모두 콜론이 있음 (
:---:) →"center"반환 - 오른쪽만 콜론이 있음 (
---:) →"right"반환 - 그 외 경우 (
---또는:---) →"left"반환 (기본값)
2단계: 가운데 정렬
왜 사용하나요
가운데 정렬은 상태 태그, 짧은 텍스트, 제목 등 시각적으로 가운데에 위치해야 하는 내용에 적합합니다.
구문
| 이름 | 상태 | 설명 |
|--- | --- | --- | ---|
| 사용자 | 활성 | 사용자명 |예상 결과
| 이름 | 상태 | 설명 |
|--- | --- | ---|
| 사용자 | 활성 | 사용자명 |중간 열의 "활성"은 가운데에 표시되며 구분 행은 :---: (가운데 정렬 표시)로 표시됩니다.
구분 행 포맷팅 원리
구분 행 셀의 포맷팅은 formatSeparatorCell 함수가 처리합니다:
function formatSeparatorCell(width: number, align: "left" | "center" | "right"): string {
if (align === "center") return ":" + "-".repeat(Math.max(1, width - 2)) + ":"
if (align === "right") return "-".repeat(Math.max(1, width - 1)) + ":"
return "-".repeat(width)
}소스 코드 위치: index.ts:213-217
가운데 정렬의 수학적 원리
가운데 정렬의 구분 행 형식은: : + 하이픈 + :
| 목표 너비 | 계산 공식 | 결과 |
|---|---|---|
| 3 | : + -*1 +:` | :-: |
| 5 | : + -*3 + : | :---: |
| 10 | : + -*8 + : | :--------: |
Math.max(1, width - 2)는 최소 1개의 하이픈을 보장하여 너비가 2일 때 :: (구분 효과 없음)가 되는 것을 방지합니다.
3단계: 오른쪽 정렬
왜 사용하나요
오른쪽 정렬은 숫자, 금액, 날짜 등 오른쪽에서 왼쪽으로 비교해야 하는 데이터에 적합합니다.
구문
| 이름 | 가격 | 수량 |
| :--- | ---: | ---: | ← 오른쪽에 콜론이 있으면 오른쪽 정렬
| 상품 | 99.9 | 100 |예상 결과
| 이름 | 가격 | 수량 |
|--- | --- | ---|
| 상품 | 99.9 | 100 |숫자는 오른쪽으로 정렬되어 크기 비교가 용이합니다.
오른쪽 정렬의 수학적 원리
오른쪽 정렬의 구분 행 형식은: 하이픈 + :
| 목표 너비 | 계산 공식 | 결과 |
|---|---|---|
| 3 | -*2 + : | --: |
| 5 | -*4 + : | ----: |
| 10 | -*9 + : | ---------: |
Math.max(1, width - 1)는 최소 1개의 하이픈을 보장합니다.
셀 패딩 알고리즘
플러그인은 셀 양쪽에 얼마나 많은 공백을 채워야 할지 어떻게 결정할까요? 답은 padCell 함수에 있습니다.
소스 코드 구현
function padCell(text: string, width: number, align: "left" | "center" | "right"): string {
const displayWidth = calculateDisplayWidth(text) // 표시 너비 계산
const totalPadding = Math.max(0, width - displayWidth)
if (align === "center") {
const leftPad = Math.floor(totalPadding / 2)
const rightPad = totalPadding - leftPad
return " ".repeat(leftPad) + text + " ".repeat(rightPad)
} else if (align === "right") {
return " ".repeat(totalPadding) + text
} else {
return text + " ".repeat(totalPadding)
}
}소스 코드 위치: index.ts:198-211
패딩 규칙
| 정렬 방식 | 왼쪽 패딩 | 오른쪽 패딩 | 예시 (목표 너비 10, 텍스트 "abc") |
|---|---|---|---|
| 왼쪽 정렬 | 0 | totalPadding | abc |
| 가운데 정렬 | floor(total/2) | total - floor(total/2) | abc |
| 오른쪽 정렬 | totalPadding | 0 | abc |
가운데 정렬의 수학적 세부사항
Math.floor(totalPadding / 2)는 왼쪽 패딩이 정수가 되도록 하며 남은 공간은 오른쪽에 추가합니다.
| 목표 너비 | 텍스트 너비 | totalPadding | 왼쪽 패딩 | 오른쪽 패딩 | 결과 |
|---|---|---|---|---|---|
| 10 | 3 | 7 | 3 (7÷2=3.5→3) | 4 (7-3) | abc |
| 11 | 3 | 8 | 4 (8÷2=4) | 4 (8-4) | abc |
| 12 | 3 | 9 | 4 (9÷2=4.5→4) | 5 (9-4) | abc |
완전한 예시
입력 테이블 (다른 열에 다른 정렬 방식 지정):
| 이름 | 상태 | 가격 | 설명 |
|--- | --- | --- | ---|
| 상품A | 활성 | 99.9 | 이것은 상품입니다 |
| 상품B | 비활성 | 199.0 | 이것은 다른 상품입니다 |포맷팅 결과:
| 이름 | 상태 | 가격 | 설명 |
|--- | --- | --- | ---|
| 상품A | 활성 | 99.9 | 이것은 상품입니다 |
| 상품B | 비활성 | 199.0 | 이것은 다른 상품입니다 |각 열의 정렬 방식:
| 열 이름 | 구분 행 구문 | 정렬 방식 | 설명 |
|---|---|---|---|
| 이름 | :--- | 왼쪽 정렬 | 텍스트 왼쪽 정렬 |
| 상태 | :---: | 가운데 정렬 | 텍스트 가운데 정렬 |
| 가격 | ---: | 오른쪽 정렬 | 숫자 오른쪽 정렬 |
| 설명 | :--- | 왼쪽 정렬 | 텍스트 왼쪽 정렬 |
체크포인트
이 과정을 완료한 후 다음 질문에 답할 수 있어야 합니다:
- [ ] 가운데 정렬을 지정하는 방법은? (답: 구분 행에
:---:사용) - [ ] 오른쪽 정렬을 지정하는 방법은? (답: 구분 행에
---:사용) - [ ] 왼쪽 정렬의 기본 구문은 무엇인가요? (답:
---또는:---) - [ ] 가운데 정렬에
Math.floor(totalPadding / 2)를 사용하는 이유는? (답: 왼쪽 패딩이 정수가 되도록 하고 남은 공간을 오른쪽에 추가하기 위해) - [ ] 구분 행의
:---:는 무엇을 의미하나요? (답: 가운데 정렬 표시, 양쪽에 각각 콜론 하나, 중간은 하이픈)
주의사항
일반적인 오해
오해: 모든 행에 정렬 방식을 지정해야 한다
사실: 아닙니다. 구분 행만 정렬 방식을 지정하면 데이터 행은 자동으로 열별로 정렬됩니다.
구분 행은 "설정"이고 데이터 행은 "내용"이므로 설정 한 줄로 충분합니다.
기억하세요
구분 행의 콜론 위치는 열과 반드시 일치해야 합니다.
| 잘못된 예시 | 문제 |
|---|---|
| ` | :--- |
| ` | :--- |
구분 행의 열 수는 헤더와 데이터 행의 열 수와 일치해야 합니다!
이 과정 요약
| 정렬 방식 | 구분 행 구문 | 적용 시나리오 |
|---|---|---|
| 왼쪽 정렬 | --- 또는 :--- | 텍스트, 설명 데이터 (기본값) |
| 가운데 정렬 | :---: | 상태 태그, 짧은 텍스트, 제목 |
| 오른쪽 정렬 | ---: | 숫자, 금액, 날짜 |
핵심 함수:
| 함수 | 역할 | 소스 코드 위치 |
|---|---|---|
getAlignment() | 구분 행 셀의 정렬 방식 파싱 | 141-149 |
padCell() | 셀을 지정된 너비로 패딩 | 198-211 |
formatSeparatorCell() | 구분 행 셀 포맷팅 | 213-217 |
기억 공식:
양쪽 콜론은 가운데, 오른쪽 콜론은 오른쪽 정렬, 콜론 없으면 기본 왼쪽, 구분 행에서 규칙 정하기.
다음 과정 예고
다음 과정에서는 **일반적인 문제: 테이블이 포맷팅되지 않을 때**를 학습합니다.
배우게 될 내용:
invalid structure오류를 빠르게 찾는 방법- 설정 오류 문제 해결 방법
- 일반적인 테이블 문제 해결 방법
부록: 소스 코드 참조
클릭하여 소스 코드 위치 펼치기
업데이트 시간: 2026-01-26
| 기능 | 파일 경로 | 행 번호 |
|---|---|---|
| 정렬 방식 파싱 | index.ts | 141-149 |
| 셀 패딩 | index.ts | 198-211 |
| 구분 행 포맷팅 | index.ts | 213-217 |
| 정렬 방식 적용 | index.ts | 107-113 |
핵심 함수:
getAlignment(delimiterCell: string): 구분 행 셀의 정렬 방식 파싱- 반환:
"left"|"center"|"right" - 논리: 양쪽 모두 콜론 → 가운데, 오른쪽만 콜론 → 오른쪽 정렬, 그 외 → 왼쪽 정렬
- 반환:
padCell(text, width, align): 셀을 지정된 너비로 패딩- 표시 너비와 목표 너비의 차이 계산
- 정렬 방식에 따라 좌우 패딩 분배
- 가운데 정렬은
Math.floor(totalPadding / 2)로 왼쪽 패딩이 정수가 되도록 함
formatSeparatorCell(width, align): 구분 행 셀 포맷팅- 가운데:
:+-*(width-2) +: - 오른쪽 정렬:
-*(width-1) +: - 왼쪽 정렬:
-*width Math.max(1, ...)로 최소 1개의 하이픈 보장
- 가운데: