개인 복권 디펜스 조합법을 패치하고 구글 크롬을 통해서 요소검사를 하다가 중간에 테이블들을 잡은 레이아웃이 높이를 전혀차지하지 않는 문제가 발생하였다.
왜 이런 문제가 발생하였는가 분석을 하여 보니
표를 2행으로 나누기 위해서 표들을 2개의 <div>태그에 나누어 포함시키고 이를 float:left 를 통해서 가로로 붙여서 정렬하도록 하였다.
float이 적용된 요소의 부모요소가 자식의 크기를 제대로 측정을 하지 못하여서 본인의 높이를 올바르게 포함하고 있지 않는 모양인 것 같다.
해결 방법은 2가지가 있는데 다음과 같다.
발생하는 문제는?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: green;
}
.left {
float: left;
}
</style>
</head>
<body>
<div id="box">
<div class="left">Test</div>
<div class="left">Test2</div>
</div>
</body>
</html>
|
cs |
다음 소스코드가 이렇게 적용이 되어 나타난다. 부모가 올바르게 높이를 차지하지 못하여서 배경색이 보이지 않는 것을 알 수 있으며, 요소 검사로 확실하게 높이가 0이라는 것을 알 수 있다.
다음은 이에 대한 해결법이다.
1. 뒤에 clean:both; 를 적용시킨 빈 태그를 추가하는 방법
float이 적용된 요소들의 다음에 clean:both;가 적용된 빈 태그를 추가하는 방법이다.
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
|
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: green;
}
.left {
float: left;
}
#clearboth {
clear: both;
}
</style>
</head>
<body>
<div id="box">
<div class="left">Test</div>
<div class="left">Test2</div>
<div id="clearboth"></div>
</div>
</body>
</html>
|
cs |
다음과 같이 부모 요소가 높이를 잘 차지하게 된다.
굳이 새로운 태그를 추가하지 않더라도 CSS3만으로 해결 할 수도 있다. 바로 :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
|
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: green;
}
.left {
float: left;
}
#box:after {
content: "";
clear: both;
display:block;
}
</style>
</head>
<body>
<div id="box">
<div class="left">Test</div>
<div class="left">Test2</div>
</div>
</body>
</html>
|
cs |
다음과 같이 잘 적용이 된다.
content는 요소의 내용을 적는 것이고.
display:block; 은 :after를 통해서 생성한 요소가 기본값이 inline이여서 변경해 주는 것이다.
2. overflow:hidden; 을 통한 해결
이건 좀 처음에 이상했던 방법이다.
처음에는 왜지? 하고 의아해 했는데.
원래 overflow:hidden은 자손요소들이 부모요소의 범위를 벗어날 경우에 그냥 숨겨라! 그러니까 넘칠경우 숨겨라! 이런 녀석인데.
적용하면 마법같게도 높이를 정상적으로 차지해버리게 된다.
이유는 overflow:hidden;은 자신보다 크기가 크면 숨겨라. 인데. div는 기본 display값이 block일꺼고 다음 처럼 높이를 올바르게 차지하지 않는 문제가 발생했다는 것은 높이 값을 별도로 지정해주지 않았다는 것이다.
하지만, 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
|
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: green;
overflow:hidden;
}
.left {
float: left;
}
</style>
</head>
<body>
<div id="box">
<div class="left">Test</div>
<div class="left">Test2</div>
</div>
</body>
</html>
|
cs |
다음과 같이 매우 정상적으로 높이를 차지하게 된다.
'프로그래밍 > CSS3' 카테고리의 다른 글
| [CSS3] box-shadow (그림자 효과) (0) | 2017.04.21 |
|---|---|
| [CSS3] transition (스타일로 효과 넣기) (0) | 2017.02.21 |
| [CSS3] 구버전의 IE(8 이하)에서 시맨틱 태그 호환 (0) | 2017.02.02 |
| CSS3 기본적인 선택자(+예제) (0) | 2017.01.24 |
| [CSS3] 스타일 시트를 적용하는 방법들 (0) | 2016.07.20 |