[Tech] Markdown(마크다운) 정리

시연·2023년 12월 16일

.md Markdown markup-language velog 작성법 마크다운 마크업 언어

Tech

목록 보기

1/2

markdown start

🔎 Markup Language(마크업 언어)란?

양식이 있는 문서의 한 종류

양식을 *태그 등으로 구분

문서 정보를 정확하게 전달하기 위한 목적으로 만들어진 문서

태그(Tag)

일반적으로 좌, 우 부등호처럼 생긴 꺽쇠 (< >, < />) 로 구분
문서의 골격에 해당하는 부분을 작성
원래 텍스트와는 별도로 원고의 교정부호 및 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 됨
예시로, 이름 앞에 "@"를 붙은 문자열을 인식하는 기능도 태그

❗️마크업 언어도 'Language'라는 표현을 사용하긴 하지만 데이터를 기술하여 단순한 정보 전달만을 하고 있을 뿐 sw를 구동하는 프로그래밍 언어의 논리적인 부분(조건에 따른 생명주기 등)이 없기 때문에 프로그래밍 언어와는 차이가 있다.

📂 Markup Language의 종류

마크업 언어의 종류를 표현적 마크업, 절차적 마크업, 기술적 마크업 언어로 나누기도 하지만 대표적인 예만 간단히 정리하도록 하겠다.

1. Markdown

사용:

문서를 구조화하고 서식을 표현하는 데 사용되는 경량 마크업 언어로, 주로 텍스트 기반의 문서를 작성할 때 활용된다.
웹에서 문서를 작성하고 읽는 데 많이 사용되며, GitHub 등 다양한 플랫폼에서 지원된다.

확장자:

.md, .markdown

특징:

간단하고 쉽게 배울 수 있으며, HTML로 변환되기 쉽다.
문법이 간단하며, 텍스트에 서식을 적용하기 위해 HTML을 직접 사용하지 않고도 가능하다.
코드 블록, 목록, 표 등 다양한 구조를 지원하여 문서를 다양하게 표현할 수 있다.

예시:

# Hello, world!

