Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Tags
- 톺아보기
- 티스토리챌린지
- CodeStates
- 자바스크립트
- 노마드코더
- 프로그래머스
- 자격증
- 알고리즘
- 모던 자바스크립트 deep dive
- js
- 공부를 가장한 일기일지도
- K-Digital Credit
- boj
- 오블완
- SQLD
- 개발자북클럽
- 엘리스코딩
- 백준
- Do it! 시리즈
- 제로베이스
- SQL 개발자
- nomadcoders
- 노마드 코더
- 노개북
- 구름edu
- 최원영 저자
- IT 지식
- javascript
- 비전공자를 위한
- 이해할 수 있는
Archives
- Today
- Total
개발자를 희망하는 초보의 자기개발 이야기
자주 사용하는 마크다운 문법 12가지 본문
반응형
마크다운이란?
마크다운(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. 이미지(  )
- <img>와 비슷한데 사이즈 조절이 불가하다는 단점이 있다.
- 사이즈를 조절하려면 마크다운 말고 <img>로 처리하도록 한다.

9. 이미지 링크( [](URL) )
- 7번과 8번을 합치면 된다.
- 혹시 몰라 시도해봤다가 발견했는데 <a><img>보다 활용도는 떨어지는 듯.
[](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>
반응형
'프론트엔드(Front-end)' 카테고리의 다른 글
[카카오 로그인] Kakao Developers 설정 (1) | 2025.03.05 |
---|---|
코딩 질문 잘하는 방법 (0) | 2024.08.22 |
웹의 주요 프로그래밍 언어 3가지 (2) | 2023.11.04 |
당신이 몰랐던 웹 이야기 (0) | 2023.11.04 |
웹 개발과 웹 작동방식이란? (2) | 2023.11.03 |