More Tags

1. > <p> paragraph 하나의 문단
   
2. > <pre> HTML에 작성한 내용 그대로 표현
   
3. > <cite> 저작문의 출처를 표기
   
4. > <strong> 굵은 글씨로 표시
   
5. > <mark> 하이라이트 처리
   
6. > <s> 취소선
   
7. > <sub> & <sup> 아래 첨자 & 위 첨자
8. > <ruby> + <rp> & <rt> 발음, 번역 등을 텍스트로 표현
9. > <small> & <big> 글씨 크기
   
10. > <hr> 분리선
    
11. > <details> & <summary> 세부사항 & 요약
    
12. > <dialog> 대화 상자
    

> <p> paragraph 하나의 문단

Oh, in case I don't see you, Good afternoon, good evening, and good night.

<p>
    Oh, in case I don't see you,
    Good afternoon, good evening,
    and good night.
</p>

> <pre> HTML에 작성한 내용 그대로 표현

    Oh, in case I don't see you,
    Good afternoon, good evening,
    and good night.

<pre>
    Oh, in case I don't see you,
    Good afternoon, good evening,
    and good night.
</pre>

> <cite> 저작문의 출처를 표기

Mona Lisa 레오나르도 다 빈치, 1503년

<p><cite>Mona Lisa</cite> 레오나르도 다 빈치, 1503년</p>

> <strong> 굵은 글씨로 표시

This is Strong Strong Strong

This is <strong>Strong Strong Strong</strong><br>

> <mark> 하이라이트 처리

This is Mark Mark Mark

This is <mark>Mark Mark Mark</mark><br>

> <s> 취소선

There will be a few tickets available at the box office tonight.

SOLD OUT!

<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>

> <sub> & <sup> 아래 첨자 & 위 첨자

log₁₀ H₂O A_n X²

<p>log<sub>10  </sub>H<sub>2</sub>O  A<sub>n  </sub>X<sup>2</sup></p>

> <ruby> + <rp> & <rt> 발음, 번역 등을 텍스트로 표현

Computer ( 컴퓨터 )

<ruby>
    Computer <rp>(</rp>
    <rt>컴퓨터</rt>
    <rp>)</rp>
</ruby>

> <small> & <big> 글씨 크기

The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.

<p>
<small>The content is licensed under a Creative Commons <big>Attribution-ShareAlike 2.5 Generic License.</big></small>
</p>

> <hr> 분리선

---

<hr>

> <details> & <summary> 세부사항 & 요약

클릭 시 세부사항 내용 확인 가능

Hello?

표시 될 내용 지정 가능

Summary

This is summary!

<details>Why would somebody use this?</details>
<details>
    <summary>Summary</summary>This is summary!
</details>

> <dialog> 대화 상자

bye:)

<dialog open>
    <p>bye:)</p>
</dialog>

---

참고

HTML Elements

Nomad Coders

Continue with CSS 알아보기