Link Search Menu Expand Document

3. 글자를 만져보자

위처럼 글씨를 크게 설정하고 주제와 본문을 구분하여 작성해야 글을 정리할 때 용이하다.
기초적인 마크다운 문법을 정리해두고 필요할 때 찾아와서 다시 읽자.

내가 자주 확인하러 올 class 모음집이다.

.code-example : 문장을 블럭 안에 포장한다

.text-red-000 : 빨간 문장을 만든다

<div class="code-example"></div>:

두 개 이상의 문장을
블럭 안에 포함한다





> 머리와 몸통을 구분하자

이 글의 시작처럼 headbody 내용을 구분하여 작성하고 싶으면 아래처럼 하자.


INPUT

# One
## Two
### Three
#### Four
##### Five
###### Six


OUTPUT <div

1

2

3

4

5
6





> 네모난 상자 안에 글 넣기

테마에서 제공한 예시이다. 쪼금만 생각해보니 code-example.css가 있나 싶어 찾아봤다.

3_1

요로코롬 내용이 존재하면 class 태그에서 사용할 수 있다는 점을 기억하자.


INPUT

<div class="code-example" markdown="1">
hello, my blog
</div>
```
hello, my blog
```


OUTPUT

hello, my blog

hello, my blog





> 글자 형태 바꾸기

먼저 굵게, 기울이기, 취소 선, 링크와 같은 설정하는 방법이다.

INPUT

**굵게** | _기울이기_ | ~~취소선~~ | [이건 보여주는 링크](이건 실제 링크)


OUTPUT

굵게기울이기취소선이건 보여주는 링크



다음은 글자 크기와 정렬, 글자 너비 지정 방법이다.

INPUT

글자 크기를 작게도
{: .fs-1}
글자 크기를 크게도
{: .fs-10}
글자를 가운데로
{: .text-center}
글자를 넓게도
{: .fw-300}
글자를 좁게도
{: .fw-700}
<span class="fs-1">뭐든지</span> <span class="fs-1"></span> 수 있다


OUTPUT

글자 크기를 작게도

글자 크기를 크게도

글자를 가운데로

글자를 얇게도

글자를 굵게도

뭐든지 수 있다





> 글자 색칠하기

알아낸 방법으로는 2가지 방법이 존재한다.
첫번째 방법을 사용할 경우, 깔끔한 코드로 줄 전체의 색을 입힐 수 있고,
두번째 방법을 사용할 경우, 더러워지지만 일부 글자만 색을 입힐 수 있다.

다만 첫번째를 사용할 경우에는 일부 글자만 색을 입히긴 힘들다.
첫번째 방법은 “{. text-색-번호}” 를 문장 아래에 작성해주는 것이다.

* markdown에서 {: .} 를 사용하면 custom class를 적용할 수 있다


INPUT

나는 파란색
{: .text-blue-000}
나는 초록색
{: .text-green-000}

근데 typora에서는 미리보기가 불가능한데 그 이유가 테마에서 제공된 class라 그렇다.

OUTPUT

나는 파란색

나는 초록색



css로 지정되어 있기에 태그할 때 사용할 수 있는데 사용 가능한 색들은
아래 기본적으로 제공되었던 표를 첨부해두었다

Light Greys

Color valueFont color utilityBackground color utility
grey-lt-000.text-grey-lt-000.bg-grey-lt-000
grey-lt-100.text-grey-lt-100.bg-grey-lt-100
grey-lt-200.text-grey-lt-200.bg-grey-lt-200
grey-lt-300.text-grey-lt-300.bg-grey-lt-300

Dark Greys

Color valueFont color utilityBackground color utility
grey-dk-000.text-grey-dk-000.bg-grey-dk-000
grey-dk-100.text-grey-dk-100.bg-grey-dk-100
grey-dk-200.text-grey-dk-200.bg-grey-dk-200
grey-dk-250.text-grey-dk-250.bg-grey-dk-250
grey-dk-300.text-grey-dk-300.bg-grey-dk-300

Purples

Color valueFont color utilityBackground color utility
purple-000.text-purple-000.bg-purple-000
purple-100.text-purple-100.bg-purple-100
purple-200.text-purple-200.bg-purple-200
purple-300.text-purple-300.bg-purple-300

Blues

Color valueFont color utilityBackground color utility
blue-000.text-blue-000.bg-blue-000
blue-100.text-blue-100.bg-blue-100
blue-200.text-blue-200.bg-blue-200
blue-300.text-blue-300.bg-blue-300

Greens

Color valueFont color utilityBackground color utility
green-000.text-green-000.bg-green-000
green-100.text-green-100.bg-green-100
green-200.text-green-200.bg-green-200
green-300.text-green-300.bg-green-300

Yellows

Color valueFont color utilityBackground color utility
yellow-000.text-yellow-000.bg-yellow-000
yellow-100.text-yellow-100.bg-yellow-100
yellow-200.text-yellow-200.bg-yellow-200
yellow-300.text-yellow-300.bg-yellow-300

Reds

Color valueFont color utilityBackground color utility
red-000.text-red-000.bg-red-000
red-100.text-red-100.bg-red-100
red-200.text-red-200.bg-red-200
red-300.text-red-300.bg-red-300



위 설명된 방법을 이용하면 문장에 색을 입힐 수 있지만
문장의 일부 글자에만 색을 입히는게 안되는 것 같다
내가 못찾은 것 같긴 하지만 대체 방법을 알아왔다

INPUT

사실 내가 원하던 건 <span style="color:yellow">이런 거</span> 였는데 생각보다 어렵다
그래도 <span class="text-green-000">이런 게</span> 필요하다


OUTPUT

사실 내가 원하던 건 이런 거 였는데 생각보다 어렵다
그래도 이런 게 필요하니 찾아봤다



막상 하고 보니 기본적으로 적용된 css가 무엇인지 궁금해졌는데 이것도 기본 제공에 포함이 되어 있었다. 테마의 default로 설정되어있는 값들을 수정하고 싶으면 _sass/support/variables.scss 파일을 수정하면 된다. 또한 color value와 같이 제공된 설정은 언제든지 태그들에서 사용할 수 있으니 유용하게 써야겠다.