개발/HTML
HTML의 기본 태그들(1)
두리두리안
2021. 3. 13. 14:30
본문 태그
| 속성 | 설명 |
| 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/>
최 민 준 <br/>
최 민 준 <br/>
<p/>
<p align="center">
김 민 준<br/>
김 민 준 <br/>
김 민 준 <br/>
</p>
<p align="right">
이 민 준<br/>
이 민 준 <br/>
이 민 준 <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> | 코드에 작성한 내용중 태그도 그대로 표시 할때 사용 |