4. 다양한 것들을 만들어 보자

글의 가독성과 정리의 편리성을 위한 것들을 익혀두자.

> 버튼을 보면 누르고 싶지

아무튼 난 그렇다.

INPUT

이렇게 생겨도
{: .btn .fs-1}  
저렇게 생겨도
{: .btn .btn-outline .fs-8}  
[무언갈 담아도](http://google.com){: .btn .btn-green}  
[일단](http://example.com/){: .btn .btn-purple .mr-2 }
[눌러본다](http://example.com/){: .btn .btn-blue }

OUTPUT

> 라벨지도 못 참지

언젠가는 유용하게 쓰지 않을까…?

INPUT

파란 휴지줄까
{: .label .label-blue}
빨간 휴지줄까
{: .label .label-red}
노랑으로 주세요
{: .label .label-yellow}

OUTPUT

> 표

typora 덕분에 표 만드는게 어렵지는 않지만 방법은 알아두자.

INPUT

|한글|영어|숫자|
| --- | --- | --- |
|하나|One|1|
|둘|Two|2|
|삼|Three|3|

OUTPUT

> 리스트 만들기를 시작하자 헛, 둘, …

목차로도 사용하기 좋고, 사항을 적어나갈 때 유용하다.

INPUT

1. 저기 손님
1. 순서를 지키세요
- 싫어요
- [ ] 순서 지키기
- [x] 순서 안지키기

OUTPUT

그리고 HTML에서 사용된다는 형식이 있길래 주서 왔다.

Definition lists require HTML syntax and aren’t supported with the GitHub Flavored Markdown compiler.

INPUT

<dl>
  <dt>이름</dt>
  <dd>아무개</dd>
  <dt>나이</dt>
  <dd>아무살</dd>
</dl>

OUTPUT

> 여백과 간격 지정

css에 대해 좀 더 공부를 하고 나면 응용할 수 있겠지.. ㅠ

Spacing

These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.

Spacing values are based on a 1rem = 16px spacing scale, broken down into these units:

Use mx-auto to horizontally center elements.

Horizontal Alignment

Note: any of the flex- classes must be used on a parent element that has d-flex applied to it.

Vertical Alignment

Display

Display classes aid in adapting the layout of the elements on a page:

Use these classes in conjunction with the responsive modifiers.

This button will be hidden until medium screen sizes:

[ A button ](#url)
{: .d-none .d-md-inline-block }

These headings will be `inline-block`:

### heading 3
{: .d-inline-block }

### heading 3
{: .d-inline-block }