▶HTML(Hyper Text MakeUp Language)
(Hyper Text:WebPage를 이동할 수 있도록 만들어진 문장)
웹의 가장 기본적인 것.
정적인 페이지를 만들때 사용하는 것
화면에 보이는 기본적인 언어
HTML 기본 문법구조
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8"> //utf-8 한글깨짐 방지
<title></title> //설정 시 상태바에 해당 설정 노출
</head>
<body>
</body>
</html>
<META>
문서 자체에 대한 설명을 제공하기 위해 사용된다.
<사용형식>
<META http-equiv="메타 태크 항목이름" content="항목 내용">
<META name="메타 태크 항목이름" content="항목 내용">
=>일반적인 태그와 달리 닫는 태그가 없다.
<html>
<head>
<title>META 태크 활용법 </title>
<Meta charset="utf-8" http-equiv="refresh"
content="5;
url=http://winkitee.tistory.com/">
</head>
<body>
메타 태그를 이용하면 다른 페이지로 자동으로 이동할 수 있습니다.
</body>
</html>
<p></p>: 여는 괄호와 닫는 괄호가 쌍으로 사용되며 이 태그로 둘러싸인 내용은 하나의 문단이 된다.
<br></br>:HTML문서는 엔터 키 입력도 하나의 빈칸으로 표시해 버린다. HTML문서에서 줄 바꿈을 할때 사용한다.
<pre></pre>:엔터 키나 탭키등 사용자가 입력한 그 모습 그대로 출력한다.
<hr></hr>:구분선
color:구분선의 색상지정
size:구분선의 굴기 지정
width:구분선의 너비 지정
 
여러 개의 빈칸이나 엔터키 등 모든 공백 문자를 단 하나의 빈칸으로 인식
따라서 여러 개의 공백을 인식하고자 할때 사용한다
하이퍼 링크로 메일 보내기
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>하이퍼링크로 메일 보내기</title>
</head>
<body vlink="blue">
<H1>give me an email</H1>
<a href="mailto:2winkite@naver.com?subject=안녕하세요">메일보내기</a>
</body>
</html>
|
cs |
<table> 태그
기능:
특성/특성값/설명
border/테이블/테두리두께설정
Border/숫자/ 테이블 테두리두께설정
Width/숫자 또는 퍼센트/테이블 너비
Height/숫자 또는 퍼센트 /테이블 높이
Cellpadding/숫자/ 각 칸과 칸의 내용 사이의 여백 지정
Cellspacing/숫자/ 각 칸과 칸 사이의 간격을 지정
Align/
Center/ 표를 문서의 가운데에 배치
Left /표를 문서의 왼쪽에 배치
Right/ 표를 문서의 오른쪽에 배치
Bgcolor/색상 문자 또는 코드/ 표의 배경색을 지정
Background/URL 문자열/ 표의 배경 이미지를 지정
테이블의 줄/칸 속성
특성/특성값/설명
<tr></tr>:줄
align/
Center/ 줄 전체 칸의 내용을 칸의 가운데 배치
Left/ 줄 전체 칸의 내용을 칸의 왼쪽에 배치
Right/ 줄 전체 칸의 내용을 칸의 오른쪽에 배치
bgcolor/ 색상문자 또는 코드/ 줄의 배경색 지정
height/ 숫자 또는 퍼센트/ 줄의 높이 지정
<td></td>:칸
Align Center 한 칸의 내용을 칸의 가운데 배치 Left 한 칸의 내용을 칸의 왼쪽 배치 Right 한 칸의 내용을 칸의 오른쪽 배치 Height 숫자 또는 퍼센트 한 칸의 높이 지정Bgcolor 색상문자 또는 코드 한 칸의 배경색 지정
Background URL 문자열 한 칸의 배경 이미지 지정 Colspan 숫자 지정된 숫자만큼 칸을 하나로 합침 rowspan 숫자 지정된 숫자만큼 줄을 하나로 합침
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>초간단 테이블 만들기</title>
</head>
<body>
<H3>초간단 테이블 만들기</H3>
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#F261AA" align=center><font
color="white">오늘의 수입/지출 </font></td>
</tr>
<tr bgcolor="FFB2D9">
<td align=center>내용</td>
<td align=center>수입</td>
<td align=center>지출</td>
</tr>
<tr>
<td>월급!</td>
<td>1000000</td>
<td></td>
</tr>
<tr>
<td>점심값</td>
<td></td>
<td>5,000</td>
</tr>
<tr>
<td>부모님선물</td>
<td></td>
<td>5,000</td>
</tr>
<tr>
<td rowspan=3 bgcolor="FFB2D9">총계</td>
<td>수입</td>
<td>지출</td>
</tr>
<tr>
<td>1,000,000</td>
<td>35,000</td>
</tr>
<tr>
<td>남은 돈</td>
<td>965,000</td>
</tr>
<input type="text" name="my_age" sixe="20">
</table>
</body>
</html>
|
cs |