html을 작성하다보면 자주 사용 하는 것 중에 하나가 'float'속성입니다.
그런데 'float'속성의 특징은 다른 레이아웃에 영향을 주지 않는 것이죠.
0. 테스트용 코드 작성
테스트용 html을 다음과 같이 작성합니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.Parent
{
background-color:aqua;
}
.Child1
{
background-color:yellow;
width:300px;
height:300px;
}
.Child2
{
background-color:red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="background-color:gray">
aaaaaaaaaaaaaaa
</div>
</div>
<div class="Parent">
<div class="Child1">
bbbbbbbbbbbbbbb
</div>
<div class="Child2">
ccccccccccccccc
</div>
</div>
</form>
</body>
</html>
이 코드를 실행하면 다음과 같이 나옵니다.
1. 문제
이제 '.Child1'과 '.Child2'에 'float'을 추가해 봅시다.
.Child1
{
background-color:yellow;
width:300px;
height:300px;
float:left;
}
.Child2
{
background-color:red;
width:200px;
height:200px;
float:left;
}
이제 코드를 실행하면 다음과 같이 나옵니다.
'float'속성을 추가하자 부모의 색인 아쿠아색이 없어진 것을 알 수 있습니다.
이것은 'float'속성이 기본적으로 다른 레이아웃에 영향을 주지 않기 때문에 그렇습니다.
기존 코드의 '<div class="Parent">'의 닫는 태그 밑에 'div'를 추가한후 '.Parent'에 '마진-바텀(margin-bottom)'을 추가해 보면 어떤 문제인지 확실하게 보이죠.
이러다 보니 부모 'div'를 기준으로 무언가 작업을 하게 되면 자식 'div'의 크기가 반영되지 않아 레이아웃이 이상하게 됩니다.
2. 해결하기
이 문제를 해결하기 위한 간단한 방법은 부모 'div'에 'display:inline-block'를 추가하는 것입니다.
.Parent
{
background-color:aqua;
display:inline-block;
}
이렇게 추가만 하면 자식의 크기가 부모한테 반영됩니다.
다시 아쿠아(하늘)색이 보이이기 시작합니다!!
마무리
그런데 'display:inline-block'를 추가하면 레이아웃에 문제 생기는 곳이 있던 거 같은데....
잘 기억이 나지 않습니다 ㅋㅋㅋㅋㅋㅋㅋ
아마도 다른 태그랑 섞여서 그랬던 거 같기도 해서 잘 모르겠네요.
어찌 됐건 'float'을 사용할 때는 별일 없으면 'display:inline-block'를 미리 추가해두는게 나중을 위해서 좋긴 합니다.
