Daily CS) Markup/Markdown

goldenGlow_21·2024년 12월 13일

Daily CS

목록 보기

19/50

Markup/Markdown

Markup / Markdown

Markup과 Markdown은 문서 작성 및 형식 지정을 위한 언어로, 각각 웹 콘텐츠와 간소화된 문서 작성을 위해 널리 사용된다. 평소에 Obsidian을 사용하는 입장에서 Markdown은 친숙한 편이나, Markup 같은 부분은 대강만 알고 있어 한번 조사해보고자 한다.

1. Markup과 Markdown의 개요

1.1 Markup과 Markdown의 정의와 목적

Markup은 문서의 구조와 내용을 정의하는 데 사용되는 언어로, 텍스트에 태그를 추가하여 정보를 부가하거나 형식을 지정하는 데 목적이 있다. 대표적인 Markup 언어로는 HTML(HyperText Markup Language) 와 XML(eXtensible Markup Language) 이 있다. Markup은 웹 페이지, 데이터 교환, 문서 형식화를 지원하며, 복잡한 콘텐츠 구조를 명확히 표현하는 데 중점을 둔다.

Markdown은 Markup의 간단한 대안으로, 텍스트 기반의 경량 언어다. 2004년, John Gruber가 쉽게 읽히고 쓰기 간단한 문서를 작성하기 위해 고안했다. Markdown은 간결한 문법으로 사용자가 텍스트를 작성하면서도 간단한 형식 지정(헤더, 리스트, 링크 등)을 추가할 수 있도록 설계되었다. 이 결과물을 HTML로 변환하여 웹 콘텐츠로 사용할 수 있다.

목적의 차이

Markup: 구조적이고 복잡한 데이터를 처리하고, 기계가 읽을 수 있도록 함
Markdown: 사람이 읽고 쓰기 쉬운 형식의 문서를 제공함

1.2 Markup과 Markdown의 차이점

Markup과 Markdown은 문서를 처리하는 방식에서 본질적인 차이를 보인다. Markdown은 간단한 문서 작성에 더 적합하며, HTML은 복잡한 레이아웃과 디자인을 구현하는 데 강점이 있다.

비교 표

특성	Markup (HTML, XML)	Markdown
문법 복잡성	비교적 복잡하며 태그로 구성됨	단순하고 직관적인 문법 사용
목적	문서의 구조 정의 및 기계 가독성 확보	간단한 문서 작성 및 HTML 변환
유연성	다양한 속성과 태그로 복잡한 형식 지원	제한된 형식 지원 (확장 가능)
사용 사례	웹 개발, 데이터 교환, 문서 처리	README, 블로그 작성, 노트
결과물	태그와 속성을 포함한 구조적 파일	텍스트 기반에서 HTML 변환

Markup (HTML)

<h1>제목</h1>
<p>이것은 문단입니다.</p>
<a href="https://example.com">링크</a>

Markdown

