[html] 마크업(Markup) 과 마크다운(Markdown)

오늘은 출근길에••
월요일이지만 내일 광복절이다 아자 .ᐟ ٩꒰⍢ ꒱۶

깃허브 리드미 부분 수정할 일도 있고, 이번주가 학회 해커톤이라 웹사이트 제작을 한창 마무리하고 있어서 내 눈에 문득 마크업과 마크다운이라는 단어가 확 들어왔다. 웹 개발자, 혹은 입문자라면 정말 많이 들어봤을 cs 지식일 테지만 헷갈릴 사람이 많을 것 같다고 생각했기에 오늘의 단어로 결정 !

처음에 두 단어를 들어봤을 때에, 흔히 이런 글을 보았다.

Markdown은
Markup language의 일종이다

왕초보 개발자인 나에겐 이 말이 무슨 말인지도 전혀 감이 안 잡혔었고, Markup language는 또 뭐지? 라는 생각도 들었었다.

🖋️Markup Language

- 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종.
- 데이터를 기술한 언어라는 점에서 프로그래밍 언어와는 차이가 있음.

* 여기서 두 번째 문장을 쉽게 설명하면,
데이터를 가지고 컴퓨터 시스템을 구동시키기 위한 소프트웨어를 만들기 위해 수학적인 과정을 거치는 프로그래밍 언어와 달리,
마크업 언어는 데이터를 화면에 표시하기 위해 사용하는 언어라고 생각하면 될 것 같다.

마크업 언어의 대표적인 예는 HTML이다.
(HTML : 태그를 사용해 웹 페이지의 "구조" 를 정의하고 단독으로는 프로그래밍 처럼 상호작용을 할 수 없는 마크업 언어.)

+ 여기서 보통의 웹페이지들은 사용자와 상호작용을 할 수 있는데, 이는 JS등의 프로그래밍 언어가 HTML과 함께 조합되어 있기 때문 !

✍🏻Markdown

- 텍스트 서식의 문서를 작성하는 데 사용되는 텍스트 기반의 경량 마크업 언어.
- 일반 마크업 언어에 비해 문법이 쉽고 간단함
- HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에, 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물(blog) 등에 많이 사용

여기서 내가 처음 두 단어를 알게되었을 때 머쓱했던 부분은, 마크다운은 마크업 언어의 하위개념 이었다는 것 😅

마크다운 문법이 사용되는 예로는 깃허브(Github)의 README(.md), 노션(Notion), 슬랙(Slack) 등이 있다. 아마 개발자든, 비개발자든 마크다운 문법은 알게 모르게 실생활에서 한 번쯤은 사용해보았을 것이다. 그만큼 사용하기 쉽다는 뜻이기도 하다.

.md라는 확장자를 사용하는 마크다운 언어는 <>로 감싸진 태그를 사용하는 HTML, 혹은 xml 등과 비교해 직관적으로 알아보기 쉬운 언어로, 서식이 있는 문서를 작성할 때 유용하다.

특히 (초보)개발자인 나는 문서에 ``(backtick)을 입력해서 쉽게 코드 블록을 생성할 수 있기에, 개발 문서를 작성하거나, 코드를 공유할 때 유용하게 사용하고 있다 !

🔎 마크업 언어의 종류

HTMl
Markdown
XML
XHTML XML 기반의 HTML
JSON
YAML