웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
아래는 float를 자식 요소로 가지는 경우 높이값 height를 제대로 구할 수 없는 이슈가 나타날 수 있습니다. 이를 해결하는 방법을 알아봅니다.
! float 사용시 높이값 이슈 해결하기
만약 자식요소가 float를 가진 경우 해당 엘리먼트는 높이값을 갖지 못합니다. 이런 이유때문에 이를 해결하기 위한 방법으로 몇 가지가 존재합니다. 그 중 가장 효과적인 방법으로 가상(pseudo) 선택자를 사용하는 방법이 있습니다.
# Pseudo 선택자를 사용하여 float 자식요소에 대한 영역을 갖기
해결방법은 간단합니다. float의 영역 다음 요소에 clear css 속성을 사용하는 방법입니다. 하지만 float가 적용된 엘리먼트 다음에 clear 속성을 주기위해 엘리먼트를 만드는 것이 어렵죠... 그래서 css의 가상 선택자를 사용하여 css를 적용하는 방법이 많이 사용됩니다.
아래 예제를 보세요. 적용된 요소와 적용되지 않은 요소를 비교하면 되겠죠. 먼저 html 태그입니다.
아래는 css 코드입니다.
이제 아래와 같이 css를 추가합니다.
위 예제는 아래처럼 영역을 가지게 됩니다. 이처럼 css를 사용하는 방법은 매우 간단하게 사용할 수 있습니다.
! float 사용시 높이값 이슈 해결하기
만약 자식요소가 float를 가진 경우 해당 엘리먼트는 높이값을 갖지 못합니다. 이런 이유때문에 이를 해결하기 위한 방법으로 몇 가지가 존재합니다. 그 중 가장 효과적인 방법으로 가상(pseudo) 선택자를 사용하는 방법이 있습니다.# Pseudo 선택자를 사용하여 float 자식요소에 대한 영역을 갖기
해결방법은 간단합니다. float의 영역 다음 요소에 clear css 속성을 사용하는 방법입니다. 하지만 float가 적용된 엘리먼트 다음에 clear 속성을 주기위해 엘리먼트를 만드는 것이 어렵죠... 그래서 css의 가상 선택자를 사용하여 css를 적용하는 방법이 많이 사용됩니다.
아래 예제를 보세요. 적용된 요소와 적용되지 않은 요소를 비교하면 되겠죠. 먼저 html 태그입니다.
<div class="wrapper">
<div class="pull-left">
Test Square
</div>
</div>
<div class="pull-left">
Test Square
</div>
</div>
아래는 css 코드입니다.
.wrapper {
border: 5px solid #999;
padding: 10px;
}
.wrapper .pull-left {
float: left;
width: 100px;
height: 100px;
background: #e9e9e9;
border: 1px solid #cdcdcd;
}
border: 5px solid #999;
padding: 10px;
}
.wrapper .pull-left {
float: left;
width: 100px;
height: 100px;
background: #e9e9e9;
border: 1px solid #cdcdcd;
}
이제 아래와 같이 css를 추가합니다.
.wrapper::before {
content: '';
display: table;
box-sizing: border-box;
clear: both;
}
.wrapper::after {
content: '';
display: table;
box-sizing border-box;
}
content: '';
display: table;
box-sizing: border-box;
clear: both;
}
.wrapper::after {
content: '';
display: table;
box-sizing border-box;
}
위 예제는 아래처럼 영역을 가지게 됩니다. 이처럼 css를 사용하는 방법은 매우 간단하게 사용할 수 있습니다.
아래의 글도 찾고 계시지 않나요?
