3. 글자를 만져보자
위처럼 글씨를 크게 설정하고 주제와 본문을 구분하여 작성해야 글을 정리할 때 용이하다.
기초적인 마크다운 문법을 정리해두고 필요할 때 찾아와서 다시 읽자.
내가 자주 확인하러 올 class
모음집이다.
.code-example
: 문장을 블럭 안에 포장한다
.text-red-000
: 빨간 문장을 만든다
<div class="code-example"></div>
:
블럭 안에 포함한다
> 머리와 몸통을 구분하자
이 글의 시작처럼 head
와 body
내용을 구분하여 작성하고 싶으면 아래처럼 하자.
INPUT
# One
## Two
### Three
#### Four
##### Five
###### Six
OUTPUT <div
1
2
3
4
5
6
> 네모난 상자 안에 글 넣기
테마에서 제공한 예시이다. 쪼금만 생각해보니 code-example.css가 있나 싶어 찾아봤다.
요로코롬 내용이 존재하면 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 value | Font color utility | Background 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 value | Font color utility | Background 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 value | Font color utility | Background 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 value | Font color utility | Background 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 value | Font color utility | Background 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 value | Font color utility | Background 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 value | Font color utility | Background 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와 같이 제공된 설정은 언제든지 태그들에서 사용할 수 있으니 유용하게 써야겠다.