본문 바로가기

FrontEnd/HTML

#1. HTML TEXT(텍스트) 요소

반응형

# tag 목록을 볼 수 있는 페이지로 이동합니다.
# HTML의 TEXT 요소를 확인합니다.

# box 하단에는 사용된 예시를 보여줍니다.

<!-- 제목 -->
<h1></h1>
<h2></h2>
<h6></h6>

 

<!-- 단락 -->
<p></p>

 

<!-- 줄바꿈 -->
<br>

 

<!-- 텍스트 서식 미리 정의 -->
<pre></pre>

<!-- 예시 -->
<pre>
  AXCE 의
  BLOG
</pre>

 

<!-- 수평 가로 구분선 -->
<hr>

<!-- 예시 -->
<hr>
  <p>미리보기</p>
<hr>

 

<!-- 굵은 글씨 -->
<b></b>
<strong></strong>

<!-- 예시 -->
<p><b>굵은 글씨</b> 입니다.</p>
<p><strong>굵은 글씨 강조</strong> 입니다.</p>

 

<!-- 이탤릭체 -->
<i></i>
<em></em>

<!-- 예시 -->
<p><i>이탤릭체</i> 입니다.</p>
<p><em>이탤릭체 강조</em> 입니다.</p>

 

<!-- 하이라이팅 효과 -->
<mark></mark>

<!-- 예시 -->
<p><mark>하이라이팅 효과</mark> 입니다.</p>

 

<!-- 삭제효과 -->
<del></del>

<!-- 예시 -->
<p><del>"이부분"</del>을 삭제합니다.</p>

 

<!-- 삽입 효과 -->
<ins></ins>

<!-- 예시 -->
<p><ins>"밑줄 친 부분"</ins>입니다.</p>

 

<!-- 아래첨자, 위첨자 -->
<sup></sup>
<sub></sub>

<!-- 예시 -->
<p>X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup></p>
<p>H<sub>2</sub>O</p>

 

<!-- 짧은 인용구 -->
<q></q>

<!-- 예시 -->
<p>이 글은 <q>짧은 인용구</q>를 위한 글입니다.</p>

 

<!-- 블록 인용구 -->
<blockquote></blockquote>

<!-- 예시 -->
<p>HTML 정의</p>
<blockquote>블록 인용구 1 <br> 블록 인용구 1-1 </blockquote>
<blockquote>블록 인용구 2 </blockquote>

 

<!-- 축약형 표현 -->
<abbr title="마우스를 올리면 나타나는 문구"></abbr>

<!-- 예시 -->
<p><strong><abbr title="HyperText Markup Language 5">HTML5</abbr></strong> 정의</p>

 

<!-- 주소 표현 (이탤릭체로 표현, 위아래 공백 자동추가)-->
<address></address>

<!-- 예시 -->
<address>
  대전광역시<br>
  서구 복수서로 10
</address>

반응형