This is a **Markdown** example. You can create *italic*, **bold**, and [links](https://www.example.com).

- Item 1
- Item 2
- Item 3

2. HTML(Hyper Text Markup Language)

사용:

문서의 내용 이외에 문서의 구조나 서식을 포함하여 웹사이트의 모습을 기술하는데 사용된다.

확장자:

.htm, .html

특징:

HTML은 마크업 언어의 상당히 많은 지분을 차지하고 있는 언어이다.
HTML은 프로그래밍 언어는 아니지만 웹 개발에서 매우 중요한 언어다.

예시:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Hello, world!
    </body>
</html>

3. XML(eXtensible Markup Language)

사용:

수신자가 데이터를 효율적이고 정확하게 읽을 수 있도록 공유 가능한 방식으로 데이터를 정의하고 저장하여 주로 웹에서 미리 약속해둔 방식으로 문서를 만드는데 사용된다.
XML은 웹 사이트, 데이터베이스 및 타사 애플리케이션과 같은 컴퓨터 시스템 간의 정보 교환을 지원한다.

확장자:

.xml

특징:

XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어졌다.
많은 API가 개발되어 XML 데이터를 처리하고자 하는 소프트웨어 개발자들이 활용하고 있다.
여러 가지 스키마 시스템이 있어서 XML 기반 언어의 정의를 보다 쉽게 할 수 있도록 도와준다.

예시:

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <element1>
        <subelement1>Value 1</subelement1>
        <subelement2>Value 2</subelement2>
    </element1>
    <element2 attribute="attribute_value">Value 3</element2>
    <element3>
        <subelement3>Value 4</subelement3>
    </element3>
</root>

4. XHTML(XML 기반 HTML)

사용:

XHTML은 HTML을 XML 기반으로 다시 정의한 것으로, 보다 엄격한 문법을 가지고 웹 페이지를 작성하는 데 사용된다.
주로 웹 표준을 준수하고 XML의 엄격한 문법을 따르는 웹 페이지를 만들기 위해 사용된다.

확장자:

.htm, .html, .xhtml

특징:

XHTML은 HTML의 확장이며 XML의 규칙을 따르기 때문에 엄격한 문법을 갖추고 있어야 한다.
웹 표준을 준수하여 다양한 플랫폼과 브라우저에서 일관된 표현을 보장한다.

예시:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>XHTML Example</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

5. JSON

사용:

데이터 교환을 목적으로 하는 경량의 데이터 형식으로, 주로 웹에서 서버와 클라이언트 간의 데이터 전송에 사용된다.
JavaScript에서 데이터를 다루는 데 매우 효과적이며, 다양한 프로그래밍 언어에서도 사용 가능하다.

확장자:

.json

특징:

간결하고 가독성이 좋은 텍스트 기반의 데이터 교환 형식이다.
Key-Value 쌍으로 이루어져 있으며, 배열과 객체를 지원하여 복잡한 데이터 구조를 표현할 수 있다.
JavaScript의 객체 표기법을 기반으로 하고 있어 JavaScript 코드에서 직접 활용할 수 있다.

예시:

{
    "name": "John Doe",
    "age": 30,
    "city": "New York",
    "isStudent": false,
    "grades": [90, 85, 92]
}

6. yaml

사용:

인간이 쉽게 읽고 쓸 수 있는 데이터 직렬화 형식으로, 주로 설정 파일이나 데이터 구조를 표현하는 데 사용된다.
주로 프로그래밍 언어 간 데이터 교환 및 설정 파일 작성에 활용된다.

확장자:

.yaml, .yml

특징:

들여쓰기를 이용하여 데이터의 계층 구조를 표현하며, 가독성이 뛰어나다.
Key-Value 쌍과 리스트를 사용하여 데이터를 표현하며, 다양한 데이터 타입을 지원한다.
JSON보다는 사람이 읽기 쉽고 작성하기 간편하다.

예시:

name: John Doe
age: 30
city: New York
isStudent: false
grades:
  - 90
  - 85
  - 92

7. AsciiDoc

사용:

AsciiDoc는 문서를 작성하고 포맷팅하는 마크업 언어로, 특히 기술 문서 및 문서화 작업에 많이 사용된다.
AsciiDoc은 텍스트 파일로 작성되며, HTML, PDF, 또는 다른 출력 형식으로 변환할 수 있다.

확장자:

.adoc, .asciidoc

특징:

가독성이 좋고, 텍스트 기반으로 작성되어 문서를 쉽게 작성할 수 있다.
문서의 구조를 간결하게 표현할 수 있으며, 코드 삽입, 표 작성 등 다양한 기능을 지원한다.
다양한 출력 형식으로 변환이 가능하며, 확장성이 뛰어나다.
AsciiDoc 문서는 기본적으로 명시적인 목적지가 없으면 HTML로 변환된다.

예시:

= Document Title

== Section 1

This is a paragraph of text.

[source,python]
----
print("Hello, world!")
----

|===
| Column 1 | Column 2
| Item 1   | Item 2
| Item 3   | Item 4
|===

8. 이 밖의 다양한 Markup Language

GenCode
troff / nroff
TeX
Scribe, GML, SGML
. . .

💡 Markdown(마크다운)에 대해

markdown image

이처럼 마크다운은 마크업 언어의 종류 중 하나로 상하 관계의 개념이다.

마크다운을 검색하게 되면 이러한 구문이 나온다.

“마크다운은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 온갖 태그로 범벅된 HTML 문서 등과 달리, 읽기도 쓰기도 쉬운 문서 양식을 지향한다.”

Markdown은 2004년 John Gruber와 Aaron Swartz에 의해 만들어진 텍스트 기반의 마크업 언어이며, 마크업 언어의 복잡한 태그 구조를 사라지게 하여 간단한 텍스트들과 특수기호와 문자를 이용한 간단한 구조의 몇 가지 문법만 알면 작성할 수 있도록 한 읽고 쓰기 쉬운 문서 양식이다.

마크 다운이 대표적으로 많이 사용되는 곳은 GitHub인데, GitHub의 README.md가 바로 최초의 Markdown(.md) 파일이라고 한다. 이후 각종 오픈소스 프로젝트에서 많이 활용되어 사용법 및 가이드 문서 또한 자주 소비되며 널리 사용되고 있다. 현재 velog의 이 게시물도 마크다운을 사용하여 작성하고 있다.

💭 Markdown의 장단점

장점

문법이 쉽다.

키보드로만 조작할 수 있어 쉽게 구조적인 글쓰기가 가능하다.

텍스트로 저장이 되기 때문에 검색이 쉽다.

텍스트로 저장이 되기 때문에 용량이 적다.

지원 가능한 플랫폼과 프로그램이 다양하다.

단점

표준이 없어 사용자마다 문법이 상이할 수 있다.

모든 HTML 마크업을 대신하지 못한다.

몇몇 뷰어의 속도가 느려 실시간 확인하면서 작업하기에는 약간의 딜레이가 있을 수 있다.

🧸 글을 마치며

오늘 개발 블로그 작성을 시작하며 기존 지식을 정리할 겸 작성법을 익히기 위해 마크다운에 대해 다시 복기해보는 시간을 가졌다.
새롭게 알게된 마크다운 문법이 생기면 이 글에 추가하며 velog를 작성할 때 참고하려고 한다.

~~그런데 이미지 가로로 나란히 놓는 건 어떻게 하는거지?~~

➕ [이미지] 가로로 나란히 삽입

추가 업로드일: 2023.12.17

첫번째 방법 : <figure> 및 <figcaption> 태그 사용

<figure> : 문서에서 독립적으로 구분되거나 주변 콘텐츠와의 관계를 갖는 멀티미디어 콘텐츠를 정의하는 데 사용되며 주로 이미지, 동영상, 차트, 코드 블록 등을 표현
<figcaption> : <figure> 요소의 자식 요소로 사용되며 해당 콘텐츠에 대한 설명이나 캡션을 제공

이곳에 이미지 설명 첨부 가능

<figure>
  <img src="first.image.address.jpg(png, svg, etc.)" alt="number-1" height="50%" width="50%" align="left">
    <img src="second.image.address.jpg(png, svg, etc.)" alt="number-2" height="50%" width="50%" align="right">
  <figcaption style="text-align:left; font-size:15px; color:#808080">
    이곳에 이미지 설명 첨부 가능
  </figcaption>
</figure>

두번째 방법 : <p> 태그 사용

<p> : 데이터 블록을 포함하는 컨테이너로 사용되며 데이터를 그룹화하고 문단을 나눌 수 있음

number-1 number-2

<p>
  <img src="first.image.address.jpg(png, svg, etc.)" alt="number-1" height="300px" width="300px" align="left">
  <img src="second.image.address.jpg(png, svg, etc.)" alt="number-2" height="300px" width="300px" align="right">
</p>

열심히 썼는데 출간하기를 눌렀더니 적용이 안된다..
html 태그가 적용이 안돼서 그런가 😭😭

이 분 게시글 보고 오픈소스 활용 해봐야겠다 👍
https://ddingg.tistory.com/126

시연

백엔드 개발자로 거듭나고 있습니다. 😆

다음 포스트

[Tech] Markdown(마크다운) 정리

Tech

🔎 Markup Language(마크업 언어)란?

📂 Markup Language의 종류

1. Markdown

2. HTML(Hyper Text Markup Language)

3. XML(eXtensible Markup Language)

4. XHTML(XML 기반 HTML)

5. JSON

6. yaml

7. AsciiDoc

8. 이 밖의 다양한 Markup Language

💡 Markdown(마크다운)에 대해

💭 Markdown의 장단점

장점

단점

🧸 글을 마치며

➕ [이미지] 가로로 나란히 삽입

[Tech] Python 자료형

0개의 댓글