1. 마크업 언어 Markup Language
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지.
<a> <h1> <p> .. 와 같이 태그 등을 이용해 각 문장 혹은 단락, 요소들의 역할을 명시하고, 이를 통해 문서나 데이터의 구조를 확실하게 알 수 있도록 하는 언어의 한 가지이다.
주의할 것이 있다. 마크업 “언어”라고 칭하지만 프로그래머 사이에서 흔히 말하는 언어(=프로그래밍 언어)에 속하지는 않는다는 점.
주요 마크업 언어로는 HTML, XML, XHTML, SVG, MathML, MXML, XAML 등이 있다. 아래는 마크업 언어들의 예시이다.
1
2
3
4
5
6
7
8
9
10
11
12
<!-- HTML : Hyper Text Markup Language -->
<html>
<head> It's head </head>
<body>
<h1>Headline of this doc</h1>
<br>
<p>Contents of this doc</p>
<button> button </button>
<li> list1 </li>
<table> using with tags like <td></td> </table>
</body>
</html>
HTML은 웹 페이지의 구조를 만들기 위한 마크업 언어다. 흔히들 “HTML은 웹 페이지의 뼈대”라고 하는 말을 떠올려보면 좋다. 각각의 태그들로 웹페이지를 어떻게 구성할지 그 구조를 표시할 수 있다.
1
2
3
4
5
6
7
8
<!-- XML : eXtensible Markup Language -->
<?xml version="1.0" encoding="UTF-8" ?> <!-- XML 문서에 대한 정보 -->
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
XML은 다른 종류의 시스템들 간, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고받을 수 있게 하는 목적으로 만들어진 마크업 언어이다. 또한 사람과 기계가 쉽게 이해할 수 있는 형식으로 데이터를 가공하기 위한 목적이 있다. HTML과 그 모양이 유사하다. 웹 개발자가 가장 친근하게 접하는 xml로는 maven에서 사용하는 pom.xml이 있다.
XML은 유니코드로 작성되며, 태그의 경우 대소문자를 구분하니 주의하여 사용하자.
1
2
3
<!-- SVG : Scaleable Vector Graphics -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
SVG는 XML 기반의 언어로, 벡터 그래픽을 표현하기 위한 이미지 파일이다. 해상도에 독립적이므로, 크기를 조절해도 화질이 유지된다는 특징이 있다. 웹에서 스크립트와 결합해 인터랙티브한 디자인을 구현하는 데 주로 사용된다.
2. 마크다운 언어 Markdown Language
마크업 언의 일종이나, 복잡한 태그 등을 사용하지 않아 사람이 읽고 작성하기 편하면서도 다른 마크업 언어로 변환하기 쉬운 텍스트 작성방법
마크다운 언어는 사람들이 읽고 쓰기 쉬운 플레인 텍스트 포맷을 사용하면서도 문서의 구조를 표현할 수 있는 마크업 언어의 일종이다. HTML 등에서 사용되는 복잡한 태그들을 사용하지 않으면서도, 문서의 구조를 쉽게 표현할 수 있다. 예를 들어 HTML에서의 <h1> 태그는 # 으로, <li> 태그는 - 등으로 표현할 수 있다.
최근 많이 사용되는 Notion, 마크다운 메모 앱으로 유명한 Obsidian 등이 마크다운 언어로 작성되며, Google Keep 혹은 애플의 기본 메모앱도 일부 마크다운 형식의 작성을 지원한다. 또한 깃허브에서 많이 사용되는데, 깃허브의 Repository를 설명하는 README.md는 마크다운 문서이다.
1
2
3
4
5
6
7
8
9
10
11
# : heading1
## : heading2
### : heading3
- : list
* : list
> : BlockQuote
[alt](/link/to/something) : link
 : image
1
2
3
4
5
# 장점
(1) 쉬운 문법 : 간단하고 직관적인 작성 문법
(2) 가독성 : 태그 없이 일반 텍스트로 작성되어 읽기 쉬움
(3) 간결함 : 복잡한 태그 대신 #, -, > 와 같은 간결한 문자로 기능을 대체
(4) 플랫폼 독립성 : 어떤 플랫폼에서도 지원됨
1
2
3
# 단점
(1) 통일된 표준이 없음
(2) 고급 서식 부족 : HTML등 다른 마크업 언어에 비해 표현할 수 있는 바가 제한적임
Reference
위키백과 마크업 언어 : https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4
마크업과 마크다운의 차이 : https://samsara-ku.dev/common_sense/difference-between-markup-and-markdown/
HTML과 XML : https://hanamon.kr/htm-xml-%EC%B0%A8%EC%9D%B4%EC%A0%90/
XML : https://ko.wikipedia.org/wiki/XML
위키백과 마크다운 : https://ko.wikipedia.org/w/index.php?title=Special:Search&search=%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4&wprov=acrw1_0
마크다운의 장단점 : https://gist.github.com/ihoneymon/652be052a0727ad59601