[ Tutorial ] html 태그 및 MarkDown 사용법

다양한 일반적인 마크업 예시를 보여줍니다.

Header two

## Header two

Header three

### Header three

Header four

#### Header four

Header five

##### Header five

Header six

###### Header six

Blockquotes

줄로 된 블록인용문:

Stay hungry. Stay foolish.

> Stay hungry. Stay foolish.

여러 줄로 된 블록인용문과 인용 출처:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

> People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.

Steve Jobs — Apple Worldwide Developers’ Conference, 1997

<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
{: .small}

Tables

Employee	Salary
John Doe	$1	Because that’s all Steve Jobs needed for a salary.
Jane Doe	$100K	For all the blogging she does.
Fred Bloggs	$100M	Pictures are worth a thousand words, right? So Jane × 1,000.
Jane Bloggs	$100B	With hair like that?! Enough said.

| Employee         | Salary |                                                              |
| --------         | ------ | ------------------------------------------------------------ |
| [John Doe](#)    | $1     | Because that's all Steve Jobs needed for a salary.           |
| [Jane Doe](#)    | $100K  | For all the blogging she does.                               |
| [Fred Bloggs](#) | $100M  | Pictures are worth a thousand words, right? So Jane × 1,000. |
| [Jane Bloggs](#) | $100B  | With hair like that?! Enough said.                           |

Header1	Header2	Header3
cell1	cell2	cell3
cell4	cell5	cell6
cell1	cell2	cell3
cell4	cell5	cell6
Foot1	Foot2	Foot3

| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|-----------------------------|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=============================|
| Foot1   | Foot2   | Foot3   |

List 사용하기

정의 목록 제목: 정의 목록 구분.

정의 목록 제목
:   정의 목록 구분.

창업(Startup): 창업 기업 또는 스타트업은 반복 가능하고 확장 가능한 비즈니스 모델을 찾기 위해 설립된 회사 또는 임시적인 조직이다.
Do It Live: I’ll let Bill O’Reilly explain this one.

순서 없는 목록

List item one
- List item one
  - List item one
  - List item two
  - List item three
  - List item four
- List item two
- List item three
- List item four
List item two
List item three
List item four

  * List item one 
      * List item one 
          * List item one
          * List item two
          * List item three
          * List item four
      * List item two
      * List item three
      * List item four
  * List item two
  * List item three
  * List item four

순서 있는 목록

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

  1. List item one 
      1. List item one 
          1. List item one
          2. List item two
          3. List item three
          4. List item four
      2. List item two
      3. List item three
      4. List item four
  2. List item two
  3. List item three
  4. List item four

Forms

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

버튼

.btn 클래스를 적용할 때 링크를 더 강조하도록 만들어주세요.

<a href="#" class="btn--success">Success Button</a>

Default Button Primary Button Success Button Warning Button Danger Button Info Button Inverse Button Light Outline Button

[Default Button Text](#link){: .btn}
[Primary Button Text](#link){: .btn .btn--primary}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}

X-Large Button Large Button Default Button Small Button

[X-Large Button](#link){: .btn .btn--primary .btn--x-large}
[Large Button](#link){: .btn .btn--primary .btn--large}
[Default Button](#link){: .btn .btn--primary }
[Small Button](#link){: .btn .btn--primary .btn--small}

Notices

Watch out! This paragraph of text has been emphasized with the {: .notice} class.

**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice}` class.
{: .notice}

Watch out! This paragraph of text has been emphasized with the {: .notice--primary} class.

**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--primary}` class.
{: .notice--primary}

Watch out! This paragraph of text has been emphasized with the {: .notice--info} class.

**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--info}` class.
{: .notice--info}

Watch out! This paragraph of text has been emphasized with the {: .notice--warning} class.

**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--warning}` class.
{: .notice--warning}

Watch out! This paragraph of text has been emphasized with the {: .notice--success} class.

**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--success}` class.
{: .notice--success}

Watch out! This paragraph of text has been emphasized with the {: .notice--danger} class.

**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--danger}` class.
{: .notice--danger}

HTML Tags

주소 Tag

Namdong-gu
Incheon
South Korea

<address>
  Namdong-gu <br/>Incheon <br/>South Korea
</address>

Anchor Tag (aka. Link)

This is an example of a link.

This is an example of a [link](http://apple.com "Apple").

설명 문구 Tag

The abbreviation CSS stands for “Cascading Style Sheets”.

*[CSS]: Cascading Style Sheets

사이트 Tag

“Code is poetry.” —Automattic

"Code is poetry." ---<cite>Automattic</cite>

코드 Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

You will learn later on in these tests that `word-wrap: break-word;` will be your best friend.

Strike Tag

This tag will let you ~~strikeout text~~.

This tag will let you <strike>strikeout text</strike>.

Emphasize Tag

The emphasize tag should italicize text.

The emphasize tag should _italicize_ text.

밑줄 Tag

This tag should denote inserted text.

This tag should denote <ins>inserted</ins> text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

This scarcely known tag emulates <kbd>keyboard text</kbd>, which is usually styled like the `<code>` tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

<pre>
.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
</pre>

Quote Tag

Developers, developers, developers… –Steve Ballmer

<q>Developers, developers, developers&#8230;</q> &#8211;Steve Ballmer

Strong Tag

This tag shows bold text.

This tag shows **bold text**.

Subscript Tag

Getting our science styling on with H₂O, which should push the “2” down.

Getting our science styling on with H<sub>2</sub>O, which should push the "2" down.

Superscript Tag

Still sticking with science and Albert Einstein’s E = MC², which should lift the 2 up.

Still sticking with science and Albert Einstein's E = MC<sup>2</sup>, which should lift the 2 up.

Variable Tag

This allows you to denote variables.

This allows you to denote <var>variables</var>.

매일 반복되는 일상 속에서도 특별한 순간을 찾을 수 있기를 😊

최상단으로 이동했습니다!

Share on

Twitter Facebook LinkedIn