Div
=> 줄바꿈이 있는 Block 요소
=> 콘텐츠의 영역이나, 그룹화 할때 사용
=> 배경색은 영역전체에 적용됨
=> 외관 관련속성은 css(Style) 만 적용됨.
Span
=> 줄바꿈이 없는 inLine 요소, width, height 속성 적용되지않음
=> 그러므로 배경색은 글자범위에만 적용됨
=> 다른 텍스트와 구별할때 사용
=> 외관 관련속성은 <span style="background-color:aqua;">css(Style)</span> 만 적용됨.
<!--
=> div 에는 src 속성 없음
=> iframe Tag 를 사용해야함
Internel(Inline) Frame 의 약자
다른 페이지의 문서를 불러오는 역할, Div 와 같이 많이 쓰임 -->
=> 1줄에 Div를 일정 갯수만큼씩 출력하고 줄바꿈 하기
=> style 의 float:left
=> 줄바꿈은 float:left 속성이 없는 동일한 크기의 blank_Div를
필요한 위치에 적용
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>** Div , Span **</title>
</head>
<body>
<h2>1. Div</h2>
<pre>
=> 줄바꿈이 있는 Block 요소
=> 콘텐츠의 영역이나, 그룹화 할때 사용
=> 배경색은 영역전체에 적용됨
=> 외관 관련속성은 css(Style) 만 적용됨.
</pre>
<div align ="center" width = 100 height = 100 bgcolor = red>외관 관련속성 Test => 적용안됨</div>
<div align = "left" style = "width: 300px; height: 100px; background-color: red" > **Div block1 **</div>
<div align ="center" style="width: 400px; height: 100px; background-color: green"> ** Div block2 **</div>
<div align ="right" style ="width: 500px; height: 100px; background-color: violet"> ** Div block3 **</div>
<h2>2. Span</h2>
<pre>
=> 줄바꿈이 없는 inLine 요소, width, height 속성 적용되지않음
=> 그러므로 배경색은 글자범위에만 적용됨
=> 다른 텍스트와 구별할때 사용
=> 외관 관련속성은 <span style="background-color:aqua;">css(Style)</span> 만 적용됨.
</pre>
<pre>
<span width = 200 height = 100 bgcolor = red>** 외관 관련속성 Test **</span>
<span align = "left" style = "width: 300px; height: 100px; background-color: red">** Span inLine1 속성 **</span>
<span align = "center" style = "width: 400px; height: 100px; background-color: green">** Span inLine2 속성 **</span>
<span align = "right" style = "width: 500px; height: 100px; background-color: violet">** Span inLine3 속성 **</span>
</pre>
<h2> 3. Div in Span</h2>
<span> * Span 3.1 *
<div> * Div in Span 3.1.1 *</div>
<div> * Div in Span 3.1.2 *</div>
<div> * Div in Span 3.1.3 *</div>
</span>
<span> * Span 3.2 *
<div> * Div in Span 3.2.1 *</div>
<div> * Div in Span 3.2.2 *</div>
<div> * Div in Span 3.2.3 *</div>
</span>
<H2>4. Span in Div</H2>
<div>* Div 4.1*
<span>* Span1 in Div 4.1</span>
<span>* Span1 in Div 4.1</span>
<span>* Span1 in Div 4.1</span>
</div>
<div>* Div 4.2*
<span>* Span1 in Div 4.2</span>
<span>* Span1 in Div 4.2</span>
<span>* Span1 in Div 4.2</span>
</div>
<h2> 5. Div, Span 을 이용한 Table</h2>
=> 3*3 Box 만들기<br>
<div> <!-- Table Tag -->
<div><!-- tr tag -->
<span>월요일</span><span>화요일</span><span>수요일</span>
</div>
<div><!-- tr tag -->
<span>월요일</span><span>화요일</span><span>수요일</span>
</div>
<div><!-- tr tag -->
<span>월요일</span><span>화요일</span><span>수요일</span>
</div>
</div>
<h2>6. Div 를 갤러리처럼 출력하기</h2>
<style>
/* => 대상을 선택,속성 부여 */
.ggg /* 클래스 대상 */{
width:100px; height: 100px; background-color: hotpink;
float: left; // 왼쪽정렬
}
#id1 /* id 대상 */{
background-color: blue
}
.bbb {
width: 100px;
height: 100px;
}
</style>
<pre>
=> 1줄에 Div를 일정 갯수만큼씩 출력하고 줄바꿈 하기
=> style 의 float:left
=> 줄바꿈은 float:left 속성이 없는 동일한 크기의 blank_Div를
필요한 위치에 적용
=> .xxx <클래스>
=> #id <id명>
</pre>
<div class = "ggg" id=id1>111</div>
<div class = "ggg">222</div>
<div class = "ggg">333</div>
<div class = "bbb"></div>
<div class = "ggg">444</div>
<div class = "ggg">555</div>
<div class = "ggg">666</div>
<div class = "bbb"></div>
<div class = "ggg">777</div>
<div class = "ggg">888</div>
<div class = "ggg">999</div>
<div class = "bbb"></div>
</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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>** Layout02 : Div, iFrame 적용하기 **</title>
</head>
<body>
<!--
=> div 에는 src 속성 없음
=> 공간 외부 참조 iframe Tag 를 사용해야함
Internel(Inline) Frame 의 약자
다른 페이지의 문서를 불러오는 역할, Div 와 같이 많이 쓰임
태그들은 크게 블록요소 (div h.... table)
인라인 요소 (span frameset src) 등으로 분류
div 는 세로 블록 // span 가로 일렬-->
<div style="width: 100%; height:200px;background-color: gray;">
<iframe src="header.html" width="100%" height = 200></iframe></div>
<div style="width: 100%; height:30px;background-color: yellow;">
<b><span>[Good Site]</span> <span>[Login]</span>
<a href = "ex55_join.html" target ="main"><span>[Join]</span></a>
<a href = "main.html" target="main"><span>[Home]</span></a></b>
</div>
<div style="width: 100%; height:500px;background-color: aqua;">
<iframe src="main.html" width="100%" height = 500 name=main></iframe></div>
<div style="width: 100%; height:200px;background-color: pink;">
<iframe src="footer.html" width="100%" height = 200></iframe></div>
</body>
</html>
|
cs |
'공부 > HTML' 카테고리의 다른 글
| Semantic 태그 (0) | 2022.03.11 |
|---|---|
| HTML 기본정보 (0) | 2022.03.06 |
| HTML table 과 form 태그 (0) | 2022.03.06 |
