개발자를 희망하는 초보의 자기개발 이야기

자주 사용하는 마크다운 문법 12가지 본문

프론트엔드(Front-end)

자주 사용하는 마크다운 문법 12가지

클라우드아실 2024. 8. 5. 10:13
반응형

마크다운이란?

마크다운(Markdown)은 텍스트 기반의 마크업 언어다. 마크업 언어인 html과 호환이 가능하다.
깃헙에서 README 작성 시 사용할 일이 많다.

1. 문단 나누기

  • 문단 사이를 한 줄 띄워서 나눈다.
한 줄 띄워서

구분하기

2. 개행

  • 문장 끝에 공백( )을 두 번 입력한다.
문장 끝에 공백( )를  
두 번 입력한다.

3. 제목(#)

  • #이 많아질수록 소제목이 된다. <h1> ~ <h6> 과 같은 원리다.
# 큰 제목
## 부제목
### <h3>
#### <h4>

큰 제목은 '==', 부제목은 '--'로 대체 가능하다.

큰 제목
==

부제목
--

4. 글자 기울이기, 굵게, 굵게 기울이기(*)

  • *기울이기*, **굵게**, ***굵게 기울이기***
*기울이기*
**굵게**
***굵게 기울이기***

5. 인용문 또는 콜아웃(>)

  • 다른 마크다운 문법과 중첩 가능하다
> 인용구
>> 그 속에 인용구
>>> ## 그 속에 제목

5. 목록(1, A, a, I, i, *, -, +)

  • <ol>의 type과 같다. '1, A, a, I, i'는 순서가 있는 목록에 사용한다.
  • '*, -, +' 는 <ul>과 같다. 모두 화면에 블릿( · )으로 처리되기 때문에 편한 것 하나만 사용하면 된다.
1. 첫번째
2. 두번째

- 첫번째
- 두번째

6. 코드블록(```)

  • 백틱(`)을 앞 뒤로 세 개씩 감싸면 코드블록이 된다.
  • 첫번째 백틱 묶음에 언어를 기재한다.
```javascript
console.log("이렇게 쓴다")
```

7. 링크( [표시될 텍스트](URL) )

  • 대괄호로 텍스트를 감싸고, 괄호로 URL을 작성한다.
  • <a> 태그와 동일하다.
[구글링크](https://www.google.com)

8. 이미지( ![대체 텍스트](URL) )

  • <img>와 비슷한데 사이즈 조절이 불가하다는 단점이 있다.
  • 사이즈를 조절하려면 마크다운 말고 <img>로 처리하도록 한다.
![고양이 이미지](https://c.pxhere.com/photos/8f/f7/cat_feline_feline_stopped_animal_kitten_feline_look_tuned-814202.jpg!d)

9. 이미지 링크( [![고양이 이미지](URL)](URL) )

  • 7번과 8번을 합치면 된다.
  • 혹시 몰라 시도해봤다가 발견했는데 <a><img>보다 활용도는 떨어지는 듯.
[![고양이 이미지](https://c.pxhere.com/photos/8f/f7/cat_feline_feline_stopped_animal_kitten_feline_look_tuned-814202.jpg!d)](https://c.pxhere.com/photos/8f/f7/cat_feline_feline_stopped_animal_kitten_feline_look_tuned-814202.jpg!d)

10. 접은 글

  • <ol>의 type과 같다. '1, A, a, I, i'는 순서가 있는 목록에 사용한다.
  • '*, -, +' 는 모두 화면에 동일하게 블릿( · ) 이 나타나기 떄문에 편한 것 하나만 사용하면 된다.
1. 첫번째
2. 두번째

- 첫번째
- 두번째

11. 표( | - | )

  • <table>과 같다. 직관적이라 복붙해서 내용만 변경해서 자주 사용한다.
  • 먼저 제못행을 원하는 칸만큼 | 로 구분하고 내용을 기재한다.
  • 제목 행 다음은 | - | - | - | 과 같이 구분 기호 안을 '-' 기호로 채운 행을 입력한다.
  • 다음 행부터는 필요한 내용만큼 칸을 나누고 입력한다.
|             | 파일 시스템         | 데이터베이스 시스템     |
| ----------- | ------------------- | ----------------------- |
| 비용        | 낮다                | 높다                    |
| 데이터 중복 | O                   | X                       |
| 데이터 종속 | O                   | X                       |
| 제약 조건   | X                   | O                       |
| 다중 사용자 | X                   | O                       |
| 보안        | 파일 단위 접근 권한 | 세분화된 권한 부여 가능 |

12. 접은 글

  • 마크다운으로 작성한 것도 노션처럼 일부 내용을 접고 싶어 찾아냈다.
  • 마크다운 자체로는 불가하고 HTML로 구현한다.
  • <details> 내에 전체 내용을 입력하고, summary에 접었을 때 나타날 텍스트를 입력한다.
  • 이 때 <summary> 바로 밑에 줄은 꼭 문단을 나눠야 한다.
<details>
  <summary>더 보기</summary>
  
  여기에 접힌 내용이 들어간다.
  여러 줄의 텍스트도 작성할 수 있다.
  
  - 목록 아이템 1
  - 목록 아이템 2
  - 목록 아이템 3
</details>

 

 

 

 

 

반응형