Juneer Blog

내가 보려고 만든 마크다운(Markdown) 문법 포스트

 
  • Jan 03, 2022

기초 문법을 정리하고 작성 중 발생할 수 있는 상황별 해결방법에 대해서 정리하고자 한다

기초 문법

엔터, 스페이스바 역할

  • 엔터 1번
    • 같은 단락
       
  • 엔터 2번
    • 다른 단락
      • 단락이 달라진다는 것은 번호기호 등이 다시 처음부터 시작되는것을 의미
         
  • 스페이스바 2번
    • 새로운 행(개행) 만듬

여백 만들기

글머리기호끼리 여백을 두고 싶다거나 하는 상황일 때 스페이스 2번 같은 줄바꿈으로는 줄이 안바뀜
(바로 윗 글에서 띄어쓰기 2번으로 줄바꿈 후)   적어주면 끝
위 방법으로 안 띄어질 시 <br/>\  적어주면 됌

글자 색, 배경 변경

마크다운에서 따로 지원하지 않아서 html 사용해야함

<span style="background-color: #11999e; color:white">글자 색, 배경 변경\</span>

글자 색, 배경 변경

글자 정렬

마크다운은 가운데 정렬만 지원함. 왼쪽 오른쪽은 html 사용해야함

<center>가운데</center>  
<div style="text-align: left">왼쪽</div>  
<div style="text-align: right">오른쪽</div>
가운데
왼쪽
오른쪽

테이블 만들기

html 형식

<table>
<tr>
<td>
<img src="/images/2022-02-16-01-48-30.png">
</td>
<td>
<img src="/images/2022-02-16-02-01-20.png">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<img src="/images/2022-02-16-02-08-28.png">
</td>
</tr>
</table>

-결과화면

  • colspan 속성을 통해 셀 병합을 진행한것도 확인할 수 있다

markdown 형식

기본 생성법

|제목|내용|설명|
|---|---|---|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|
제목 내용 설명
테스트1 테스트2 테스트3
테스트1 테스트2 테스트3
테스트1 테스트2 테스트3

내용 정렬 (왼쪽정렬, 오른쪽정렬, 양쪽정렬)

|왼쪽 정렬입니다|오른쪽 정렬입니다|양쪽 정렬입니다|
|:---|---:|:---:|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|
|테스트1|테스트2|테스트3|
왼쪽 정렬입니다 오른쪽 정렬입니다 양쪽 정렬입니다
테스트1 테스트2 테스트3
테스트1 테스트2 테스트3
테스트1 테스트2 테스트3

코드 블록

Tab키 위에있는 특수문자를 사용하여 작성
```
코드 블록 예시
```

코드 블록 예시

LaTex

절대값, Norm

이름 입력 출력
절대값 \vert \(\vert{x}\)
Norm \lVert x \rVert \(\lVert x \rVert\)  

특수문자

이름 입력 출력
세로 말줄임표 \vdots \(f(x_1) \quad \vdots \quad f(x_2)\)

상황별 해결 방법

아오 특수문자 넣고싶어

https://ascii.cl/htmlcodes.htm

  1. 링크 접속
  2. 원하는 문자 ctrl + k 로 검색
  3. HTML Name 값 적기

HTML에서 마크다운(markdown) 사용하려면?

<div style="text-align: right" markdown="1">
[출처: https://www.youtube.com/watch?v=FXDjmsiv8fI](https://www.youtube.com/watch?v=FXDjmsiv8fI)
</div>

위 그림과 같이 markdown 속성(attribute) 이용

README 같은곳에 비디오를 테이블로 담으려면?

  • 마크다운 테이블이 아니라 html 테이블을 사용한다
  • Github README 같은곳은 mp4는 호환이 되지 않으니 gif로 변환해서 사용하도록 한다 
<table>

<tr align="center"> <!-- 한 줄 생성-->
<td> Cetaphil </td>  <!-- 한 줄에 채울 칼럼 한칸 씩 여는 것 -->
<td> 만능크리너 </td>
</tr>

<tr align="center">
<td>
<video width="80%" autoplay loop muted>
<source src="/videos/Cetaphil.mp4" type="video/mp4">
</video>
</td>

<td>
<video width="80%" autoplay loop muted>
<source src="/videos/만능크리너_편집본.mp4" type="video/mp4">
</video>
</td>
</tr>

<tr align="center">
<td> 정관장 </td>
<td> 딱풀</td>
</tr>

<tr align="center">
<td>
<video width="80%" autoplay loop muted>
<source src="/videos/정관장 편집본.mp4" type="video/mp4">
</video>
</td>
<td>
<video width="80%" autoplay loop muted>
<source src="/videos/딱풀_편집본.mp4" type="video/mp4">
</video>
<td>
</tr>

</table>
  • 결과화면
Cetaphil 만능크리너
정관장 딱풀

PDF 삽입하기

<embed src="/pdf/윈텍 프로젝트_withMarginNotes.pdf" width="100%" height="700px">
</embed>

</embed>

각주 달기

  • 깨알 상식: 각주, 미주 차이?
    • 각주는 각 페이지마다 보충설명을 다는 것, 미주는 문서 끝에 나타내는 것
나는 양호준이다.[^1]

[^1]: 양호준은 인하대학교 석사과정을 마쳤으며 포르쉐 타이칸을 타고 다닌다.
Search