velog 마크다운

0xMegg·2021년 9월 27일
5
post-thumbnail

마크다운

텍스트로 만드는 HTML. 자동 분류화를 통해 가독성과 접근성을 올려줄 수 있습니다.
앞으로 velog에 글을 써야하니 우선적으로 익혀두려 합니다.

제목

#의 갯수에 따라 정해지며, #과 텍스트는 붙일 수 없습니다.

📌 입력

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

📌 결과

h1

h2

h3

h4

h5
h6

코드블럭

잘 정리된 개발자 블로그에서 보이던 그 것. 항상 멋져보이던 그것을 내가 지금 쓰고 있다. 신난다.

코드블럭은 Tab 한번에 자동으로 생성됩니다.

다만 한 제목 밑에 하나의 코드블럭만 탭으로 자동으로 생성되는것 같습니다. 
아님이 확인되면 수정하겠습니다.

그렇기에 좀 더 제대로 활용하고 싶다면 백 틱(`) 3개를 위 아래로 기입하면 원하는 만큼의 코드 블럭이 생성됩니다.

이 안에서
엔터도 칠 수 있다
2021 Pentafort lineup is s**t
Do not say it a Rock Festival

특정 언어의 코드를 코드 블럭에 넣고 싶으면 윗 백틱들 뒤에 언어명을 선언해 Syntax Highlighting을 할 수 있습니다.

언어명선언방식
Bashbash
Cc
C#cs
C++cpp
CSScss
Diffdiff
HTML, XMLhtml
HTTPhttp
Iniini
JSONjson
Javajava
JavaScriptjavascript
PHPphp
Perlperl
Pythonpython
Rubyruby
SQLsql

📌 입력

```java
public class helloWorld{
	public void main(String[] args) {
		System.out.println("Welcome back Glen Check");
	}
}
```(코드 블럭을 백틱 3개로 마무리 하는 법을 몰라서 넣은 괄호입니다.) 

📌 결과

public class helloWorld{
	public void main(String[] args) {
		System.out.println("Welcome back Glen Check");
	}
}

가로선

접하기도 많이 접했고, 직접 만든적도 많지만 이름을 몰랐던 그것
구글에 'html hr'을 검색해서 가로선이란 이름을 찾아왔다

지금의 글 처럼 여러 주제를 한 글에서 말할 때, 주제들을 가장 쉽게 시각적으로 분리해주는 도구입니다.

---(-를 3개 이상 기재)
***(*을 3개 이상 기재)
- - -(-를 공백을 섞어 3개 이상 기재)
* * *(*을 공백을 섞어 3개 이상 기재)





인용

한국인들의 글 보다 외국인들의 글에서 많이 보이던 그것. 이 글에선 마크다운의 실행 결과를 모두 인용처리 하였습니다.

📌 입력

Bill Evans
>꺾쇠를 쓰는 순간부터 인용이 시작된다
>>Jimmi Heath
>>>Miles Davis quintet
>Ella Fitzgerald
>>>>>Louis Armstrong
>>>>>>The Dave Brubeck Quartet
>>>>>>이전 줄보다 꺾쇠가 많아질 때마다 중첩된다
꺾쇠가 없어도 마지막 인용에 포함된다

한 칸 이상 띄면 인용 밖으로 나가진다

📌 결과

Bill Evans

꺾쇠를 쓰는 순간부터 인용이 시작된다

Jimmi Heath

Miles Davis quintet
Ella Fitzgerald

Louis Armstrong

The Dave Brubeck Quartet
이전 줄보다 꺾쇠가 많아질 때마다 중첩된다
꺾쇠가 없어도 마지막 인용에 포함된다

한 칸 이상 띄면 인용 밖으로 나가진다


리스트

html에서와 같이 불릿형, 숫자형이 존재한다.

개념을 배우고 정리할 때 많이 쓰일 리스트. 리스트라고 불러야 하는게 맞나 싶지만 일단은 그렇게 적고 나중에 명칭을 알게 되면 수정하겠습니다.


리스트 역시 html과 동일하게 불릿형 리스트와 숫자형 리스트가 있고, 불릿형 리스트의 입력과 결과는 이렇습니다.

📌 입력

+ 더하기, 빼기, 별 하나를 적으면 모두
- 불릿형 리스트가 생성됩니다
* 저 세개를 최대한 활용해서 쉽게 만든게 마크다운 같습니다
  + 기호 앞에 2~5회의 띄어쓰기를 하면 
       + 리스트의 리스트를 만들 수 있습니다
         + 검은 원, 흰 원, 검은 사각형이 나오길래 그 다음이 흰 사각형일줄 알았던건
           + 저 뿐인가요?

📌 결과

  • [] 더하기, 빼기, 별 하나를 적으면 모두
  • 불릿형 리스트가 생성됩니다
  • 저 세개를 최대한 활용해서 쉽게 만든게 마크다운 같습니다
    • 기호 앞에 2~5회의 띄어쓰기를 하면
      • 리스트의 리스트를 만들 수 있습니다
        • 검은 원, 흰 원, 검은 사각형이 나오길래 그 다음이 흰 사각형일줄 알았던건
          • 저 뿐인가요?

불릿형 리스트엔 체크박스를 붙일 수 있습니다.

📌 입력

* [ ] 체크되지 않은 박스
- [x] 체크된 박스

📌 결과

  • 체크되지 않은 박스
  • 체크된 박스

숫자형 리스트의 입력과 결과는 이렇습니다.

📌 입력

1. 숫자형
2. 리스트입니다
4. 혹시 눈치 채셨나요
3. 2 다음 숫자는 4입니다

📌 결과

  1. 숫자형
  2. 리스트입니다
  3. 혹시 눈치 채셨나요
  4. 2 다음 숫자는 4입니다
  • 체크되지 않은 박스
  • 체크된 박스

강조하기

원하는 영역의 글씨를 기울이고, 굵게 만들고, 취소선을 넣어서 강조할 수 있습니다.

📌 입력

+이탤릭+
-기울이기-
*이탤릭*
++볼드++
--굵게--
**볼드**
~~취소선~~

📌 결과

기울이기
이탤릭
굵게
볼드
취소선


링크

그래서 공주 이름이 젤다죠?

링크는 3가지가 있다

- 인라인 링크
[인라인 링크](url "마우스오버 기능")
[velog 링크](https://velog.io/ "velog로 이동")

- url 링크
<url>
<https://velog.io/>

- 참조링크
[저장명]:url
[불러올 참조명]

이미지 삽입

링크와 문법이 유사하지만 앞에 !가 붙습니다.

📌 입력

![대체텍스트](이미지 url "마우스오버")
![케이트 블란쳇](https://www.suntiros.com/wp-content/uploads/2021/07/Cate-Blanchett-750x450.jpg "여신")
[![대체택스트](이미지 url)](url "마우스오버")
[![대체텍스트](https://www.suntiros.com/wp-content/uploads/2021/07/Cate-Blanchett-750x450.jpg)](https://www.google.com/search?q=cate+blanchett&oq=cate+blanchett&aqs=chrome..69i57j69i59j0i512l3j69i60l3.4236j0j4&sourceid=chrome&ie=UTF-8 "여신 구글링")

📌 결과
케이트 블란쳇
대체텍스트


표 만들기

th, tr 구분과 정렬 정도 활용 가능한 간단한 표를 만들 수 있습니다.
  • |로 열을 구분합니다.
  • -로 th, tr을 구분합니다.
  • :로 정렬을 정할 수 있습니다.

입력된 내용에 따라 표가 자동으로 보기 좋게 만들어지는 대신 세부적인 설정은 할 수 없습니다.

📌 입력

|  |우측정렬|중앙정렬|좌측정렬
|--|:----|:----:|----:
|1열|l1   |  c1  |   r1
|2열|l2   |  c2  |   r2
|3열|l3|c3|r3

📌 결과

우측정렬중앙정렬좌측정렬
1열l1c1r1
2열l2c2r2
3열l3c3r3

특수문자 사용하기

마크다운의 표현식에 쓰이는 몇 특수문자들은 문장의 처음에 쓸 수 없습니다. 이럴땐 \를 앞에 붙이는 것으로 해결됩니다.

📌 입력

\*
\#
\+
\-
\\

📌 결과
*
#
+
-
\


문단간 간격 벌리기

마크다운은 간단한 방법으로 보기 좋은 글을 만드는 용도로 만들어졌는지 문단 사이에 엔터를 아무리 쳐도 간격이 벌어지지 않습니다.
이때 <br>을 통해 html과 같은 방식으로 사이를 벌릴 수 있습니다.

📌 입력

1




2
<br>
3
<br>
<br>
<br>

4

📌 결과

1

2


3





4


글자 색상

html과 동일한 방법으로 글짜 색을 바꿀 수 있습니다.

📌 입력

<span style="color:red">red</span>
<span style="color:#d3d3d3">#d3d3d3</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>

📌 결과

red
#d3d3d3
rgb(245, 235, 13)


마치며

공부한 것을 정리하려고 블로그를 만들었습니다. velog에 글을 적으려면 마크다운이 필요하길래 앞으로의 공부 겸 앞으로의 연습 삼아 마크다운을 정리해봤습니다. 이해도가 높지 않아 틀린 부분이 있거나 부족한 부분이 있을 수 있으나 수정사항을 깨달으면 항상 업데이트 하겠습니다.

참고 문서
https://velog.io/@ybkim3603/Velog벨로그-사용법-튜토리얼
https://velog.io/@yuuuye/velog-마크다운MarkDown-작성법

profile
코미디언

1개의 댓글

comment-user-thumbnail
2021년 10월 8일

우와 엄청 잘 정리되어있네요~

답글 달기