# 제목
이것은 문단입니다.  
[링크](https://example.com)

1.3 Markup과 Markdown의 역사적 배경

Markup의 역사는 1960년대까지 거슬러 올라간다. SGML(Standard Generalized Markup Language) 은 1986년에 ISO 표준으로 제정되었으며, HTML과 XML의 기반이 되었다.

HTML은 1991년 Tim Berners-Lee에 의해 개발되어 월드 와이드 웹의 핵심 기술이 되었다. 이후 CSS와 JavaScript와 함께 웹 콘텐츠를 풍부하게 표현하는 도구로 자리 잡았다.
XML은 데이터 교환과 저장을 위해 1998년에 등장했으며, 기계 가독성을 높이는 데 중점을 두었다.

Markdown은 2004년에 등장하여 Markup의 복잡성을 줄이는 데 초점을 맞췄다. John Gruber와 Aaron Swartz가 공동으로 개발한 Markdown은 기본적으로 텍스트 문서로 작성되지만, HTML로 변환하여 웹 콘텐츠에 사용될 수 있도록 설계되었다.

2010년대에는 GitHub와 같은 플랫폼이 Markdown을 채택하면서 널리 사용되기 시작했다.
이후, GitHub Flavored Markdown(GFM) 이나 CommonMark와 같은 확장된 Markdown 표준이 등장해 더 많은 기능을 지원하게 되었다.

Markup과 Markdown은 각각의 역사와 발전 과정을 통해 특정 용도에 최적화된 도구로 자리 잡았으며, 현재도 다양한 분야에서 폭넓게 사용되고 있다.

2. Markup 언어의 기본 개념과 활용

2.1 HTML과 XML: 주요 Markup 언어 비교

HTML (HyperText Markup Language) 과 XML (Extensible Markup Language) 은 대표적인 Markup 언어로, 각각의 목적과 기능이 다르다. 간략하게만 설명해보면, HTML은 사용자 인터페이스를 구성하는 데 적합하며, XML은 데이터의 유연한 표현과 전송에 적합하다.

HTML

HTML은 웹 콘텐츠를 구조화하고 표시하기 위해 설계되었다. HTML은 정해진 태그와 속성을 사용하여 텍스트, 이미지, 링크, 비디오 등을 웹 브라우저에 렌더링한다.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 예제</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>이것은 HTML 문서입니다.</p>
  </body>
</html>

XML

XML은 데이터를 저장하고 전송하기 위해 설계된 범용적인 Markup 언어다. XML은 데이터의 구조를 정의하며, 태그 이름과 계층 구조를 자유롭게 설정할 수 있어 유연성이 뛰어나다.

<note>
  <to>홍길동</to>
  <from>이순신</from>
  <message>안녕하세요!</message>
</note>

HTML과 XML 비교

특성	HTML	XML
목적	웹 콘텐츠 표시	데이터 저장 및 교환
태그	정해진 태그만 사용 가능	사용자 정의 태그 허용
유효성	문법 오류에도 작동 가능	엄격한 문법 요구
사용 사례	웹사이트 및 애플리케이션 인터페이스	데이터베이스, API, 설정 파일

2.2 Markup 언어의 문법 구조

Markup 언어는 태그와 속성을 사용하여 데이터를 구조화하고 부가 정보를 제공한다.

공통적인 문법 요소

태그 (Tags)

태그는 <와 >로 감싸며, 콘텐츠를 정의하거나 구조를 지정한다.

# html
<p>이것은 문단입니다.</p>

# xml
<title>제목</title>

속성 (Attributes)

태그에 추가 정보를 제공하며, 키-값 쌍으로 정의된다.

# html
<img src="image.jpg" alt="이미지 설명">

# xml
<title>제목</title>

계층 구조 (Hierarchy)

중첩된 태그로 부모-자식 관계를 형성하여 데이터를 구조화한다.

# html
<div>
  <h1>제목</h1>
  <p>내용</p>
</div>

# xml
<library>
  <book>
    <title>XML 기초</title>
    <author>홍길동</author>
  </book>
</library>

2.3 Markup 언어의 활용 사례 (웹 개발, 데이터 교환 등)

Markup 언어는 다양한 분야에서 사용되며, 데이터 표현과 교환, 콘텐츠 관리에서 중요한 역할을 한다.

웹 개발

HTML은 웹사이트의 구조를 정의하고, CSS와 JavaScript와 함께 사용자 경험을 강화한다.

웹 페이지 디자인: HTML로 콘텐츠를 배치하고, CSS로 스타일을 지정하며, JavaScript로 동적인 동작을 추가

<div>
  <h1>블로그 제목</h1>
  <p>이것은 블로그 게시물입니다.</p>
</div>

데이터 교환

XML은 시스템 간 데이터 교환 표준으로 사용된다.

API 응답: XML은 RESTful 또는 SOAP 기반 API에서 데이터를 전달
설정 파일: 소프트웨어 구성 정보를 XML로 저장

<configuration>
  <setting name="theme">dark</setting>
  <setting name="language">ko</setting>
</configuration>

3. Markdown의 기본 문법과 사용법

3.1 Markdown의 문법 요소 (헤더, 리스트, 링크, 이미지 등)

Markdown은 간결한 문법으로 다양한 텍스트 형식을 지정할 수 있다. 주로 문서 작성, 블로그 포스팅, README 파일 작성에 사용되며, 다음과 같은 기본 문법 요소를 포함한다.

헤더(Headers)

Markdown에서 제목을 작성하려면 # 기호를 사용한다.
#의 개수에 따라 제목의 계층 구조를 나타냄

리스트(Lists)

순서 없는 리스트(Unordered List)

*, -, + 기호를 사용하여 작성

순서 있는 리스트(Ordered List)

숫자와 점(.)으로 작성

링크(Links)

[텍스트](URL) 형식으로 작성하여 하이퍼링크를 생성

이미지(Images)

![대체 텍스트](이미지 URL) 형식으로 작성

텍스트 서식

텍스트 강조나 형식을 지정하기 위해 다양한 기호를 사용

굵게: **텍스트** 또는 __텍스트__
기울임: *텍스트* 또는 _텍스트_
~~취소선~~: ~~텍스트~~

코드 블록(Code Blocks)

인라인 코드: 백틱(`)으로 감싼 텍스트

3.2 확장된 Markdown (GitHub Flavored Markdown 등)

GitHub Flavored Markdown(GFM) 은 GitHub에서 사용하는 확장된 Markdown 표준으로, 기본 Markdown에 몇 가지 유용한 기능이 추가되었다.

테이블 생성

기본 Markdown에는 없는 기능이지만, GFM에서는 간단하게 테이블을 작성할 수 있다.

| 제목 1    | 제목 2    | 제목 3    |
|-----------|-----------|-----------|
| 데이터 1  | 데이터 2  | 데이터 3  |
| 데이터 4  | 데이터 5  | 데이터 6  |

체크리스트(Checklists)

작업 목록을 만들 수 있는 기능으로, 작업의 완료 상태를 표시

- [x] 완료된 작업
- [ ] 미완료 작업

HTML 태그 지원

GFM은 Markdown 문법과 함께 HTML 태그도 허용하여, 보다 세부적인 형식 지정 가능

<p>HTML을 사용한 문단</p>

3.3 Markdown의 활용 사례 (문서화, 블로그 작성 등)

Markdown은 간단한 문법 덕분에 다양한 분야에서 널리 활용된다.

문서화

README 파일

GitHub 프로젝트에서 README.md 파일은 프로젝트의 개요와 사용 방법을 제공하는 데 사용된다.

기술 문서 및 API 설명서

Markdown은 API 사용법, 시스템 구성 문서 등을 작성하는 데 유용하다.

블로그 작성

Markdown은 블로그 플랫폼에서 간단하고 직관적인 콘텐츠 작성 도구로 사용된다.

Jekyll, Hexo와 같은 정적 사이트 생성기는 Markdown으로 작성된 파일을 HTML로 변환하여 블로그를 생성한다.

프레젠테이션

Reveal.js와 같은 도구는 Markdown 파일을 슬라이드 형태로 변환하여 프레젠테이션에 활용할 수 있다.

Markdown은 간결하고 직관적인 문법 덕분에 초보자도 쉽게 사용할 수 있으며, 다양한 플랫폼에서 콘텐츠 작성과 문서화를 위한 표준으로 자리 잡고 있다.

4. Markup과 Markdown의 실제 응용

4.1 Markdown을 HTML로 변환하는 방법

Markdown 파일은 HTML로 쉽게 변환할 수 있다. 이를 통해 간단히 작성된 Markdown 파일을 웹 브라우저에서 렌더링 가능한 HTML로 사용할 수 있다.

1. CLI를 사용한 변환

Pandoc과 같은 명령줄 도구를 사용하여 Markdown 파일을 HTML로 변환한다.

pandoc input.md -f markdown -t html -o output.html

2. 프로그래밍 언어를 이용한 변환

Python의 markdown 라이브러리를 사용하여 변환할 수 있다.

import markdown

with open("input.md", "r") as md_file:
    md_content = md_file.read()

html_content = markdown.markdown(md_content)

with open("output.html", "w") as html_file:
    html_file.write(html_content)

3. 온라인 도구

다양한 온라인 변환 도구(예: Dillinger, Marked)를 이용하면 Markdown을 HTML로 변환하여 결과를 미리보기 할 수 있다.

Markdown에서 작성된 간단한 텍스트를 HTML로 변환하면 웹 페이지 제작, 정적 사이트 생성기 활용 등의 응용이 가능하다.

4.2 Markdown과 코드 작성 (README.md, Wiki 문서 등)

Markdown은 개발자 커뮤니티에서 코드와 관련된 문서를 작성하는 데 널리 사용된다.

1. README.md

GitHub 및 GitLab 프로젝트에서 README 파일은 프로젝트의 개요, 설치 방법, 사용 예시 등을 Markdown으로 작성한다.

# 프로젝트 이름
이 프로젝트는 간단한 Markdown 사용법을 설명합니다.

## 설치 방법
```bash
pip install example

## 사용 방법
from example import hello
hello()

2. Wiki 문서

Markdown은 Wiki 페이지 작성에도 적합하다. 예를 들어, 프로젝트 내에서 기술 문서나 팀 노트를 작성하는 데 활용된다.

# 개발 환경 설정
1. Git을 설치합니다.
2. 다음 명령어를 실행하여 저장소를 클론합니다:
git clone https://github.com/user/repo.git
3. 종속성을 설치합니다:
pip install -r requirements.txt

3. 코드 주석과 도큐멘테이션

Markdown 문법은 코드 내부 주석에 포함되거나, 도큐멘테이션 생성 도구와 결합하여 읽기 쉬운 문서를 생성한다.

4.3 Markup과 Markdown을 지원하는 주요 도구 (VSCode, Pandoc 등)

1. VSCode

Visual Studio Code는 Markdown 작성과 미리보기를 강력하게 지원한다.

Markdown Preview: Ctrl + Shift + V를 눌러 Markdown 파일의 실시간 HTML 미리보기를 볼 수 있다.
확장 플러그인: Markdown All in One, Markdown Preview Enhanced 등으로 편집 기능을 확장 가능하다.

2. Pandoc

Pandoc은 문서를 다양한 형식으로 변환할 수 있는 CLI 도구다. Markdown 파일을 HTML, PDF, DOCX 등으로 변환할 수 있다.

pandoc input.md -o output.html
pandoc input.md -o output.pdf

3. Typora

Typora는 Markdown을 직관적으로 작성할 수 있는 WYSIWYG(What You See Is What You Get) 에디터로, 실시간 미리보기를 제공하며 HTML, PDF 등으로 쉽게 내보낼 수 있다.

4. GitHub

GitHub는 기본적으로 Markdown 파일을 렌더링하며, 프로젝트의 문서를 효율적으로 관리할 수 있는 환경을 제공한다.

5. 정적 사이트 생성기 (Jekyll, Hugo)

Markdown으로 작성된 파일을 웹사이트 콘텐츠로 자동 변환하는 도구다. 예를 들어, Jekyll은 Markdown 파일을 HTML로 변환하여 블로그를 생성한다.

# 예제 블로그
- `Jekyll`을 사용해 빠르게 블로그를 생성하세요.
- Markdown 파일을 `/_posts` 폴더에 추가하면 자동으로 게시됩니다.

5. Markup과 Markdown의 한계와 대안

5.1 문법의 제약과 사용자 경험

Markdown은 간결하고 사용하기 쉬운 문법 덕분에 많은 사용자에게 사랑받고 있지만, 몇 가지 제약이 존재한다.
첫째, 기능의 제한성이다. 기본 Markdown은 표, 텍스트 강조, 리스트, 링크, 이미지 등 단순한 요소만 지원한다. 복잡한 레이아웃이나 상호작용을 요구하는 경우, HTML이나 CSS를 추가로 사용해야 한다. 예를 들어, 복잡한 표나 다중 열 레이아웃은 기본 Markdown으로 구현하기 어렵다.

둘째, 사용자 경험의 차이다. Markdown은 직관적이지만, 실시간 미리보기를 지원하지 않는 환경에서는 작성한 텍스트가 최종 출력물에서 어떻게 보일지 알기 어렵다. 이러한 문제는 초보 사용자나 시각적인 작업을 선호하는 사용자에게는 불편함을 초래할 수 있다.

마지막으로, Markdown은 표준화된 버전의 부재로 인해 서로 다른 플랫폼 간의 호환성 문제가 발생할 수 있다. GitHub Flavored Markdown(GFM), CommonMark 등 다양한 확장 사양이 존재하지만, 모든 도구와 환경에서 동일하게 동작하지 않을 수 있다.

5.2 LaTeX와 Markdown의 비교

Markdown과 LaTeX는 문서 작성을 위한 언어라는 점에서는 유사하지만, 기능과 목적에서 큰 차이가 있다.

Markdown은 간단한 텍스트 기반 문서를 작성하는 데 적합하며, 빠르고 가볍게 작성할 수 있다는 장점이 있다. 반면, LaTeX는 학술 논문, 기술 문서, 수학 공식을 작성하는 데 최적화되어 있으며, 복잡한 레이아웃과 고급 텍스트 형식을 지원한다.

비교 표

특성	Markdown	LaTeX
문법의 간단함	간단하고 직관적	상대적으로 복잡하고 학습 곡선이 큼
목적	빠르고 간단한 문서 작성	전문적인 기술 문서 및 학술 논문 작성
사용 사례	블로그, README, 간단한 보고서	수학 논문, 학술 보고서, 책 작성
확장성	제한적	매우 강력하며 세밀한 제어 가능
출력 형식	HTML, PDF	PDF, DVI, PostScript

Markdown

# Markdown 제목
간단한 문서 작성

LaTex

\documentclass{article}
\begin{document}
\title{LaTeX 문서}
\maketitle
\section{Introduction}
이것은 LaTeX 예제입니다.
\end{document}

5.3 대체 기술과의 융합 (WYSIWYG 에디터 등)

Markdown의 한계를 극복하기 위해 WYSIWYG(What You See Is What You Get) 에디터와 같은 대체 기술과 융합이 이루어지고 있다. WYSIWYG 에디터는 사용자가 최종 출력물을 실시간으로 보면서 문서를 작성할 수 있도록 돕는다.

1. WYSIWYG 에디터

Typora와 같은 도구는 Markdown 작성 시 실시간 미리보기를 제공하여 초보자도 쉽게 사용할 수 있다.
Google Docs, Microsoft Word 등에서도 기본 Markdown 문법을 지원하는 플러그인이 등장하며, 협업 도구로 활용된다.

2. 정적 사이트 생성기

Markdown은 Jekyll, Hugo, Hexo와 같은 정적 사이트 생성기와 통합되어, 간단한 문서를 블로그와 웹사이트로 전환하는 데 사용된다.

3. 대체 기술

Asciidoc: Markdown과 유사하지만, 더 많은 기능과 유연성을 제공한다.
ProseMirror: Markdown을 WYSIWYG 방식으로 구현한 오픈소스 라이브러리로, 사용자 경험을 개선한다.

이러한 기술과의 융합은 Markdown의 단순성과 사용성을 유지하면서, 복잡한 기능을 필요로 하는 사용자의 요구를 충족시킨다.

6. 마무리

마크다운 문법을 한번 정리한 적은 있었는데, 그때는 정말 문법 배우기에만 급급해 3.1번 항목의 내용만 정리했던 기억이 난다. 그래도 이제 정보 정리와 기록을 전부 Markdown 문법으로 하는 학생으로서, 학교에서 접한 LaTex와 기타 도구 등과의 연계, 차이점 등 여러 요소들에도 눈을 돌릴 수 있어 좋았다.

goldenGlow_21

안드로이드는 리눅스의 꿈을 꾸는가

이전 포스트

Daily CS) JSON

다음 포스트

Daily CS) Markup/Markdown

