2022-12-25 오후 11:39 최초 작성
수정 날짜 : 2022-12-29
현재 텍스트를 줄여주는 코드가 제대로 먹지 않음을 확인하였습니다
해당 게시글은 인터넷 검색을 기반으로 작성됩니다. 또한 지식이 쌓이는 대로 갱신할 예정입니다. 혹시 오류가 있다면 댓글로 지적해주시면 감사하겠습니다.
참고 자료 : 1 / 2 / 3 / 4 / 5 / 6 / 7 / [8] / [9] (추가될 수 있음)
목차
0. 마크다운에 대하여
1. 글 작성
1) 헤더 작성하기
2) 본문 작성하기
2. 링크
1) 내부 링크
2) 외부 링크
3) 이미지 삽입
3. 특수
1) 테이블
2) 가로줄
3) 코드
4) 인용
5) 체크 표시
6) 목록
4. 기타
0. 마크다운에 대하여
마크다운이란 무엇이며 어떻게 쓰는가?
마크다운에 대해 한 번 쯤은 들어보았을 것이다. 마크다운은 문서 작성을 위한 문법으로, HTML과 연동이 된다. 마크다운은 velog뿐만 아니라 여러가지 장소에서 쓰이고 있는데, 문법이 간편하고 쓰기 쉽다는 장점도 있지만, 각 장소마다 문법이 조금씩 상이하다는 단점 역시 있다.
이 글에서는 velog에서의 마크다운 사용법을 적어내려갈 것이다. 내용은 지속적으로 추가 및 수정될 것이며, 최대한 즉시 사용할 수 있도록 작성할 것이다.
1. 글 작성
1) 헤더 작성하기
html에서는 헤더 작성을 위해 따로 <h1></h1>과 같이 작성해주어야 한다. (작성자는 html 문법을 배우지 않았으므로 해당 예시는 틀릴 수도 있음에 주의할 것. 추후 정확히 수정할 예정.) 벨로그에서는 간단히 샵#을 작성해주는 것으로 헤더를 작성할 수 있다. 샵의 양이 많아질수록, 헤더의 크기는 작아진다.
# 안녕하세요 (H1)
## 안녕하세요 (H2)
### 안녕하세요 (H3)
#### 안녕하세요 (H4)
##### 안녕하세요 (H5)
###### 안녕하세요 (H6)
####### 안녕하세요 (실행안됨)
실제 보이는 방식 :
안녕하세요 (H1)
안녕하세요 (H2)
안녕하세요 (H3)
안녕하세요 (H4)
안녕하세요 (H5)
안녕하세요 (H6)
####### 안녕하세요 (실행안됨)
2) 본문 작성하기
벨로그에서 가장 쉽게 접할 수 있는 본문 편집 방식은 Bold, Italic, Bold-Italic, 취소선이다. 이것들은 누르는 방식만으로도 실행이 가능하지만, 직접 기호를 사용하여 작성하여도 된다.
**Bold**
__Bold__
*Italic*
_Italic_
***Bold-Italic***
___Bold-Italic___
~~취소선~~실제 실행 :
Bold
Bold
Italic
Italic
Bold-Italic
Bold-Italic
취소선
이와 같이 나타나지만, 기본 글자 크기나 글자 색상 등이 마음에 들지 않아서 변경하고 싶을 수도 있다. 이 때에는 html의 형식을 살짝 빌려온다.
<span style="font-size:80%"> 글자 크기를 기존의 80%로 줄입니다.</span>
<span style="color:red">빨간 글씨를 씁니다.</span>
<span style="background-color:yellow">노란 형광펜을 칠합니다.</span>
<span style="color:yellow; background-color:red; font-size:80%">동시</span>
줄바꿈을 합니다.</br>
    네 칸 띄어쓰기를 합니다.
