반응형
float
이미지와 텍스트를 같은 선상에 배치하기 위해 사용하는 속성
float 미적용 화면 ▼
float만 적용한 화면 ▼
- 부모 요소는 자식 요소가 float 되면 해당 요소의 height를 알지 못하게 된다. 즉, float 요소는 공중에 뜨게 된다.
단, body는 float된 요소의 height 값을 인지하고 있다.
(브라우저 창의 크기를 줄이면 float 요소의 height가 다 보일 수 있도록 스크롤바가 생성됨.)
스크롤바 생성 화면 ▼
float - clearfix hack 적용 화면 ▼
Clearfix Hack
부모 요소가 자식 요소의 height를 인지하지 못해 자식 요소를 감싸지 못하는 문제를 해결하는 방법
1. 가상 요소 ::after 사용하기
|
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="ko">
<head>
<meta charset="UTF-8">
<title>float 적용하기</title>
<style>
.box {
padding: 10px;
background-color: azure;
border: 2px solid red;
width: 700px;
margin: 0 auto;
margin-top: 30px;
}
.box img {
float: left;
width: 200px;
clear: both;
}
.box::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<img src="images/tangerines.jpg" alt="귤">
<p>귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다! 귤은 맛있다!</p>
</div>
</body>
</html>
|
cs |
2. overflow: hidden 또는 overflow: auto 사용하기
-overflow: auto = 자식이 부모의 크기를 넘어서게 되면 스크롤바 생성
- 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="ko">
<head>
<meta charset="UTF-8">
<title>float 적용하기</title>
<style>
.box {
padding: 10px;
background-color: azure;
border: 2px solid red;
width: 700px;
height: 200px;
margin: 0 auto;
margin-top: 30px;
}
.box img {
float: left;
width: 200px;
height: 300px;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<div class="box clearfix">
<img src="images/tangerines.jpg" alt="귤">
<p>귤은 맛있다!</p>
</div>
</body>
</html>
|
cs |
overflow: auto 적용한 화면 ▼
3. displaly: flow-root 적용하기
|
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 lang="ko">
<head>
<meta charset="UTF-8">
<title>float 적용하기</title>
<style>
.box {
padding: 10px;
background-color: azure;
border: 2px solid red;
width: 700px;
margin: 0 auto;
margin-top: 30px;
display: flow-root;
}
.box img {
float: left;
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/tangerines.jpg" alt="귤">
<p>귤은 맛있다!</p>
</div>
</body>
</html>
|
cs |
display: flow-root 활용
- 블록 컨테이너 박스를 생성하여 요소 시작점의 위치를 변경시킬 수 있다.
float된 image에 opacity 값을 주고 p태그 영역 확인 ▼
p태그에 display: flow-root 적용한 화면 ▼
#이미지 출처 : Pixabay
'CSS' 카테고리의 다른 글
| Font Awesome (버전 4와 버전 5 사용 방법) (0) | 2019.01.04 |
|---|---|
| media query (0) | 2019.01.03 |
| animations (0) | 2019.01.03 |
| pseudo-class (0) | 2019.01.03 |
| flexbox(Flexible Box module) (0) | 2018.12.29 |
댓글