마크다운(Markdown) 언어 사용법 정리

여상우·2022년 6월 9일
0

velog를 시작하며 여기에서는 GitHub의 Readme.md 파일에서처럼 '마크다운 언어'를 사용한다는 점을 알게되었다.
따라서 금방 까먹어버릴 나를 위해 😂 새로이 Markdown Language를 정리하기로 했다.


1. Headers(제목)

큰 제목

< 실제 코드의 모습 >

     문자
  =====

큰 제목을 적을 때는 글을 적고 아래에 '='으로 줄을 그어주면(3개이상) 자동적으로 위에 적은 글자들이 큰 제목이 된다.

작은 제목

< 실제 코드의 모습 >

     문자
  -------
작은 제목을 적을 때는 글을 적고 아래에 '-'으로 줄을 그어주면(3개이상) 자동적으로 위에 적은 글자들이 작은 제목이 된다.

  • 추가 팁
    HTML도 그렇고 대부분의 Markup언어에서 스페이스바(공백)은 &nbsp로 사용한다.
    또한 '&' 은 &amp이고, '<'는 &lt 이며 '>'은 &gt이다.

h1

h2

h3

h4

h5
h6

#를 n개 사용하고 띄어쓰기를 한 번 한 뒤에 문자를 작성하면 해당 글씨는 크기를 조절 가능하다.

< 실제 코드의 모습 >

# h1
## h2
### h3
#### h4
##### h5
###### h6


2.BlockQuote(인용문)

인용박스

인용박스 안에 인용박스

인용박스 안에 인용박스 안에 인용박스

인용박스 안에 인용박스 안에 인용박스 안에 인용박스

< 실제 코드의 모습 >

>인용박스
>>인용박스 안에 인용박스
>>>인용박스 안에 인용박스 안에 인용박스
>>>>인용박스 안에 인용박스 안에 인용박스 안에 인용박스


목록 작성하기(숫자)

  1. 딸기
  2. 사과
  3. 파인애플
  4. 수박

< 실제 코드의 모습 >
1. 딸기
2. 사과
3. 파인애플
4. 수박
적어나가면 1, 2, 3, 4가 주루룩 목록으로 작성이 된다. 대신 중요한 점! 숫자.'띄어쓰기'를 꼭 해줘야 한다는 점이다.
(띄어쓰기 중요!!!)

목록 작성하기(점)

  • 딸기
    • 사과
      • 파인애플
        • 수박

< 실제 코드의 모습 >
- 딸기
  - 사과
    - 파인애플
      - 수박
위처럼 점으로도 목록을 작성할 수 있는데 이 때 '-(하이픈), +(플러스), *(별표시)'셋 중 하나를 쓰고 한 번 띄어쓰기 한 후 문자를 작성하면 자동적으로 목록이 작성된다.
그리고 엔터로 줄바꿈 한 뒤에 '하위 목록'으로(여기서는 까만 동그라미 하위에 빈 동그라미!) 하나 더 목록을 추가하고 싶다면 '공백 2개' 이후에 '-(하이픈), +(플러스), *(별표시)'를 사용하면 하위 목록으로 작성이 가능하다.

보니까 공백 2개 이상 입력하고 코드를 입력하면 하위목록으로 인식하는데, 만약 공백을 입력하지 않거나 1개 일 경우엔
똑같이 까만 점으로(동일 목록) 인식한다. 즉 공백 2개부터 줄바꿈으로 인식하는 것 같다!!

3. Code(코드 작성)


  1. <'pre'><'code'>{code}<'/code'><'/pre'> 를 이용한 방법!
    (따옴표는 빼고 사용하세요!)

public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}

< 실제 코드의 모습 >
<'pre'>
<'code'>
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, Honeymon");
}
}
<'/code'>
<'/pre'>

pre 태그는 있는 그대로를 보여주는 태그이고, code 태그는 이것이 code 형식임을 보여주는 태그!
하지만 태그 앞 뒤로 태그 2개씩 적는건 좀 귀찮아보이는데..

  1. '코드블럭' 코드(```) 을 이용하는 방법
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}

< 실제 코드의 모습 >
```
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, Honeymon");
}
}
```

backtick, 혹은 grave accent로 불리는 따옴표 비스무리한 기호(`) 3개를 연달아 코드 앞 뒤에 적으면 중간의 코드가 코드로 표현이 된다. 이게 pre나 code 태그를 쓰는 것 보다 더 편하긴 한데 작은따옴표(')랑 헷갈릴 수 있음...!

  • 주의점
    '(작은따옴표, apostophe)와 "(쌍따옴표, quotation mark-인용마크) ₩(역슬래시 한글, 윈도우형)
    `(악센트, 또는 프라임, backtick이나 grave accent로 부름)
    위 기호들을 구분할 줄 알아야 하고 구분해서 사용해야 한다!

따옴표는 보통 문자열 작성할 때 많이들 사용해봤을거고.. ₩표시는 윈도우에서 디렉토리를 구분할 때 사용하는 기호이다.(역슬래시, 리눅스에서는 슬래시 / 사용)
그럼 `는 뭘까?
키보드에서 1 왼쪽에 위치한 기호로 프로그래밍에서는 보통 backtick 기호라고 부른다.
Javascript를 경험한 사람들은 알고 있겠지만, 문장과 변수를 섞어서 사용할 때 가끔 이 기호를 사용 할 때가 있는데
이 때 사용하는 기호이다. 그럼 키보드에서 1 옆의 키를 누르면 바로 입력이 되느냐... 또 그건 아니지

'영문 입력상태'에서 1 옆의 키를 누르면 backtick이 입력되고, '한글 입력상태'에서 1 옆의 키를 누르면 ₩가 입력된다. 이 무슨 ...

기본 한글 입력기의 특성이 그러하다고 하니.. 상황에 맞춰서 특수기호를 잘 입력하도록 하자 저것때문에 날린 시간이


3. GitHub에서 특징적으로 사용할 수 있는 방법
public class BootSpringBootApplication {
  public static void main(String[] args) {
    System.out.println("Hello, Honeymon");
  }
}

GitHub에서는 코드블럭코드(```) 시작점에 사용하는 언어를 추가적으로 선언해서 문법강조(Syntax highlighting aka.예쁜색깔)이 가능하다.

< 실제 코드의 모습 >
```java
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, Honeymon");
}
}
```

4. 선 긋기

* * *

***

*****

- - -

---

얘들은 3개 이상 연속적으로(붙여서든 띄어서든) 사용하면 문단을 나눌 때 유용한 선을 그을 수 있다!!(아래처럼)



5. 문자에 간단한 효과 적용하기

이탤릭체
볼드체
취소선
언더바

< 실제 코드의 형태 >
*이탤릭체* _이탤릭체_
**볼드체** __볼드체__
~~취소선~~
<u태그> 언더바 <u태그>
(위의 세 종류는 띄어쓰기 하지 않아야 적용된다)

6. 이미지 첨부하기

< 실제 코드의 형태 >

아래와 같이 ![ ] 다음에 괄호를 붙이고 이미지의 경로를 지정해주면 된다.
![](path/image.jpg)


이렇게 간단하게나마 마크다운 문법을 정리해봤는데, 정리하면서 어느정도 나 스스로도 정리가 된 것 같다 👍
앞으로 꾸준히 velog를 작성하며 개발한 내용들을 공유하고, 정리하고 마크다운 문법에도 익숙해 질 수 있도록!✌️✌️

profile
Keep forwarding person.

0개의 댓글