Daily CS

Markup/Markdown

1. Markup과 Markdown의 개요

1.1 Markup과 Markdown의 정의와 목적

목적의 차이

1.2 Markup과 Markdown의 차이점

비교 표

1.3 Markup과 Markdown의 역사적 배경

2. Markup 언어의 기본 개념과 활용

2.1 HTML과 XML: 주요 Markup 언어 비교

HTML

XML

HTML과 XML 비교

2.2 Markup 언어의 문법 구조

공통적인 문법 요소

2.3 Markup 언어의 활용 사례 (웹 개발, 데이터 교환 등)

웹 개발

데이터 교환

3. Markdown의 기본 문법과 사용법

3.1 Markdown의 문법 요소 (헤더, 리스트, 링크, 이미지 등)

헤더(Headers)

리스트(Lists)

링크(Links)

이미지(Images)

텍스트 서식

코드 블록(Code Blocks)

3.2 확장된 Markdown (GitHub Flavored Markdown 등)

테이블 생성

체크리스트(Checklists)

HTML 태그 지원

3.3 Markdown의 활용 사례 (문서화, 블로그 작성 등)

문서화

블로그 작성

프레젠테이션

4. Markup과 Markdown의 실제 응용

4.1 Markdown을 HTML로 변환하는 방법

1. CLI를 사용한 변환

2. 프로그래밍 언어를 이용한 변환

3. 온라인 도구

4.2 Markdown과 코드 작성 (README.md, Wiki 문서 등)

1. README.md

2. Wiki 문서

3. 코드 주석과 도큐멘테이션

4.3 Markup과 Markdown을 지원하는 주요 도구 (VSCode, Pandoc 등)

1. VSCode

2. Pandoc

3. Typora

4. GitHub

5. 정적 사이트 생성기 (Jekyll, Hugo)

5. Markup과 Markdown의 한계와 대안

5.1 문법의 제약과 사용자 경험

5.2 LaTeX와 Markdown의 비교

비교 표

5.3 대체 기술과의 융합 (WYSIWYG 에디터 등)

6. 마무리

Daily CS) JSON

Daily CS) APT

0개의 댓글