-
Notifications
You must be signed in to change notification settings - Fork 0
/
test5.html
155 lines (131 loc) · 5.02 KB
/
test5.html
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
테이블은 표를 의미한다
tr은 table row 즉 테이블 행을 의미함.
<tr></tr>
<tr></tr>
이렇게 하면 2행이 선언된 것
열을 선언하고 싶으면,
<tr></tr>
<td></td>
<td></td>
<td></td>
<td></td>
<tr></tr>
이렇게 하면 된다.
d의 의미는 descript 즉 서술하는 곳이라는 뜻이다.
-->
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td><img src="images\duke_box.gif"/></td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
<hr/>
<!--
2와 3을 합쳐보고, 5와 a를 합쳐보자
colspan은 행을 합친다는 뜻이다.
colspan="2"는 두칸을 합친다는 뜻이다.
rowspan을 사용하면 열을 합칠 수 있다.
rowspan ="2"는 위아래로 2개의 열이 합쳐지는 것을 뜻한다.
-->
<table border="1">
<tr>
<td>1</td>
<td colspan="2">2,3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5,a</td>
<td>6</td>
<td>7</td>
<td><img src="images\duke_box.gif"/></td>
</tr>
<tr>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
<hr/>
<!-- div 테그와 span 테그는 따로 이야기하도록 하겠습니다.
굉장히 중요한 부분
div는 블럭을 잡아주고 영역을 잡아주는 부분
레이아웃 잡을 때 테이블보다 훨씬 많이 쓰임
레이아웃을 구분할 때 style을 활용하여 디자인을 입힌다.
과거와는 달리 style 하나로 통일시켜서 사용
span테그도 뚜렷하게 특징이 있지는 않지만,
div와 비슷한 역할을 한다.
차이점이 있다면, div는 행 전체가 색으로 가득차는데
span은 글자까지만 배경색을 표시한다.
-->
<div style="background-color: aqua;">내용</div>
<span style="background-color: aquamarine;">내용</span>
<table style="width: 100%;">
<tr>
<td style="background-color: burlywood;">내용</td>
</tr>
</table>
<hr/>
<div style="background-color: yellow; width: 150px; height: 200px;">내용</div>
<span style="background-color: greenyellow; width: 150px; height: 200px;">내용</span>
<!-- span은 높이와 폭의 지정이 되지 않는다-->
<div style ="margin-top: 30px;">
<div style="background-color: yellow; width: 90px; height: 160px;">내용</div>
<div style="background-color: greenyellow; width: 90px; height: 160px;">내용</div>
</div>
<!--이렇게 하면 2개의 상자가 하나로 합쳐지게끔 할 수 있다.
다른 항목과 분리를 시키기 위해서 맨 위 부모테그에만 묶어서 지정하면 된다.
margin-top을 활용하면 위의 항목에서 어느정도 띄울 수 있다.-->
<hr/>
<div style ="margin-top: 30px;">
<div style="background-color: yellow; width: 90px; height: 160px; float: left;">내용</div>
<div style="background-color: greenyellow; width: 90px; height: 160px; float: left;">내용</div>
</div>
<!--만약 아래가 아니라 컨텐츠를 옆에 붙히고 싶을 때는 float을 사용한다.-->
<div style="clear: both">
<div style="background-color: black;"><br/></div>
<div style="background-color: white;"><br/></div>
</div>
<!--clear를 쓰게 되면 원래대로 기본값으로 출력이 되게 됨
더 이상 float은 영향을 주지 않는다.
test5 코드는 css의 내용을 다수 포함하고 있다.
-->
<hr/>
<!--레이아웃 잡아보기
페이지 크기 : 1200px
-->
<div style="width: 1200px;">
<div style="background-color: yellow; height: 50px;">상단 메뉴</div>
<div style="margin-top: 25px; height: 400px;">
<div style="width: 300px; height: 400px; background-color: red; float: left;">왼쪽 사이드 메뉴</div>
<div style="width: 890px; height: 400px; background-color: blue; float: left; margin-left: 10px;">컨텐츠 영역</div>
</div>
<div style="clear: both">
<div style="background-color: yellow; margin-top: 25px; height: 50px;">하단 메뉴</div>
</div>
</div>
<!--여백을 남기고 싶으면 margin-left를 사용하고 너비에서 그만큼 픽셀을 빼주면 된다.-->
</body>
</html>