마크다운 학습

WhereDo?·2024년 6월 11일

study

목록 보기
1/4

마크다운 사용 이유

velog 는 마크다운으로 작성되며 외에도 프로젝트의 readme문서나 obsidian 등 활용되는 곳이 많아 알아두면 좋음


의의

마크다운 문법을 학습하고 프로젝트에 적용


장단점

쉽고 간단하나 복잡한 기능은 구현하기 힘듬
텍스트로 저장되어 용량이 적고 변경이력을 관리할 수 있음
표준이 없어 도구에 따라 변환방식이나 생성물이 다름


문법

특징

마크다운 문법은 html 태그로 변환되어 나타나는 것
따라서 일부 html 태그를 사용이 가능

종류

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그를 나타내는 header를 표현

# 제목 1 
## 제목 2
### 제목 3 
#### 제목 4
##### 제목 5 
###### 제목 6 

제목 1
=

제목 2
-

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6

제목 1

제목 2


font

글씨의 기울임(<em>, 두꺼움(<strong>, 취소선(<del>) 표현

*기울임* _기울임_
**두꺼움** __두꺼움__
~~취소선~~
<u>밑줄</u>

기울임 기울임
두꺼움 두꺼움
취소선
밑줄


block quote

<blockquote> 태그를 나타내며 인용구가 긴 경우를 나타냄. 중첩하여 사용이 가능

> first section
>> second section
>>> third section

first section

second section

third section


목록

순서 있는 목록, 순서 없는 목록 작성이 가능

1. first
	1. first-first
2. second
3. third

- first
    - first-first
    - first-second
- second
    - second-first
    - second-second
    	- second-second-first
    
  1. first
    1. first-first
  2. second
  3. third
  • first
    • first-first
    • first-second
  • second
    • second-first
    • second-second
      • second-second-first

링크

<a> 태그로 변환되는 링크를 나타냄

[이름](링크)

[google](https://google.com)
[참조 링크][naver]

[naver]: https://naver.com

google
참조 링크


이미지

<img> 태그로 변환되는 이미지를 나타냄

![이름](이미지 주소)

![대체 텍스트(Alternative Text)](https://picsum.photos/1000/400 "링크 설명(Title)")
![이미지입니다!][Image]

[Image]: https://picsum.photos/500/300 "이미지입니다!"

대체 텍스트
대체 텍스트


이미지 링크

이미지에 링크를 추가하는 것도 가능

[![대체 텍스트][skull]](https://velog.io/@yukisai24/posts)   

[skull]: https://velog.velcdn.com/images/yukisai24/profile/2e8fcd12-4fd3-47de-b5da-3a9087fa8565/image.png "블로그 이미지"

대체 텍스트


코드 강조

백틱(`)을 사용하여 <pre>, <code> 태그를 나타냄

인라인

강조할 코드를 `로 감싸서 표현

`강조할 코드 내용`

강조할 코드 내용

블록

코드블록을 를 세 개 이상 사용하여 표현 시작과 종료의 수는 같아야함
```옆에 사용한 언어의 이름을 명시할 수 있음

```javascript
코드 블록 내용
```
코드 블록 내용

<table> 태그를 나타냄
---, :---: 좌측 정렬
:---:: 가운데 정렬
---:: 우측 정렬
가장 좌측과 가장 우측에 있는 | 기호는 생략 가능

| 헤더 | 헤더 | 헤더 |
|---|---:|:---|
| `셀` | 셀 | 셀 |
| cell | 셀 | 셀 |

헤더 | 헤더 | 헤더
---|---|---
셀 | 셀 | 셀
셀 | 셀 | 셀
헤더헤더헤더
cell
헤더헤더헤더

수평선

---, ___, *** 를 통해 <hr>를 나타냄

---


주석

<!-- -->, [//]: #으로 주석을 표현

-- 시작 --

<!-- 안녕하세요. -->
[//]: # (안녕하세요.)
[//]: # "안녕하세요."
[//]: # '안녕하세요.'

-- 종료 --

-- 시작 --

-- 종료 --

profile
FE developer

0개의 댓글