css로 작업을 하다보면 내가 원하는 영역을
좌측 혹은 우측에 배치를 해야하는 경우가 많다.
텍스트의 경우는 text-align으로 배치를 할 수 있지만
텍스트가 아닌 일반 영역들 같은 경우는 다른 방법이 필요하다.
이럴 때 사용하는 것이 float라는 속성이다.
1. float 속성
float 속성에서 주로 사용하는 것은 float:left, float:right 속성이다.
말 그대로 원하는 영역을 왼쪽으로 정렬시키거나 오른쪽으로 정렬시키는 속성이다.
<style>
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.float_right{float:right; background:greenyellow; width:150px; height:50px;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<div class="float_right">오른쪽정렬</div>
</div>
</body>
이런식으로 .float_left 클래스 영역은 왼쪽으로 .float_right 영역은 오른쪽으로 정렬할 수 있다.
그리고 텍스트와 float 설정된 영역이 같이 노출이 되는 경우엔 아래와 같이 노출된다.
<style>
.float_left{float:left; background:skyblue; width:150px; height:50px;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.</p>
</div>
</body>
<style>
.float_right{float:right; background:greenyellow; width:150px; height:50px;}
</style>
<body>
<div class="wrap">
<div class="float_right">오른쪽정렬</div>
<p>텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.
텍스트가 노출이 되는 경우에는 float 속성이 어떻게 될지 궁금합니다.</p>
</div>
</body>
2. float 해제 (clearfix)
위와 같이 float를 사용하여 왼쪽 혹은 오른쪽 정렬을 했을 경우에
생각지도 못한 상황이 발생하곤 한다.
<style>
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>위와 같이 float를 사용한 영역 아래에
.text라는 클래스를 사용해서 별도의 영역을 만들고자 했을 때,
원하던 모습이 아닌 .text 영역의 위치가 .wrap 영역과 겹쳐서 보이는 것을 확인할 수 있다.
이것은 float 속성 때문에 그렇게 되는건데
float를 사용하면 사용한 영역 자체가 화면에서 아예 띄워지게 된다.
position:absolute 하는 것과 마찬가지로 띄워지게 돼서
그 영역을 감싸고 있는 부분이 float한 부분까지 너비나 높이를 인식하지 못한다.
그렇기 때문에 .wrap의 영역은 .float_left 영역의 높이값이 무시된 상태로
p태그에 텍스트 영역만 높이을 인정받아 .text영역의 위치가 위와 같이 노출이 된 것이다.
이를 해결하기 위해서는 float 설정해놓은 것을 해제해줘야한다.
그래야 올바른 높이값을 잡고 레이아웃을 바로할 수 있다.
float를 해제할 수 있는 방법은 크게 3가지가 있다.
1. float한 요소의 부모요소에 overflow:hidden 속성 사용
2. float한 요소의 부모요소에 가상선택자 :after를 사용하여 clear해제
3. 임의의 div를 만들어 clear 속성을 사용한 해제
2-1. overflow:hidden 사용
<style>
.wrap{overflow:hidden;} /* float를 사용한 .float_left의 부모인 .wrap에 overflow:hidden 사용 */
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>
2-2. 가상선택자 :after 를 사용하여 clear 처리
float된 영역의 부모 요소에 :after 사용하여
display:block; clear:both; content:"";
속성을 사용하여 해제
<style>
.wrap:after{display:block; clear:both; content:"";} /* 부모요소 wrap에 가상 요소를 사용하여 clear */
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>
2-3. 임의의 div에 clear 속성 사용하여 해제 (비추천)
<style>
.float_left{float:left; background:skyblue; width:150px; height:50px;}
.clearfix{clear:both;} /* 임의의 div에 clear 속성을 추가하여 float 해제 */
.text p{color:red;}
</style>
<body>
<div class="wrap">
<div class="float_left">왼쪽정렬</div>
<p>왼쪽 영역에 대한 텍스트 내용입니다.</p>
</div>
<div class="clearfix"></div>
<div class="text">
<p>안녕하세요 반갑습니다.</p>
</div>
</body>위와 같은 방법은 불필요한 div가 clear를 위해서
추가되는 방법이라 가능하면 비추천한다.
위의 3가지 방법 중에 보통은 부모 요소에 overflow:hidden 속성을 사용해서
float를 해제하거나
부모 요소를 넘어가는 레이어나 다른 요소들이 있는 경우에는
(부모 요소의 범위를 넘어서 ui를 표현해야하는 경우)
가상요소 :after를 사용해서 float 해제해주는 방법을 추천한다.
'Frontend > CSS' 카테고리의 다른 글
| [css 속성] transition (0) | 2020.04.21 |
|---|---|
| [css 속성] z-index 우선순위 주기, z-index -(음수) 처리 (0) | 2020.03.31 |
| [css 속성] position (static, relative, absolue, fixed) (0) | 2020.03.23 |
| [css 속성] display (block, inline, inline-block, table) (0) | 2020.03.06 |
| 가상 클래스 vs 가상 요소 (0) | 2020.03.06 |