html table / div / iframe 태그 작성 하는 방법
|
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--테이블 css-->
<style type="text/css">
table{width:70%}
table,th,td{border:2px solid black;border-collapse:collapse;}
th,td{padding:5px}
</style>
</head>
<body>
<!-- caption; 테이블 제목 -->
<table border ="1">
<caption> 주소록 </caption>
<colgroup>
<col style="background-color:silver;">
</colgroup>
<thead>
<tr>
<td>이름</td>
<td>나이</td>
<td>주소</td>
</tr>
</thead>
<tbody>
<tr style="background-color:olive">
<td>김민호</td>
<td>24</td>
<td>충청도</td>
</tr>
<tr>
<td>이서연</td>
<td>14</td>
<td>전라도</td>
</tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
<hr/>
<table style ="border:1px solid black;width=60%">
<tr>
<th style="border:1px solid black;">이름</th>
<th style="border:1px solid black;">나이</th>
<th style="border:1px solid black;">주소</th>
</tr>
<tr>
<td>김민호</td>
<td>24</td>
<td>충청도</td>
</tr>
<tr>
<td>이서연</td>
<td>14</td>
<td>전라도</td>
</tr>
</table>
<hr/>
<!-- html5,css활용 -->
<!--<thead>,<tbody>,<tfoot>으로 구성-->
<!--<thead>,<tbody>,<tfoot>의 코드상의 위치를 바꿔도 화면에는 thead,tbody,tfoot의 순서로 출력된다-->
<table>
<thead>
<tr>
<th>이름</th><!--열 , 컬럼-->
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>김민호</td>
<td>24</td>
<td>충청도</td>
</tr>
<tr>
<td>이서연</td>
<td>14</td>
<td>전라도</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
<hr/>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>민호</td>
<td>김</td>
<td>50</td>
</tr>
<tr>
<td>서연</td>
<td>이</td>
<td>10</td>
</tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
<hr/>
<!-- 셀 병합 : 열 병합(colspan = "셀의 수") -->
<!-- 셀 병합 : 열 병합(rowspan = "셀의 수") -->
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>이정호</td>
<td>20</td>
<td rowspan="2">서울시</td>
</tr>
<tr>
<td>최수진</td>
<td>30</td>
</tr>
<tr>
<td>박혜수</td>
<td>22</td>
<td>부산시</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"> 2017년 12월 4일 </td>
</tr>
</tfoot>
</table>
</body>
</html> |
cs |
코드 실행 화면
html 문서에서 <table> <thead> <tbody> <tfoot> 태그를 사용하면 다음과 같이 표를 만들 수 있습니다.
colspan은 열을 병합하는 속성입니다.
rowspan은 행을 병합하는 속성입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div 태그 (블록) , span 태그</title>
</head>
<body>
<div style="background-color:lime;text-align:center">div 태그는 일정한 영역을 차지하고 하나의 묶음을 만든다</div>
<div style="border:1px solid red">div 태그는 일정한 영역을 차지하고 하나의 묶음을 만든다</div>
<div style="width:200px;height:100px;border:1px solid blue;text-align:center">
div 태그는 일정한 영역을 차지하고 하나의 묶음을 만든다
</div>
<div>div 태그는 일정한 영역을 차지하고 하나의 묶음을 만든다.</div>
<div style="width:200px;height:100px;border:1px solid red;display:block;"></div>
<!--display:none으로 설정하면 영역이 없어짐-->
<div>
<span style="background-color:gray;color:silver;font-weight:bold;">
</span>
</div>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe : 영역 안에 다른 영역 호출</title>
</head>
<body>
<h1>본문 영역</h1>
<hr/>
<iframe src="ex01.html"></iframe>
<hr/>
<h1>본문 영역</h1>
</body>
</html> |
cs |
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form 태그</title>
</head>
<body>
<!-- 사용자의 데이터를 입력 받아서 , 특정 작업을 할 때 사용 -->
<!-- <form action="받은 데이터를 처리할 페이지의 경로(특정 작업을 하는 위치)"
method="get|post" 생략하면 get방식></form>
get 방식 : 정보를 헤더에 담아서 보낸다
주소표시줄에 정보가 보인다
보안에 취약하다
적은 양의 데이터 처리
속도가 빠르다
post 방식 : 정보를 바디에 담아서 보낸다
주소 표시줄에 정보가 안보인다
보안에 덜 취약하다
많은 양의 데이터 처리
속도가 상대적으로 느리다
name=자바 스크립트나 css에서 호출할때 사용할 이름
enctype=file upload 할 때 사용한다>
form elements : <input type> , <select> , <textarea> , <button> , <datalist>
</form>
-->
<form action = "ex15.html" method="get">
<p>이름 : <input type="text" name="name" placeholder="이름 입력"/>
</p>
</form>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| 자바스크립트 (0) | 2017.12.04 |
|---|---|
| html 회원 가입 예제 코드 / form action / select / input (4) | 2017.12.04 |
| html ul 태그 li 태그 (0) | 2017.12.01 |
| margin padding (0) | 2017.12.01 |
| jsp (0) | 2017.12.01 |
댓글