개인 복권 디펜스 조합법을 패치하고 구글 크롬을 통해서 요소검사를 하다가 중간에 테이블들을 잡은 레이아웃이 높이를 전혀차지하지 않는 문제가 발생하였다.

왜 이런 문제가 발생하였는가 분석을 하여 보니
표를 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


다음과 같이 매우 정상적으로 높이를 차지하게 된다.

댓글 작성