[HTML] 태그 정리 - 글꼴 태그, 테이블 태그, form 태그, 목록 태그 등

HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 다루는 마크업 언어이다.

HTML 기본 구조

HTML 문서는 <html>로 시작하여 </html>로 끝난다.

<head> 영역에는 <title> 내용과 같이 웹 문서의 제목을 입력해 줄 수 있으며 제목이 필요하지 않을 시에는 생략하면 된

다. <meta>,<script>,<style>의 태그 역시 포함 가능하다.

<body> 영역에는 웹 브라우저 본문에 표시될 실질적인 내용을 입력한다.

cf) 태그는 <>로 입력하며 대소문자를 구별하지 않는다.

글꼴 태그

다양한 글꼴 태그 중 대표적인 태그를 설명하겠다.

<font size="7" color="#4FC9DE" face="궁서체">font 크기7</font>

size는 글자 크기를 지정한다.

color는 글꼴색이며 "red"로 입력해도 빨간색으로 나온다.

face는 글꼴이며 돋움체를 지정할 경우 "돋움체"를 써준다.

<u>밑줄</u>
<i>이탤릭</i>
<b>굵음</b>

u는 글자밑에 밑줄을 표시한다.

i는 이탤릭체를 나타낸다.

b는 글자를 굵게 표현하며 <strong>으로도 굵게 할 수 있다.

목록 태그 - 비순서 목록

<ul type="square">
<li>가 나 다</li>
<li>가&nbsp;&nbsp;나&nbsp;&nbsp;다</li>
<li>가&nbsp;&nbsp;&nbsp;나&nbsp;&nbsp;&nbsp;다</li>
</ul>

type 안에는 목록 앞에 표시될 블릿 종류를 입력한다.

square는 네모 모양이며

ul만 입력할 시 디폴트인 동그라미로 표현된다.

가나다 사이에 공백은 1칸이 최대이며

2칸 이상 띄우기 위해선 Escape태그인  로 지정할 수 있다.

테이블 태그

<table border="1" width="600" height="300" cellpadding="3" cellspacing="0" align="center">

border는 테이블을 감싸는 선 두께의 사이즈이다.

width는 테이블의 가로 길이이다.

height는 테이블의 세로 길이이다.

cellpadding은 셀 안의 내용과 테이블 경계선 사이의 여백 사이즈를 말한다.

cellspacing은 셀 간의 여백 사이즈를 말한다.

align은 테이블의 정렬 방식이며 left, right와 같이 지정할 수 있다.

rowspan은 지정한 행들을 하나의 행으로 합치는 것이다.
colspan은 지정한 열들을 하나의 열로 합치는 것이다.

form(폼) 태그

<table style="font-size: 10pt;font-family: 돋움" cellpadding="3">
<tr>
	<td><strong>이름</strong></td>
	<td><input type="text"></td>
</tr>
<tr>
	<td><input type="checkbox">아이디 저장</td>
</tr>
</table>

폼 양식을 만들어 사용자에게 입력받도록 한다.

이름 옆에 text를 입력할 수 있는 칸을 만들었다.

또한 아이디를 저장할지 선택하는 checkbox 버튼을 만들었다.

radio 타입을 여러 개 입력한 경우, name을 하나로만 지정하면

같은 name 중에서 1개만 고를 수 있지만

name을 다르게 하면 별개로 인식하여 radio 타입이지만 여러 개로 선택할 수 있다.

메모<br/>
<textarea rows="10" cols="20"></textarea>

10개의 행과 20개의 열을 입력할 수 있는

Textarea 형식이다.

<title>Insert title here</title>

<style type="text/css">

body { 
	font-size: 11pt;
}

.c01{
color: blue;
}

</style>

이곳에 미리 입력해 주면 <body> 안에 적용이 된다.

body {}는 body 전체 공간이며

c01은 c01으로 지정한 곳에만 해당이 된다.

c01으로 지정한 부분이다.

<span style="color: blue">가나다

<span class="c01">가나다

c01에 글자색을 파란색으로 지정했으므로

첫 번째 줄과 두 번째 줄 모두 글자색이 파란색으로 나온다.

저작자표시

'개발 교육 TIL > front-end' 카테고리의 다른 글

[JSP] hidden, 액션 태그 (0)	2022.02.19
[JSP] Redirect & Forward, Session (0)	2022.02.17
[JSP] form형식(get/post방식), 연산 프로그램 (0)	2022.02.16
[JSP] JavaScript (var, typeof, function, 배열) (0)	2022.02.16
[JSP] 아파치 톰캣(Apache Tomcat)설치, JSP 기초 (0)	2022.02.13