Markdown cheat sheet

Program

---

• Typora: window, ios, linux

Font style

---

__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~취소선~
~~취소선~~
<u>아래밑줄</u>

Emoji

---

이모티콘 삽입은 : 사이에 mark down emoji code를 끼워 넣으면 된다.

:gem: == : gem :

code cheat sheet <- 이분이 정리를 잘해주셨다.

Image

---

html 코드로 가운데 정렬 및 사이즈 조절 가능하다.

<p align="center"> 
<img src="https://xx.png" 
height="130px" width="100px"
alt="explain"> 
captions
</p>

• reference

응용: 이미지에 링크 걸기

누르면 블로그 daily 페이지로 이동한다

<a href="링크"> 
<img src="이미지링크">
</a>

#or

[![웅앵](이미지 위치){:w="200"}](링크)

Highlight

---

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>

글씨 배경색 변경

<span style="background-color:#ffd966ff; color:white">background</span>

	자주쓰는색상코드
EF5A68	EEEE63	CE97FB
FC5046	B5E045	D273FF
FF96B6	0055A5	CAC9FF
FFC701	219DFF	D4DDFF
FDDF7E	87D4FF	ECD4FF
9794a9	BAEFFF	FFD9F7

• reference

Color picker 프로그램 추천

---

• Colorpicker
  :heavy_check_mark: github

텍스트 정렬

---

가운데 정렬

<center> 웅앵 </center>

원래 markdown에서 제공하는 정렬은 가운데 정렬뿐이다.

왼쪽 오른쪽 정렬이나 다단을 만들려면 조작이 필요하다.

:bulb: 왼쪽/오른쪽 정렬 및 다단 만들기 방법 1.

그냥 하면 안되더라..

/github.io/_sass/_post.scss 파일에 다음과 같이 넣어줬다.

// allign
  div.pull-right {
    float: right;
    padding-left: 1rem;
  }

  div.pull-left {
    float: left;
    padding-right: 1rem;
  }

  div.text-justify {
    text-align: justify;
  }

:warning: 이 방법은 2단으로 했을 때 좀 문제가 있는데,
왼쪽이던 오른쪽이던 줄이 짧으면 그 다음 평문을 쓸때 둘 사이의 공간으로 먹어 들어간다.
또 너무 길게 써서 중간 이상 넘어가게 쓰면 옆에 단이 아래로 내려가 버림ㅜㅠ
참상은 여기에서 확인

해결방법:
일단은 너무 길게 쓰면 안되고 <br/> 을 적극 활용한다.
짧게 쓰고 뒤에 <br/> 로 줄바꿈
왼쪽 오른쪽 단 다 쓰고 나면 아래에 <br/> 잔뜩 붙여서 아래 줄이 먹지 않게 한다.

• reference

왼쪽 정렬

<div class="pull-left"> 왼쪽 정렬
</div>

오른쪽 정렬

<div class="pull-right"> 오른쪽 정렬
</div>

응용: 두단 쓰기

Yeah, breakfast at Tiffany's and bottles of bubbles
Girls with tattoos who like getting in trouble
Lashes and diamonds, ATM machines
Buy myself all of my favorite things

샴페인과 함께 티파니에서 아침을!
사고치기 좋아하는 타투한 내 친구들,
속눈썹, 다이아, ATM
내가 좋아하는 이 모든 것들을 내돈으로 사지 !

<div style="text-align: left"> 왈랄라 왼쪽 왈라
</div>
<div style="text-align: right"> 왈랄라 오른쪽 왈라
</div>

응용: 이미지랑 같이 쓰기

Left aligned

Float to left

Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.

Float to right

Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.

:bulb: 왼쪽/오른쪽 정렬 및 다단 만들기 방법 2.

css와 javaScript활용한 방법. 자세한 설명은 아래 reference참고.

아래 방법은 reference 보고 내꺼에 적용한 방법

step01. /assets 아래에 multicolumn 폴더 만들어준다.

step02. 그 아래 .js파일과 .min.js 파일 넣어준다.

• .js file

$(function() {
    contentLayAutoWidth();
});

$( window ).resize(function() {
  contentLayAutoWidth();
});

/* 레이아웃의 다단 단수를 100%로 채움 */
function contentLayAutoWidth() {
    $('.multiColumn > .pct').css("width", function(index) {
        var siblingsWidthSum = 0;
        var parentPadding = 1;
        var siblingsMargin = 10;
        var parentWidth = $(this).parent().innerWidth();
        $(this).siblings().each(function() {
            siblingsWidthSum = siblingsWidthSum + ($(this).outerWidth() + siblingsMargin);
        });
        return index = parentWidth - siblingsWidthSum - parentPadding;
    });
}

• .js file로 .min.js 만들어주는 사이트

step03. multicolumn 폴더 아래 css 폴더 만들어주고, 그 아래 css 파일 저장.

• .css file

// multiColumn
.multiColumn div {
    width:20%;
    height:200px;
    margin:0 2px;
    border:1px #ddd solid;
    float:left
}
.multiColumn div.pct {
    border:1px #fdd solid
}

:sparkles: 완성된 구조

├── assets
│   ├── css
│   ├── js  #여기까지 원래 있던 폴더들
│   └── multicolumn #이아래 부터 이번에 만든거  
│       ├── css
│       │	└── multicolumn.css
│       ├── multiColumn.js
│       └── multiColumn.min.js
...

step05. /_layouts/post.html 수정해서 앞서 넣어준 파일들 연동시킨다.

# 맨위에 추가

<!-- multicolumn -->
<link rel="stylesheet" href="/assets/multicolumn/css/multicolumn.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/assets/multicolumn/multiColumn.js"></script>
<script src="/assets/multicolumn/multiColumn.min.js"></script>

• reference

1단

2단

3단

4단

<div class="inline-wrapper">
  <div class='multiColumn'>
    <div>1단 </div>
    <div>2단</div>
    <div class='pct'>3단</div>
    <div>4단</div>
  </div>
</div>

Table

---

|제목|내용|설명|
|:---|---:|:---:|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|
|왼쪽정렬|오른쪽정렬|중앙정렬|

• reference

Toggle

---

<details>
<summary>Title</summary>
<div markdown="1">
왈라왈라
</div></details>
<br/>

Link

---

# 방법1
[링크 이름 지어쓰기](https://xxx.com)

# 방법2
<https://xxx.com>

링크 새창으로 열기

# 방법1
[링크 이름 지어쓰기](https://xxx.com){:target="_blank"}

# 방법2
<a href="https://xxx.com" target="_blank">링크 이름 지어쓰기</a>

• reference

Header link

---

Reference link

---

본문에 각주를 달고 싶은 부분뒤에 [^1]
...

맨 아래 reference를 넣을 부분에 숫자에 맞춰
[^1]: 내용을 적어준다.