<center>가운데</center>실제 실행 :
글자 크기를 기존의 80%로 줄입니다.
가운데
빨간 글씨를 씁니다.
노란 형광펜을 칠합니다.
동시
줄바꿈을 합니다.
네 칸 띄어쓰기를 합니다.
2.
1) 내부 링크
내부 링크를 작성하는 방법에 대해 안내한다.
<a name="note1"></a><sup>[예시](#page1)</sup>
<a name="page1"></a>[예시](#note1)
이 두 개는 상호로 움직이며 이동한다.
sup은 위첨자, sub은 아래첨자이다.
각주나 목차 등을 사용할 때 유용할 것이다.
목차 또한 이러한 방식으로 연결해두었다.2) 외부 링크
벨로그에서의 외부링크를 구성하는 방식에 대해 말한다.
인라인링크 [link](https://velog.io/)
url 링크 <https://velog.io/>
위와 아래는 동일 링크이다.인라인링크 link
url 링크 https://velog.io/
3) 이미지 링크
벨로그에서 이미지를 작성하고 이미지에 링크를 거는 방법에 대해 알아본다. 
사용할 이미지는 이것이다. 이미지 사이즈가 줄어들지 않는 문제로 점검 필요
이미지 삽입하기
이미지에 설명 넣기
이미지에 링크 걸기
[](https://naver.com/ "네이버로 연결됩니다.")
이미지 사이즈 조절 (위 사진과 동일하므로 실제 사용에는 제외하겠음.)
<img src="https://velog.velcdn.com/images/job2022/post/5da2a153-bd11-420d-9454-b728f5f8c6cc/image.png" width="50%" height="50%">
이미지에 설명 넣기
이미지에 링크 걸기
# 엑박이 뜨는 문제로 좀 더 해결책을 찾아봐야할 것 같음.
3. 특수
1) 테이블
테이블을 만들 수 있다. 이 때, 의미와 예제 라인의 선들에 집중해보라. 그렇다면 콜론(:)기호가 양 옆에 있으면 가운데에 글자가 위치하지만, 왼쪽 또는 오른쪽만 있다면 왼쪽 정렬, 오른쪽 정렬이 된다는 것을 쉽게 알 수 있다.
| 기호 | 의미 | 예제 | 결과 |
|:----------:|----------:| :----------| :----------: |
|**+**| 숫자의 합 | a+b | 5 |
|**-**| 숫자의 차 | a-b | -1 |
|*****| 숫자의 곱 | a*b | 6 |
기호 의미 예제 결과 + 숫자의 합 a+b 5 - 숫자의 차 a-b -1 * 숫자의 곱 a*b 6
2) 가로줄
가로줄을 작성할 수 있다. 이때 실제 사용을 보면 가로 선의 굵기가 달라보인다. 그러나 이것은 기호별로 가로선의 굵기가 다른 것이 아닌, 가로선의 개수에 따라 자동으로 굵기가 바뀐 것임을 알고 보면 좋다.
---
- - -
-----
***
* * *
*****실제 사용 :
3) 코드
코드를 작성할때는 ```과 같이 세번 써서 코드를 감싼다.
``` 여기에 컴퓨터 언어 이름 작성하면 코드의 색이 바뀐다.
(코드를 작성할 것. 다만 반드시 두 ```와 코드는 다른줄에 있어야한다.)
(맨 위의 ```뒤에 사용하는 컴퓨터 언어 이름을 소문자로 작성하면)
(그 컴퓨터 언어의 코드로 인식이 되어서 코드의 색이 바뀐다) ``` (파이썬 코드)
a = 0
if a == 0
print("a는 %d이다." % a)4) 인용
인용에는 단어인용과 전체인용이 있다.
단어 인용 : `이렇게 나옵니다`
전체 인용 :
> 이렇게 나옵니다.
>> 이렇게도 넣을 수 있습니다.
>>> 총
>>>> 원하는 횟수까지
>>>>> 가능합니다.
그렇습니다. 단어 인용 : 이렇게 나옵니다
전체 인용 :
이렇게 나옵니다.
이렇게도 넣을 수 있습니다.
총
원하는 횟수까지
가능합니다.
그렇습니다.
5) 체크 표시
쉽고 빠르게 예시로 보여드리겠습니다.
- [ ] 체크리스트
* [ ] 체크리스트
+ [ ] 체크리스트
- [] 띄어쓰기를 안 하면 이렇게 되어요
*[] 띄어쓰기를 안 하면 이렇게 되어요
+ [x] 괄호에 x를 쓰면 체크상태에요.
- 체크리스트
- 체크리스트
- 체크리스트
- [] 띄어쓰기를 안 하면 이렇게 되어요
*[ ] 띄어쓰기를 안 하면 이렇게 되어요
- 괄호에 x를 쓰면 체크상태에요.
6) 목록
+
-
*
1. 글을 쓰면 이렇게 써집니다.
한칸 아래로 내려가면 자동으로 줄이 맞춰집니다.
2.
아무것도 안쓰고 줄바꿈을 하면 숫자 뒤에 작성됩니다.
* 안녕하세요
+ + 반갑습니다.
- - 빈 원은 어떻게 다루는지 모르겠어요.
- 글을 쓰면 이렇게 써집니다.
한칸 아래로 내려가면 자동으로 줄이 맞춰집니다.- 아무것도 안쓰고 줄바꿈을 하면 숫자 뒤에 작성됩니다.
- 안녕하세요
- 반갑습니다.
- 빈 원은 어떻게 다루는지 모르겠어요.
4. 기타
아직 채울 내용이 없습니다.
