마크다운
텍스트로 만드는 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을 할 수 있습니다.
| 언어명 | 선언방식 |
|---|---|
| Bash | bash |
| C | c |
| C# | cs |
| C++ | cpp |
| CSS | css |
| Diff | diff |
| HTML, XML | html |
| HTTP | http |
| Ini | ini |
| JSON | json |
| Java | java |
| JavaScript | javascript |
| PHP | php |
| Perl | perl |
| Python | python |
| Ruby | ruby |
| SQL | sql |
📌 입력
```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 FitzgeraldLouis Armstrong
The Dave Brubeck Quartet
이전 줄보다 꺾쇠가 많아질 때마다 중첩된다
꺾쇠가 없어도 마지막 인용에 포함된다
한 칸 이상 띄면 인용 밖으로 나가진다
리스트
html에서와 같이 불릿형, 숫자형이 존재한다.개념을 배우고 정리할 때 많이 쓰일 리스트. 리스트라고 불러야 하는게 맞나 싶지만 일단은 그렇게 적고 나중에 명칭을 알게 되면 수정하겠습니다.
리스트 역시 html과 동일하게 불릿형 리스트와 숫자형 리스트가 있고, 불릿형 리스트의 입력과 결과는 이렇습니다.
📌 입력
+ 더하기, 빼기, 별 하나를 적으면 모두
- 불릿형 리스트가 생성됩니다
* 저 세개를 최대한 활용해서 쉽게 만든게 마크다운 같습니다
+ 기호 앞에 2~5회의 띄어쓰기를 하면
+ 리스트의 리스트를 만들 수 있습니다
+ 검은 원, 흰 원, 검은 사각형이 나오길래 그 다음이 흰 사각형일줄 알았던건
+ 저 뿐인가요?📌 결과
- [] 더하기, 빼기, 별 하나를 적으면 모두
- 불릿형 리스트가 생성됩니다
- 저 세개를 최대한 활용해서 쉽게 만든게 마크다운 같습니다
- 기호 앞에 2~5회의 띄어쓰기를 하면
- 리스트의 리스트를 만들 수 있습니다
- 검은 원, 흰 원, 검은 사각형이 나오길래 그 다음이 흰 사각형일줄 알았던건
- 저 뿐인가요?
불릿형 리스트엔 체크박스를 붙일 수 있습니다.
📌 입력
* [ ] 체크되지 않은 박스
- [x] 체크된 박스📌 결과
- 체크되지 않은 박스
- 체크된 박스
숫자형 리스트의 입력과 결과는 이렇습니다.
📌 입력
1. 숫자형
2. 리스트입니다
4. 혹시 눈치 채셨나요
3. 2 다음 숫자는 4입니다📌 결과
- 숫자형
- 리스트입니다
- 혹시 눈치 채셨나요
- 2 다음 숫자는 4입니다
- 체크되지 않은 박스
- 체크된 박스
강조하기
원하는 영역의 글씨를 기울이고, 굵게 만들고, 취소선을 넣어서 강조할 수 있습니다.📌 입력
+이탤릭+
-기울이기-
*이탤릭*
++볼드++
--굵게--
**볼드**
~~취소선~~📌 결과
기울이기
이탤릭
굵게
볼드
취소선
링크
그래서 공주 이름이 젤다죠?링크는 3가지가 있다
- 인라인 링크
[인라인 링크](url "마우스오버 기능")
[velog 링크](https://velog.io/ "velog로 이동")
- url 링크
<url>
<https://velog.io/>
- 참조링크
[저장명]:url
[불러올 참조명]
- 인라인 링크
velog 링크- url 링크
https://velog.io/- 참조링크
velog 링크
이미지 삽입
링크와 문법이 유사하지만 앞에 !가 붙습니다.📌 입력
[](url "마우스오버")
[](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열 l1 c1 r1 2열 l2 c2 r2 3열 l3 c3 r3
특수문자 사용하기
마크다운의 표현식에 쓰이는 몇 특수문자들은 문장의 처음에 쓸 수 없습니다. 이럴땐 \를 앞에 붙이는 것으로 해결됩니다.📌 입력
\*
\#
\+
\-
\\📌 결과
*
#
+
-
\
문단간 간격 벌리기
마크다운은 간단한 방법으로 보기 좋은 글을 만드는 용도로 만들어졌는지 문단 사이에 엔터를 아무리 쳐도 간격이 벌어지지 않습니다.
이때 <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-작성법
우와 엄청 잘 정리되어있네요~