본격적으로 HTML을 작성하면서 이용하는 태그의 종류와 그 이용방법에 대해 알아보겠습니다.
이전 포스트에서 기본적인 HTML문서의 구성을 아래와 같이 설명했습니다.
|
<html> </html> |
html 파일의 시작과 끝을 표시합니다. |
|
<head> </head> |
해당 페이지의 주요 정보 (머리글) |
|
<body> </body> |
해당 페이지의 주 내용 (본론) |
|
<title> </title> |
페이지 상단의 제목 |
|
<meta charset = "UTF-8"> |
해당 페이지는 UTF-8 인코딩 형식을 따른다. |
|
<!-- 내용 --> |
주석 |
기본적인 틀을 토대로 여러 내용들을 삽입할 때 이용하는 태그와 그 작성 방법을 알아봅니다.
1. 글자크기, 줄넘김, Division, 특수문자 입력방법
|
<h[n]> </h[n]> |
구간 내의 글자 크기를 조절 (n은 1~6, 숫자가 작을수로 글자가 커진다. |
|
<br> or <br/> |
줄넘김 |
|
<div> </div> |
Division 구역 설정(문단 설정) |
1) 글자크기를 조절할 때에는 <h[n]> 내용 </h[n]> 태그를 이용합니다.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>1번 문장</h1> <h2>2번 문장</h2> <h3>3번 문장</h3> <h4>4번 문장</h4> <h5>5번 문장</h5> <h6>6번 문장</h6> </body> </html> |
<h1></h1> 태그를 사용하면 태그 사이에 있는 문장은 1사이즈의 폰트 크기로 나타나게 됩니다.
또한 폰트의 사이즈는 1부터 6까지 설정할 수 있으며, 숫자가 작을수록 폰트의 크기는 커집니다.
코드 실행 시
2) 문장의 줄을 넘길 때에는 <br> 또는 <br/> 태그를 이용합니다.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 1번째 줄<br> 2번째 줄<br>3번째 줄<br> 4번째 줄<br><br><br><br> 5번째줄<br/> </body> </html> |
<br>태그를 이용할 때마다 한줄 넘김이 되며 여러번 이용한다면 여러 줄이 넘어가게 됩니다. 그리고 <br>과 <br/> 모두 사용가능하고, 이 차이점은 HTML버전에 따라 다르게 이용하면서 나타난 것입니다.
코드 실행 시
3. 각각의 구간을 나누기 위하여 <div> </div> 태그를 이용합니다.
예를 들어 <div align = "right"> 내용 </div> 코드를 작성하였다면 해당 구간이 오른쪽 정렬되어 나타납니다.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div align="center">가운데 정렬 문장</div> <div align="center">가운데 정렬 문장</div> <div align="center">가운데 정렬 문장</div> <div align="left">왼쪽 정렬 문장</div> <div align="left">왼쪽 정렬 문장</div> <div align="left">왼쪽 정렬 문장</div> <div align="right">오른쪽 정렬 문장</div> <div align="right">오른쪽 정렬 문장</div> <div align="right">오른쪽 정렬 문장</div> </body> </html> |
<div>태그에 여러 옵션을 넣을 수 있으며 align옵션은 정렬을 선택하는 역할을 합니다.
코드 실행 시
4) 특수문자 입력 방법
|
" |
" |
|
& |
& |
|
< |
< |
|
> |
> |
|
아스키코드 |
&#[ascii]; |
|
space(공백) |
  |
웹페이지 안에 특수문자를 표시할 때, 특정 특수문자는 코드에서 혼동을 불러올 수 있기 때문에 특수문자를 표시하는 코드를 작성하여 표현해야 합니다.
의 경우 코드 내에서 스페이스바를 통해 띄어쓰기를 여러번 하더라도 한번밖에 적용되지 않지만 를 이용한다면 여러번 띄어쓰기가 가능하게 됩니다.
코드 실행 시
2. List 태그 : 목록 형태로 내용을 나타내는 태그
1) 순서 없는 태그(unordered list) <UL> </UL>
<UL></UL>태그는 순서없이 목록만을 보여주는 태그입니다.
<UL></UL>태그 안에 목록을 넣을 때에는 각각의 항목마다 서브태그인 <LI>태그를 이용하며
<UL type = 속성>으로 목록 표시 형태를 변경할 수 있습니다.
<UL>태그의 타입은 disc(찬 원), circle(빈 원), square(찬 사각형)으로 설정할 수 있고 아래와 같이 이용합니다.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ul> <li> normal-1 <ul> <li>normal-1-1 <li>normal-1-2 </ul> <li> normal-2 <li> normal-3 </ul> <ul type = disc> <li> disc-1 <li> disc-2 <li> disc-3 </ul> <ul type = circle> <li> circle-1 <li> circle-2 <li> circle-3 </ul> <ul type = square> <li> square-1 <li> square-2 <li> square-3 </ul> </body> </html> |
코드 실행 시
위와 같이 사용할 수 있으며 List안에 List를 넣어서 사용도 가능합니다.
2) 순서 있는 태그(ordered list) <OL> </OL>
<UL>태그가 어떠한 모양으로만 나타내는 List태그였다면 <OL> </OL>태그는 순서가 있는 태그입니다.
<OL> 태그 안에 목록을 넣을 때에는 서브태그인 <LI>태그를 이용합니다.
<OL>태그의 속성에는 TYPE, START, REVERSED가 있습니다.
TYPE속성에는 A(대문자), a(소문자), I, i(로마자), 1 이 있어 순서를 매길 때 표시하는 방식을 정하고,
START속성은 시작 번호를 정할 수 있습니다.
REVERSED속성은 역순으로 번호를 매기는 것을 설정합니다.
이 세 속성은 생략할 수 있습니다.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ol> <li>기본-1 <li>기본-2 </ol> <ol type="A"> <li>영어대문자-1 <li>영어대문자-2 </ol> <ol type="i" start="4"> <li>로마소문자-1 <li>로마소문자-2 </ol> <ol type="I" start="9" reversed> <li>로마대문자-1 <li>로마대문자-2 </ol> </body> </html> |
코드 실행 시
3) 정의 태그(definition list) <DL> </DL>
<DL>태그는 정의문구를 표시하는 태그입니다.
<DL>태그의 서브태그로 <DT>태그와 <DD>태그가 있으며
<DT>태그는 성의할 용어를 작성, <DD>태그는 정의한 용어의 설명을 작성합니다.
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <dl> <dt>정의-1 <dd>정의-1의 설명 <dt>정의-2 <dd>정의-2의 설명 </dl> </body> </html> |
'JS & TS > Frontend' 카테고리의 다른 글
| [HTML] HTML의 요소 (0) | 2021.02.03 |
|---|---|
| [HTML] 테이블, table (0) | 2021.02.03 |
| [HTML] <a>태그, 하이퍼링크 이용하기 (0) | 2021.02.03 |
| 2. 이클립스에서의 서버 설정, HTML 환경, 기본 구성 (0) | 2021.01.19 |
| 1. HTML의 시작, Tomcat설치, 환경설정 (0) | 2021.01.19 |
| 1. JSP시작 개념 (0) | 2021.01.19 |
