[HTML] 글자 관련 태그(텍스트 태그)

제목태그

• <h?></h?>
• 제목을 입력할 때 사용하는 태그
• 폰트의 크기는 h태그 뒤 숫자에 따라 정해져있다.
• 번호가 증가할수록 크기가 작아진다.

 

<코드>

<!-- 제목 관련 태그 -->
<h1> 첫번째로 큰 제목 </h1>
<h2> 두번째로 큰 제목 </h2>
<h3> 세번째로 큰 제목 </h3>
<h4> 네번째로 큰 제목 </h4>
<h5> 다섯번째로 큰 제목 </h5>
<h6> 여섯째로 큰 제목 </h6>

 

 

<결과>

 

문단 태크

• <p></p> : 한 개의 단락을 만들 때 사용하는 태그, 모든 문장 작성 후 자동으로 문장 개행 후 한 줄 공백을 준다.
• <pre></pre> : 입력한 그래도 출력할 때 사용하는 태그

 

<코드>

<!-- 문단 태그 -->
<p>
   문단 영역을 나누는 태그로는 p태그와 pre 태그가 있다.
   p태그는 문단 영역을 나누는 태그이고, 자동으로 문장 개행 후 한줄 공백을 준다.
   줄 바꿈 입력은 별도의 태그로 지정해줘야한다.
</p>
    
<pre>
    문단 영역을 나누는 태그로는 p태그와 pre 태그가 있다.
    pre태그는 띄어쓰기, 여러칸 띄우기, 들여쓰기, 줄바꿈 등이 포함되어
    내용 그대로 표현하는 태그이다.
</pre>

 

<결과>

 

줄바꿈 태그 및 공백

• <br> : 문장을 줄 바꾸기 할 때 사용하는 태그
• <hr> : 줄 바꿈 후 수평선을 넣는 태그
• &nbsp; : 공백을 넣고 싶을 때 사용

 

<코드>

<hr> <!--줄 바꿈 후 수평선을 넣는 태그>
<p>
      문단 영역을 나누는 태그로는 p태그와 pre 태그가 있다.
      <br> <!--줄바꿈 태그-->
      p태그는 문단 영역을 나누는 태그이고, 자동으로 문장 개행 후 한줄 공백을 준다.
      &nbsp;&nbsp; <!--띄어쓰기-->
      줄 바꿈 입력은 별도의 태그로 지정해줘야한다.
</p>
<hr>

 

<결과>

 

텍스트 속성 태그

• <strong></strong>, <b></b> : 글자를 굵게 표시하는 태그
• <em></em>, <i></i> : 글자를 기울이는 태그
• <mark></mark> : 형광펜 효과를 나타내는 태그
• <u></u> : 글자에 밑줄을 긋는 태그
• <small></small> : 글자를 작게 표시하는 태그
•  : 아래첨자를 나타내는 태그
•  : 윗첨자를 나타내는 태그
• <s></s> : 글자에 취소선을 놓는 태그

 

<코드>

일반 글꼴
<br>
<strong>글자를 굵게 표시하는 태그</strong>
<br>
<b>글자를 굵게 표시하는 태그</b>
<br>
<em>글자를 기울이는 태그</em>
<br>
<i>글자를 기울이는 태그</i>
<br>
<mark>형광펜 효과를 나타내는 태그</mark>
<br>
<u>글자에 밑줄을 긋는 태그</u>
<br>
<small>글자를 작게 표시하는 태그</small>
<br>
기본 글자에 <sub>아래첨자</sub>를 나타내는 태그와 <sup>윗첨자</sup>를 나타내는 태그
<br>
<s>글자에 취소선을 놓는 태그</s>

 

<결과>