마크다운(Markdown)과 HTML이란? | 개념 및 활용 가이드
마크다운(Markdown)과 HTML이란? | 개념 및 활용 가이드
1. 마크다운(Markdown)이란?
**마크다운(Markdown)**은 단순한 문법을 사용하여 손쉽게 문서를 작성할 수 있는 경량 마크업 언어입니다. 텍스트 기반이며, HTML로 변환이 가능하기 때문에 블로그, README 파일, 문서화, 이메일 작성 등 다양한 곳에서 사용됩니다.
✔ 간단한 문법으로 문서 작성 가능
✔ HTML로 변환이 쉬워 웹에서 활용 가능
✔ 가독성이 좋고 유지보수가 용이
✅ 마크다운의 기본 문법 예제
기능 마크다운 문법 HTML 변환 결과
| 제목 | # 제목1 ## 제목2 | <h1>제목1</h1> <h2>제목2</h2> |
| 글자 강조 | **굵게** *기울임* | <b>굵게</b> <i>기울임</i> |
| 목록 | - 항목1 - 항목2 | <ul><li>항목1</li><li>항목2</li></ul> |
| 링크 | [구글](https://google.com) | 구글 |
| 이미지 |  | <img src="이미지링크" alt="설명"> |
| 코드 블록 | `코드` 또는 코드 | <code>코드</code> |
2. HTML이란?
**HTML(HyperText Markup Language)**은 웹페이지의 기본적인 골격을 만드는 마크업 언어입니다. 웹 브라우저가 HTML 코드를 해석하여 페이지를 렌더링 하며, 텍스트, 이미지, 링크, 폼 등 다양한 요소를 포함할 수 있습니다.
✔ 웹페이지의 구조를 정의
✔ CSS, JavaScript와 결합하여 동적 콘텐츠 제공
✔ 검색엔진 최적화(SEO)에 중요한 역할
✅ HTML 기본 문법 예제
<!DOCTYPE html>
<html>
<head>
<title>HTML 문서</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것은 HTML 문서입니다.</p>
<a href="https://google.com">구글로 이동</a>
</body>
</html>✔ <h1>~<h6>: 제목 태그
✔ <p>: 단락(Paragraph)
✔ <a href="">: 링크 삽입
✔ <img src="">: 이미지 삽입
✔ <div>, <span>: 블록 및 인라인 요소 그룹화
3. 마크다운과 HTML의 차이점
비교 항목 마크다운 HTML
| 사용 목적 | 문서 작성 및 간단한 포맷팅 | 웹페이지 구조화 |
| 문법 난이도 | 간단 (직관적) | 복잡 (태그 기반) |
| 확장성 | 제한적 | CSS, JavaScript와 결합 가능 |
| 변환 가능 여부 | HTML 변환 가능 | 마크다운 변환 불가 |
✔ 마크다운은 빠르고 간단한 문서 작성에 적합
✔ HTML은 웹사이트 구축 및 동적 콘텐츠 제공에 필수
4. 티스토리 블로그에서 마크다운, HTML, 기본 모드 사용 방법
티스토리 블로그에서는 기본 모드, 마크다운, HTML 모드를 제공하여 사용자가 원하는 방식으로 글을 작성할 수 있습니다.
✅ 1) 기본 모드
✔ 티스토리 에디터에서 제공하는 비주얼 편집기 사용
✔ 텍스트 입력, 이미지 삽입, 링크 추가 등을 직관적으로 할 수 있음
✔ 초보자도 쉽게 사용할 수 있는 방식
✅ 2) 마크다운 모드
✔ 마크다운 문법을 지원하여 텍스트 기반으로 문서 작성 가능
✔ 코드 블록, 링크, 목록 등을 간단한 문법으로 작성 가능
✔ HTML로 변환이 쉬우며, 빠른 문서 작성을 원할 때 유용
✔ 예제:
# 제목1
## 제목2
- 리스트 1
- 리스트 2
✅ 3) HTML 모드
✔ HTML을 직접 작성하여 웹페이지처럼 구조화 가능
✔ CSS, JavaScript 코드 삽입 가능
✔ SEO 최적화 태그, 구조화 데이터 적용 가능
HTML 문서 작성 예제입니다.
링<h1>이것은 HTML 제목입니다</h1>
<p>HTML 문서 작성 예제입니다.</p>
<a href="https://example.com">링크 추가</a>크 추가✅ 사용 방법
1️⃣ 티스토리 블로그 글쓰기 페이지로 이동
2️⃣ 오른쪽 상단의 '편집 모드' 선택 → 기본, 마크다운, HTML 중 선택
3️⃣ 각 모드에 맞는 형식으로 글 작성 후 저장
🔥 결론: 티스토리 블로그에서는 기본 모드, 마크다운, HTML 모드를 지원하여 다양한 방식으로 콘텐츠를 작성할 수 있습니다. 사용 목적에 따라 적절한 모드를 선택하여 블로그 포스팅을 최적화하세요! 🚀
'코딩 및 개발언어(웹, 앱, 블록체인)' 카테고리의 다른 글
| Python이란? (0) | 2025.02.17 |
|---|---|
| 백엔드(Back-End)란? (0) | 2025.02.16 |
| 반응형 웹 디자인이란? (0) | 2025.02.16 |