티스토리 뷰
1) float: left; 를 주지 않은 상태
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<style>
#wrap {
width: 800px;
margin: 0 auto;
border: 1px solid #cccccc;
padding: 10px;
}
#wrap img {
/* float: left; */
margin: 10px;
}
p {
border: 1px solid blue;
}
</style>
|
cs |
2) float: left;를 준 상태
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<style>
#wrap {
width: 800px;
margin: 0 auto;
border: 1px solid #cccccc;
padding: 10px;
}
#wrap img {
float: left;
margin: 10px;
/* 이미지가 뜸 */
/* 그래서 부모가 이미지를 잡지를 못함 */
}
p {
border: 1px solid blue;
}
</style>
|
cs |
3) overflow:hidden; 적용 상태
=집나간 토끼를 잡아들이는 것... 영역을 넓힘
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>13-2overflow: Hidden</title>
<style>
#wrap {
width: 800px;
margin: 0 auto;
border: 1px solid #cccccc;
overflow: hidden;
padding: 10px;
}
#wrap img {
float: left;
margin: 10px;
}
p {
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="wrap">
<img src="BG (3).jpg" width="300px" height="430px">
<p>5세대 K-POP 보이그룹 [투모로우바이투게더]<br />
<b>TOMORROW X TOGETHER</b><br />
2019년 3월 4일에 데뷔한 대한민국 HYBE 소속의 5인조 보이 그룹이다.
'투모로우바이투게더' 라는 그룹명은 서로 다른 너와 내가 하나의 꿈으로 모여 함께 내일을 만들어간다는 의미를 가지고 있다.
팬덤 모아는 Moments Of Alwaysness 의 준말이자 서로의 꿈 조각들을 모아 하나의 꿈을 완성한다는 의미를 가지고 있다.
</p>
</div>
</body>
</html>
|
cs |
'HTML & CSS' 카테고리의 다른 글
| 개인 플젝 Joandora (0) | 2021.11.21 |
|---|---|
| HTML ID & CLASS 홀리그레일 (holy grail layout) (0) | 2021.11.07 |
| HTML 폼 태그 (form tag) (0) | 2021.11.04 |
| HTML 비디오 출력 (0) | 2021.11.04 |
| html 이미지 및 오디오 출력 (image, audio) (0) | 2021.11.03 |
댓글