본문 바로가기
Front-end/HTML

[HTML] 1. 태그 종류?

by oomm112 2022. 4. 13.
태그<tag>의 종류?

A. 기본 요소 태그

<html>		<!-- 웹 페이지의 시작과 끝을 의미하는 태그 -->
	<head>		<!-- 웹 페이지의 정보 , 문서에 필요한 외부파일 등을 넣는 곳 -->  
    	<meta charset = "utf-8">	<!-- 웹페이지의 문자열 인코딩 태그 -->
        
    	<title> 제목단 </title>	<!-- 제목이 들어갈 태그 -->      
    </head>
    
    <body>		<!-- 브라우저에서 실제로 표시되는 내용이 들어갈 곳 -->
    </body>
</html>

HTML을 만들면 위의 기본 요소 태그들을 기본적으로 가지며, 기본 태그들은 없으면 HTML이 제대로 작동하지 않습니다.

 


B. 텍스트 관련

 

<h1> ~ <h6>   :   제목을 표현할떄 주로 사용하며 h1이 제일 크며, h6이 제일 작다.

<h1>1</h1>
<h2>2</h2>
...
<h6>6</h6>

 

 

<p>     :    단락을 나타내는 태그

<p>새문단</p>
//새 문단을 여는 태그이다.

 

<pre>   :    HTML코드에서 작성한 텍스트 서식을 그대로 표현하고 싶을 시 [띄어쓰기 줄 바꿈 모두 표시]

<pre>
줄을 나눌 수 있습니다.

이런식 으로
</pre>

 

<hr>  :  구분선 표시

 


C. 서식 태그

 

<b> or <strong>  :  강조태그            =>      bold

<p> <b>이 부분만 강조</b> 나머지는 그대로</p>

 

<i> or ><em>   :   italic체 표시          =>       italic

<p> <i> 강조 할 부분</i> 만 강조 합니다</p>
<p> <em> 이 부분만 강조</em> 합니다</p>

 

<mark>    :    텍스트에 하이라이팅 효과를 넣을 수 있습니다.    =>  하이라이팅

<p> <mark> 하이라이팅 </mark>부분만 </p>

 

<del>     :  텍스트 중앙에 가로줄을 만들어 삭제된 것 처럼 표시     =>   제거한것 처럼

<p><del>삭제 처럼</del> 만들어 보기</p>

 

<ins>     :  텍스트 밑에 가로줄          =>    밑의 가로줄

<p><ins>밑줄 긋기</ins>부분만</p>

 

<sup>  : 위 첨자      /     <sub> : 아래 첨자 

 


D. 인용 태그

 

<q>    :    짧은 인용구 태그   =>  "태그"

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

 

<blockquote>   :    태그 안에 있는 글을 별도의 단락으로 뺴준다.

<blockquote>
이 단락만 별도로 뺴기
</blockquote>

 

<abbr title="명시한 용어 원형">   :   마우스를 올릴시 설명이 나오는 태그

<strong><abbr title="Tag">태그</strong>

 

<address>   :  주소를 표현할 수 있는 태그 (이탤릭체로 표현하며, 위아래 약간의 공백 자동 삽입)

<address>
	서울특별시<br> 
	강남구 테헤란로
</address>

 

<!-- 주석  -->  :   주석 태그입니다.

 


E. 엔티티

HTML에서 미리 예약된 몇몇 문자를 웹 브라우저에서 그대로 사용하기 위한 코드.

 

엔티티 문자 이름 16진수 엔티티 숫자 설명
  &nbsp; &#160; 줄바꿈
< &lt; &#60;  
> &gt; &#62;  
& &amp; &#38;  
" &quot; &#34;  
' &apos; &#39;  

이 밖에도 여러가지 엔티티 코드가 있습니다.

 

그 밖에 많은 태그들? http://www.tcpschool.com/html-tags/title

반응형

'Front-end > HTML' 카테고리의 다른 글

[HTML] 0. HTML 이란?  (0) 2022.04.10

댓글