우리는 흔히 티스토리와, 벨로그, 깃허브에서 글을 작성 시에 볼 수 있는 마크다운을 볼 수 있다.
개인적으로 깃허브의 README.md를 잘 만들어보고 싶어서, 인터넷 강의를 보고 실습했던 내용을 정리해보고자 한다.
마크다운(Markdown)이 뭐지? 🧐
웹 작성자를 위한 텍스트-HTML 형식 구문입니다. 마크다운을 사용하면 읽기 쉽고 쓰기 쉬운 일반 텍스트 형식을 사용하여 작성한 다음 구조적으로 유효한 XHTML(또는 HTML)로 변환할 수 있습니다.
- 마크다운 공식사이트
정의 그대로, 글을 간편하게 작성할 수 있게 해주고 HTML이나 XHTML로 변환해주는 보조도구라고 할 수 있다.
마크다운을 작성하는 방법! ✏️
제목(Header)
#의 개수로 h1~h6까지 표현이 가능하다.
# h1
## h2
### h3
#### h4
##### h5
###### h6->
h1
h2
h3
h4
h5
h6
줄바꿈(Line Breaks)
줄을 바꿀 소요가 있을 때,
태그를 사용한다.(README.md를 작성 시에, 스페이스 두 번으로도 줄바꿈이 가능하다!)
괜찮지 않아 그런 건<br/>
내 룰은 나만 정할래 yeah<br/>
볼 거야 금지된 걸<br/>
Never hold back 더 자유롭게<br/>->
괜찮지 않아 그런 건
내 룰은 나만 정할래 yeah
볼 거야 금지된 걸
Never hold back 더 자유롭게
강조(Emphasis)
폰트를 강조하는 스타일들은 아래와 같이 작성이 가능하다.
_이텔릭_
**두껍게**
**_이텔릭 + 두껍게_**
~~취소선~~
<u>밑줄</u>->
이텔릭
두껍게
이텔릭 + 두껍게
취소선
밑줄
목록(List)
순서가 필요한 목록, 순서가 없는 목록 이렇게 2가지를 작성할 수 있다.
순서가 필요한 목록: 숫자. 으로 표기
순서가 없는 목록: - , * , + 세 가지 모두 동일하게 작성되고, Tab이나 스페이스 바 2번으로 들여쓰기로 표기
* 들여쓰기 시 자동으로 다른 모양으로 위계를 나눌 수 있다.
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 필요한 목록
- 순서가 없는 목록
- 순서가 없는 목록->
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 필요한 목록
- 순서가 없는 목록
- 순서가 없는 목록
- 순서가 필요한 목록
- 순서가 없는 목록
- 순서가 필요한 목록
- 순서가 없는 목록
링크(Link)
링크는 '표현할 텍스트'로 표현할 수 있다.
기존 html에선
<a href="https://google.com">GOOGLE</a>
이렇게 적는 것을
[GOOGLE](https://google.com)로 간단하게 표현할 수 있다.
+
<a href="https://naver.com" title="NAVER로 이동!">NAVER</a>
[NAVER](https://naver.com "NAVER로 이동!")
a태그 부분을 호버했을 때, 툴팁도 나오게끔 할 수 있다.이미지(Images)
이미지는 ''로 표현할 수 있다.
+ 링크와 같이 활용하면 다음과 같이 쓸 수 있다.
[](https://www.daum.net/)
인용문(BlockQuote)
'>'를 활용하여 인용문을 사용할 수 있다.
> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> (네이버 국어 사전)
> 인용문 작성
>
> > 중첩된 인용문
> >
> > > 3중첩된 인용문 1
> > > 3중첩된 인용문 2->
남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)
인용문 작성
2중첩된 인용문
3중첩된 인용문 1
3중첩된 인용문 2
인라인 코드(Inline Code)
'백틱(`)'을 사용하여 인라인 코드를 작성할 수 있다.
`인라인 코드 작성 방법`->인라인 코드 작성 방법
블록 코드 강조(Block Code Highlight)
'백틱(`)' 3개 뒤에 작성할 블록의 종류를 넣어서 사용할 수 있다.
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>.list > ul {
position: absolute;
top: 20px;
}function func() {
let a = "123";
return a;
}$ git commit -m "마크다운 연습"내일도 서울과 청주의 한낮 기온 28도로 중부 지역은
낮더위가 계속되겠구요.
전국적으로 자외선이 강하겠습니다.->
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>.list > ul {
position: absolute;
top: 20px;
}function func() {
let a = "123";
return a;
}$ git commit -m "마크다운 연습"내일도 서울과 청주의 한낮 기온 28도로 중부 지역은
낮더위가 계속되겠구요.
전국적으로 자외선이 강하겠습니다.표(Table)
'버티컬바(|)'와 '하이픈(-)'을 조합하여 표를 만들 수 있다.
기본적으로 표는 왼쪽 정렬이며, :--:는 중앙 정렬, --:는 오른쪽 정렬을 의미한다.
| 값 | 의미 | 기본값 |
| -------- | :---------------: | -----: |
| static | 기준 없음 | 0 |
| relative | 요소 자신 | X |
| absolute | 위치 상 부모 요소 | X |
| fixed | 뷰포트 | X |->
| 값 | 의미 | 기본값 |
|---|---|---|
| static | 기준 없음 | O |
| relative | 요소 자신 | X |
| absolute | 위치 상 부모 요소 | X |
| fixed | 뷰포트 | X |
수평선(Horizontal Rule)
*, -, _을 연달아 3개를 입력하여 수평선을 표현할 수 있다.(셋 다 결과는 동일)
***
---
___지금까지, 간단하게 마크다운을 작성하는 기본적인 문법들의 사용법을 알아보았다.
다루지 않은 요소들이 있을 수 있는데, 보다 자세한 사항은 공식문서들을 참고해봐도 좋을 것 같다.
