2024-04-15
마크다운에서 테이블을 만드는 것은 웹에서 데이터의 조직 및 제시를 향상시키는 간단한 과정입니다. 이 가이드는 기본 구문에서 고급 형식 옵션까지 당신이 알아야 할 모든 것을 다룹니다:
Markdown Toolbox
|와 대시 -를 사용하여 간단한 테이블을 만듭니다.:을 사용하여 셀 내의 텍스트 정렬을 제어합니다.& 및 |와 같은 기호를 포함하는 방법을 배웁니다.이 가이드를 모두 마친 후에는 마크다운에서 명확하고 유익한 테이블을 만들 수 있는 능력을 갖추게 되어 당신의 콘텐츠가 더 구조화되고 접근성 있게 될 것입니다.
대시 - 행을 조정하여 열에서 텍스트를 어떻게 정렬할지 결정할 수 있습니다:
:---: = 텍스트가 왼쪽으로 정렬됨:--: = 텍스트가 가운데 정렬됨---: = 텍스트가 오른쪽으로 정렬됨| 왼쪽 | 가운데 | 오른쪽 |
| :--- | :----: | ----: |
| 텍스트 | 텍스트 | 텍스트 |
예를 들어:
| 왼쪽 | 가운데 | 오른쪽 |
|---|---|---|
| 텍스트 | 텍스트 | 텍스트 |
테이블 셀 내에서 일반 마크다운 트릭을 사용하여 텍스트를 굵게, 기울기, 링크 추가, 또는 코드로 만들 수 있습니다:
** 또는 __ 사용* 또는 _ 사용인라인 코드 블록예를 들어:
| 이름 | 설명 |
|---|---|
| 존 | 배우는 학습 새로운 것들을 좋아함 |
| 사라 | 멋진 프로젝트에서 일하는 엔지니어 |
이것은 마크다운에서 테이블을 만드는 기본을 보여줍니다. 약간의 연습이 있으면 이들은 웹 페이지나 문서를 위해 데이터를 명확하게 구성하는 훌륭한 방법이 될 수 있습니다.
마크다운에서 테이블을 만들 때, 때때로 마크다운 형식이 일반적으로 다른 용도로 사용하는 특수 문자를 포함하려고 할 수 있습니다. 예를 들어, 마크다운이 열을 구분하기 위해 파이프 |를 사용하므로, 셀 내에 파이프 기호를 보여주고 싶다면 이를 우회해야 합니다.
이를 수행하는 방법은 몇 가지 있습니다:
한 가지 방법은 HTML 문자 엔티티를 사용하는 것입니다. 이러한 것은 HTML 또는 마크다운에서 다른 의미를 갖는 문자를 보여줄 수 있게 해주는 특수 코드입니다. 예를 들어 ampersand &에 대해 &을, 파이프 |에 대해 |을 사용합니다.
여기 예시가 있습니다:
| 문자 | 엔티티 | 예시 렌더링 |
|---|---|---|
| 앰퍼샌드 | & |
R&D |
| 파이프 | | |
Column|Header |
HTML 문자 엔티티의 전체 목록을 여기에서 찾을 수 있습니다.
다른 방법은 특수 문자 앞에 백슬래시 \를 넣는 것입니다. 이는 Markdown에 다음 문자를 일반 텍스트처럼 처리하라고 지시합니다.
\| = 파이프를 보여줍니다 |
\\ = 백슬래시를 보여줍니다 \
그러나 잊지 마세요, 백슬래시 사용이 마크다운 테이블의 모든 문자에 대해 작동하는 것은 아닙니다, 예를 들어 파이프 |는 작동하지 않습니다.
마지막으로, 특수 문자를 그대로 보여주기 위해 마크다운 코드 블록을 사용할 수 있습니다. 단순히 백틱 ` 안에 넣기만 하면 됩니다.
` | * | & | \ | | `` ``
이것은 다음과 같이 보입니다:
| * | & | \ | ` |
|---|---|---|---|
| * | & | \ | ` |
간단히 말해, HTML 엔티티나 백슬래시를 사용하여 특수 문자를 이스케이프하세요. 파이프와 다른 까다로운 기호의 경우 코드 블록이 그대로 보여주는 좋은 방법입니다.
마크다운은 다양한 스타일을 가지고 있으며, 각각의 테이블 처리 방식이 다릅니다. 이러한 스타일과 멋진 테이블 만드는 팁을 살펴보겠습니다:
GFM은 GitHub에서 볼 수 있는 것입니다. 이를 통해 테이블을 쉽게 만들 수 있습니다:
| 헤더 1 | 헤더 2 |
|----------|----------|
| 행 1a | 행 1b |
| 행 2a | 행 2b |
각 줄의 끝에 파이프 |를 삽입할 필요는 없지만, 실수를 피하려면 그렇게 하는 것이 좋습니다.
이 버전들은 텍스트 정렬과 같은 테이블에 대한 추가 옵션을 제공합니다:
| 오른쪽 | 왼쪽 | 기본 | 가운데 |
|------:|:-----|---------|:-----:|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
콜론 :을 사용하여 텍스트 정렬을 제어하세요.
CommonMark는 자체 테이블 구문이 없습니다. 테이블을 만들기 위해 HTML 태그를 사용해야 합니다.
GFM 및 유사한 형식에서, 측면 파이프 |를 항상 필요로 하지 않습니다:
헤더 1 | 헤더 2
--------- | ---------
행 1a | 행 1b
행 2a | 행 2b
이들을 생략하면 편집이 더 쉬워질 수 있지만, 있으며 오류를 방지하는 데 도움이 됩니다.
테이블이 더 깔끔하게 보이도록 열 폭을 맞춰보세요:
| 짧음 | 더 긴 예시 열 |
|-------|-----------------------|
| 텍스트 | 더 많은 예시 텍스트 |
이렇게 하면 테이블을 더 쉽게 읽을 수 있습니다.
처음부터 테이블을 만드는 것은 어렵습니다. 여기 당신을 도와줄 도구 몇 가지가 있습니다:
마크다운 테이블 생성기를 사용하면 코딩 없이 테이블을 만들 수 있습니다. 정보를 입력하면 코드를 제공합니다.
테이블 변환는 스프레드시트의 데이터를 빠르게 마크다운 테이블로 변환합니다.
Typora 마크다운 편집기는 테이블을 추가하고 스타일을 지정하는 간단한 방법이 있습니다.
일부 앱은 마크다운 테이블 작업을 쉽게 만듭니다:
Typora에는 테이블을 추가하고 변경하는 간단한 메뉴가 있습니다.
Zettlr에서는 기본 테이블을 삽입하고 바로 편집할 수 있습니다.
이러한 팁과 도구를 알면 마크다운 테이블 작업이 훨씬 더 원활해질 수 있습니다. 기억하세요, 목표는 정보를 명확하고 읽기 쉽게 만드는 것입니다.
마크다운을 사용하여 테이블을 만드는 실제 연습을 해봅시다. 여기 당신이 이 과정에 익숙해질 수 있도록 도와줄 몇 가지 간단한 연습 문제가 있습니다:
먼저, 다양한 과일을 목록으로 나열하는 간단한 테이블을 만들어 보겠습니다:
| 과일 | 색상 | 형태 |
| 과일 | 색상 | 형태 |
| - | - | - |
| 과일 | 색상 | 형태 |
| - | - | - |
| 사과 | 빨강 | 둥글다 |
| 과일 | 색상 | 형태 |
| - | - | - |
| 사과 | 빨강 | 둥글다 |
| 바나나 | 노랑 | 길다 |
| 오렌지 | 주황 | 둥글다 |
다음으로, 과일 테이블에 스타일을 추가하겠습니다:
**로 감싸 주세요:| **과일** | **색상** | **형태** |
| - | - | - |
| 바나나 | *노랑* | 길다 |
| 오렌지 | [오렌지](https://www.w3schools.com/colors/colors_names.asp) | 둥글다 |
조금 더 도전적인 내용을 위해, 이름, 직위 및 급여를 포함한 직원 테이블을 만들어 보겠습니다:
| **이름** | **직위** | **급여** |
| - | - | - |
| **이름** | **직위** | **급여** |
| - | - | - |
| 존 | 관리자 | $80,000 |
| 사라 | 개발자 | $60,000 |
| 리사 | 디자이너 | $50,000 |
| **이름** | **직위** | **급여** |
| - | - | ---: |
이 단계들을 연습하는 것은 마크다운 테이블 만드는 데 익숙해지는 좋은 방법입니다. 다양한 종류의 테이블을 만들어보고 형식 변경을 통해 무엇을 할 수 있는지 실험해 보세요.
마크다운에서 테이블을 편집하는 것은 다소 번거로울 수 있지만, 몇 가지 키보드 단축키를 알고 있으면 훨씬 쉽게 할 수 있습니다. 여러분의 작업을 빠르게 할 수 있는 단축키 목록은 다음과 같습니다:
Tab - 다음 셀로 이동Shift + Tab - 이전 셀로 돌아가기Enter - 다음 행으로 이동Ctrl/Cmd + Enter - 테이블 편집 중지Ctrl/Cmd + 화살표 키 - 셀 간에 쉽게 이동Ctrl/Cmd + l - 텍스트를 왼쪽으로 정렬Ctrl/Cmd + e - 텍스트를 가운데 정렬Ctrl/Cmd + r - 텍스트를 오른쪽으로 정렬Ctrl/Cmd + . - 특정 정렬 제거Alt + i - 위에 새 행 추가Alt + a - 아래에 새 행 추가Alt + j - 왼쪽에 열 추가Alt + l - 오른쪽에 열 추가Alt + Shift + i - 현재 행 제거Alt + Shift + a - 현재 행 제거Alt + Shift + j - 현재 열 제거Alt + Shift + l - 현재 열 제거Shift + 화살표 키 - 더 많은 셀 선택Ctrl/Cmd + Alt + 화살표 키 - 전체 행 또는 열 이동이 단축키에 익숙해지면 마크다운에서 테이블 작업을 더 빠르게 진행할 수 있습니다. 이 가이드를 쉽고 빠르게 참고하세요.
마크다운을 사용하여 테이블을 만들면 정보를 깔끔하게 정리하여 웹사이트의 정보를 구성할 수 있습니다. 익숙해지면 꽤 쉽습니다. 여기에 주의할 몇 가지 사항이 있습니다:
| 기호를 사용하세요. 헤더 행 아래에 대시 -를 넣어 텍스트가 어떻게 정렬되어야 하는지를 보여주세요.:을 추가하면 됩니다.계속 연습하면 곧 마크다운 테이블 만드는 것이 매우 수월해질 것입니다. 테이블을 간단하고 명확하게 유지하는 것이 중요합니다. 주요 목표는 모두가 이해하기 쉬운 방식으로 정보를 공유하는 것입니다. 마크다운 테이블은 데이터를 깔끔하고 간단하게 정리할 수 있기 때문에 이에 적합합니다.
마크다운에서 테이블을 만들려면, 파이프 | 기호를 사용하여 열을 만들고, 대시 -를 사용하여 헤더 아래 텍스트가 어떻게 정렬될지를 표시하고, 콜론 :을 사용하여 텍스트를 왼쪽, 가운데 또는 오른쪽으로 정렬하도록 설정합니다. 첫 번째 행에 헤더를 설정하고, 둘째 행에 대시를 추가하여 열을 정의한 후, 아래에 정보를 추가하세요. 쉽게 읽을 수 있도록 깔끔하게 유지하세요. 일부 마크다운 편집기는 테이블 형식을 더 쉽게 도와줄 수 있습니다.
테이블에서 텍스트 정렬을 위해:
:---:---:---:원하는 정렬을 하려는 열에 해당하는 두 번째 행의 대시를 변경하세요.
Typora 또는 Zettlr와 같은 많은 마크다운 편집기는 빈 테이블 구조를 빠르게 삽입하는 단축키가 있습니다. 예를 들어 Windows의 Typora에서는 Ctrl + T를 눌러 빈 테이블을 문서에 넣을 수 있습니다. 각 편집기의 가이드를 확인하여 특정 단축키를 알아보세요.
코드 블록을 들여쓰기 위해서는 코드 전후에 빈 줄을 추가하고, 코드의 각 줄을 최소 4개의 공백 또는 1개의 탭으로 들여쓰세요. 이러한 방식은 마크다운이 특수한 방식으로 포맷하도록 지시하며, 일반적으로 코드로 구분되는 다른 글꼴로 표시합니다.