숑

숑

멈추지 않기!

github readme에서도 사용하는 마크다운 작성법을 알아보자

2 분 소요

마크다운 작성법

markdown이란 언어를 github readme 파일에서 처음 접했다. 이후 깃허브 블로그를 시작하면서 깃헙 블로그의 포스팅과 개인 기록용으로 아주 잘 쓰고 있는 메모앱(강력추천👍) notion이 markdown 파일(확장자는 .md)로 작성된다는 것을 알게 됐고, 본격적으로 학습을 시작했다!

목표

  • 마크다운을 자유자재로 활용할 수 있다.

마크다운의 특징은 다음과 같다

텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다.

마크다운의 장점

  1. 문법이 쉽다. (30분이면 배울 수 있다!)
  2. 별도의 도구없이 작성가능하다.
  3. 지원하는 프로그램과 플랫폼이 다양하다.

장점이 있다면 단점도 있는 법!

마크다운의 단점

  1. 표준이 없다.
  2. 도구에 따라서 변환방식과 생성물이 다르다.
  3. 모든 html 마크업을 대체하진 못한다.

이제 본격적으로 작성법에 대해 알아보자.

제목 적기

변환되는 html태그: <h> 제목을 적는 방법으로는 두가지가 있다.

  1. 제목 앞에 #을 입력 
    # 제목 1  
## 제목 2  
### 제목 3  
#### 제목 4  
##### 제목 5  
###### 제목 6

    result :

제목 1

제목 2

… 이하생략

  1. 제목 밑에 ======, ------를 입력하는 방법 (6글자)
제목글1
======

제목글2
------

result :

제목글1

제목글2

개인적으로는 #을 붙여주는 편이 훨씬 편했다.

강조하기

변환되는 html태그 : <em>태그, <strong>태그, <\del>태그 기울임(Italic),두껍게(bold), 취소선(Strikethrough), 단어 블록을 표현하는 방법은 다음과 같다.

*기울임* , _이것도 기울임_
*두껍게* , __이것도 두껍게__
__*기울이면서 두껍게*__
~~취소선~~
`단어블록`

result :
기울임 , 이것도 기울임
두껍게 , 이것도 두껍게
기울이면서 두껍게
취소선
단어블록

인용문 작성하기

변환되는 html태그: <blockquote>태그

>인용문 작성해보기   
 -인용문

>인용문 작성해보기
>> >를 추가할수록
>>> 바가 늘어남!

result :

인용문 작성해보기 -인용문

인용문 작성해보기

>를 추가할수록

바가 늘어남!


리스팅하기

변환되는 html태그: <ol>태그와 <ul>태그 번호로 리스팅 하는 법은 다음과 같다.

1. 첫줄
2. 둘째줄
3. 셋째줄

result :

  1. 첫줄
  2. 둘째줄
  3. 셋째줄

재밌는건 숫자의 순서와 상관없이 위에서 순서대로 1. 2. 3.이 출력된다는 점이다. 예를들어

2. 첫줄
1. 둘째줄
3. 셋째줄

이라고 적어도 결과는 위와 동일하다.

순서없이 리스팅 하는 법은??

- 첫줄
  - 둘째줄
    - 셋째줄

result :

  • 첫줄
    • 둘째줄
      • 셋째줄

- 이외에도 +나 *을 활용해도 동일한 효과를 볼 수 있다! 개인적으로 shift키를 안 눌러도 되는 - 를 자주 쓰고있다.

코드블럭

변환되는 html태그: <pre><code>태그 코드를 강조할 때 자주 보이는 code 블록이다. ` (1 왼쪽에 있는)를 세번 입력하면 된다. (해당 character가 grave라고 불린다는 것은 markdown을 배우면서 처음 알았다.) 사용된 언어를 이어적어주면 문법 별로 highlight 되어 출력된다!👍

```java
public static void main(args[0]){
  // code...
}
```

result :

public static void main(args[0]) {
  // code...
}

대신 ~~~` 로도 가능하다.

링크 달기, <a> 태그

링크는 집적 url을 입력하는 방식과 상대적으로 참조하는 방식, 두가지 방식으로 달 수 있다.

[구글](https://google.com)
[네이버](https://naver.com "마우스를 오버하면 보이는 설명(title)")
[상대적 참조](../)

[daum]: https://daum.net
[카카오][daum]

[1]: https://github.com
[GitHub][1]

구글 : https://google.com
네이버 : <https://naver.com>

result : 구글 네이버 상대적 참조

카카오

GitHub

구글 : https://google.com 네이버 : https://naver.com


이미지 삽입

변환되는 html태그: <img>태그 이미지를 삽입하는 방법은 링크와 마찬가지로 집적 URL을 입력할수도 있고, 참조할 수도 있다.


![이미지가 없을 시 나올 메세지](이미지URL "마우스 오버시 출력 되는 이미지 설명")

![루앙프라방](https://cdn.pixabay.com/photo/2020/02/25/09/57/luang-prabang-4878453_1280.jpg "루앙프라방 전경")

![백합][참조이미지]

[참조이미지]: https://cdn.pixabay.com/photo/2019/06/17/06/43/rose-4279205_1280.jpg "백합 이미지"

이미지가 없을 시 나올 메세지

이미지가 없을 시 나올 메세지

백합

표

변환되는 html태그: <table>태그 간단한 테이블도 표현할 수 있다! 헤더와 내용은 |---|를 통해 구분하고, 그 줄에 :를 통해 각 열을 정렬할 수 있다

|날짜|아침|점심|저녁|
|---|:---|:---:|---:|
|1일|달걀후라이|짜장면|볶음밥|
|2일|샐러드|설렁탕|닭볶음탕|
날짜 아침 점심 저녁
1일 달걀후라이 짜장면 볶음밥
2일 샐러드 설렁탕 닭볶음탕


기타 : 개행,수평선,밑줄

개행(줄바꾸기) : <br> 혹은 띄어쓰기 세번 수평선 : ---, ***, ___ 밑줄긋기 : <u>내용<u> 밑줄긋기 에서 보이듯이 html에서 지원하는 태그라면 집적 태그를 입력하여도 된다.


끝으로

마크다운 언어의 사용법에 대해 정리해 보았다. 참고로 markdown을 쉽게 작성할 수 있도록 도와주는 에디터들이 여러가지 있는데, 나는 atom을 사용하고 있다. 다운로드 링크 atom 에디터에서 세팅(ctrl+,)으로 들어가서 Packages에 markdown-preview-enhanced 를 인스톨하고 ctrl+shift+m 단축키를 통해 내가 작성한 마크다운 문서의 미리보기를 할 수 있다.

댓글남기기

참고