본문 바로가기
개발/HTML

HTML의 기본 태그들(1)

by 두리두리안 2021. 3. 13.

본문 태그

속성  설명 
background 배경 이미지(파일 이름이나 URL)를 저정 
bgcolor 배경색을 지정
text 글꼴 색을 지정
link 링크 색을 지정
vlink 방문했던 링크 색을 지정
alink 링크를 클릭하는 순간의 색을 지정

 

예제 코드 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor ="#000000" text="#FFFFFF">
	<!-- 두번째로 작성한 HTML-->
	안녕하세요 두번째 HTML 파일
</body>
</html>

 

주석의 단축키는 Ctrl + Shift + /이다. 

 

위의 코드에선 body에서 bgcolor와 text 태그를 사용하였으며 두개의 색상을 지정해주었다. 

 

문단 태그 

<br> tag

줄바꿈을 하는 태그이다.  끝tag가 필요없지만 <br/> 이런씩으로 사용하는것이 좋다.

 

<p> tag

단을 나누는 태그이다. 단을 정렬할 때 많이 사용한다.  

끝태그는 없지만 코드에서는 시작과 끝을 구분하는 것이 좋다.

 

속성 설명
align  문단의 정렬(left, right, center)을 지정한다. 기본은 left이다. 

 

예제 코드 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 연습</title>
</head>
<body>
   띄워쓰기 연습<br/>
 <p>
  최 민 준<br/>
  최&nbsp;민&nbsp;준&nbsp;<br/>
  최&nbsp;&nbsp;&nbsp;민&nbsp;&nbsp;&nbsp;준&nbsp;&nbsp;&nbsp;<br/>
 <p/>
 
 <p align="center">
 김 민 준<br/>
 김&nbsp;민&nbsp;준&nbsp;<br/>
 김&nbsp;&nbsp;&nbsp;민&nbsp;&nbsp;&nbsp;준&nbsp;&nbsp;&nbsp;<br/>
 </p>
 
 <p align="right">
 이 민 준<br/>
 이&nbsp;민&nbsp;준&nbsp;<br/>
 이&nbsp;&nbsp;&nbsp;민&nbsp;&nbsp;&nbsp;준&nbsp;&nbsp;&nbsp;<br/>
 </p>
 
</body>
</html>

<hr> tag

수평선을 표시해 준다.

속성 설명
align 수평선의 정렬방식 (left, right,center)을 지정
color 수평선의 색을 지정
size 수평선의 굴기를 지정. 단위는 숫자
width 수평선의 가로 길이(픽셀이나 %)를 지정
noshade 그림자가 없는 평면의 수평선을 지정, 색을 사용하면 자동

<h> tag

1부터 6사이의 숫자와 함께 사용하여 글꼴 크기를 지정하는 태그이다. 

head line을 표시하는 용도로 사용

 

예제 코드 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <p align="center">
   H태그와 HR태그!
 </p>
 
 <hr/>
 <!-- 전체 화면의 가로 분할 선-->
 <hr width="20%"/>
 <hr width="20%" align="left"/>
 <hr width="20%" align="left" size="5"/>
 <hr width="20%" align="left" size="5" color="#FF0000"/>

 <!-- 분할 선 색상-->
 <p align="center">
   <h1>안녕하세요</h1>	
   <h2>안녕하세요</h2>	
   <h3>안녕하세요</h3>	
   <h4>안녕하세요</h4>	
   <h5>안녕하세요</h5>	
   <h6>안녕하세요</h6>	
 </p>
</body>
</html>

text tag

<font> tag

글꼴이나 글꼴의 크기, 글꼴 색 등 텍스트와 관련된 속성을 지정할 때 사용

속성 설명
face 글꼴(굴림체, 궁서체, 바탕체)을 지정
color 글꼴 색(색상이나 색상코드)을 지정
size 글꼴의 크기를 지정 (1~7)한다. 기본값은 3이며
여기에 +,-로 지정 

<marguee> tag

인터넷 익스플로러에서만 지원하는 태그로 글자나 이미지를 상하좌우로 움직일 수 있게 한다. 

속성 설명
behavior 스크롤 형태(scroll, slide, alternate)을 지정
direction 스크롤 방향(left, right, up, down)을 지정한다.
scrolledlay 스크롤 지연 속도(숫자)를 지정한다. 단위는 1/1000초이다.
srcollmount 스크롤 픽셀 수를 지정
bgcolor 스크롤 영역의 배경색 지정
height 스크롤 영역의 높이를 지정
width 스크롤 영역의 넓이르 지정
loop 스크롤 반복 횟수를 지정 기본값(infinite)이다. 

<font> tag 이외의 태그 

속성 설명
<b>, <strong> 텍스트를 굵게 표시
<i>, <em> 텍스트를 이탤릭체로 표시
<u> 텍스트에 밑줄을 표시
<sup>, <sub> 텍스트를 위 첨자나 아래 첨자로 표시
<s> 텍스트를 가로지르는 선을 표시
<address> 주소나 연락처를 표시
<pre> 코드에 작성한 내용을 그대로 표시 할 때 사용
<blockquote> 문단을 들여써서 하나의 덩어리로 표시 할 때 사용
<xmp> 코드에 작성한 내용중 태그도 그대로 표시 할때 사용

'개발 > HTML' 카테고리의 다른 글

[Restart-HTML] 종류와 중요도에 따른 태그  (0) 2022.07.18
폼을 구성하는 태그들  (0) 2021.03.13
HTML 페이지 분할과 페이지 포함 태그  (0) 2021.03.13
HTML의 기본 태그들(2)  (0) 2021.03.13