홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다.
<글쓰는 갓디노> 블로그의 메인 페이지도 float: left 속성을 사용하였습니다.
float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습니다.
최근에는 플렉서블 박스 레이아웃(flexible box layout) 이란 그리드 레이아웃을 이용하여
매우 간편하게 위치를 변형할 수 있지만, 브라우저별로 지원의 한계가 있기 때문에
아직까지는 float속성을 이용한 레이아웃을 더 많이 사용하고 있습니다.
그래서 오늘은,
float 속성은 웹요소를 문서 위에 떠있게 만듭니다.(=부유하다.)
float의 성격
· block 의 성격을 무시합니다.
· 형제 구조로 이루어져있습니다.
· 해당 요소들의 높이 값이 맞아야 미디어쿼리 적용 시 제대로 동작합니다.
float 속성값
float : left 왼쪽으로 배치
· float : right 오른쪽으로 배치
· float : none 좌우 어느 쪽으로도 배치하지 않습니다.
예제
<style>
.image {
float: left;
margin-right: 20px;
}
</style>
<div>
<img src="https://placeimg.com/200/200/any" class="image" />
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, possimus, perspiciatis? Delectus laudantium magni laborum consequuntur, magnam facere rem saepe, inventore nesciunt, perspiciatis quam pariatur id dignissimos possimus quidem fuga.</p>
</div>
결과 화면
image에 float: left를 사용하면
이미지를 왼쪽 배치 후 오른쪽에 텍스트가 나란히 배치됩니다.
저는 css를 공부하던 초기에 책이나 강의를 통해서도 float의 개념이
확실하게 잡히지 않아서(특히 부유하다) 헷갈리던 차에
아래 비디오를 통하여 개념을 확실히 공부했습니다.
여러분도 아래 비디오를 꼭 확인해주세요.
예제
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #dedede;
font-size: 30px;
}
.float {
float: left;
}
.right {
float: right;
}
.no1 {
background-color: red;
}
.no2 {
background-color: yellow;
}
.no3 {
background-color: greenyellow;
}
.no4 {
background-color: beige;
}
.no5 {
background-color: skyblue;
}
</style>
<div>
<div class="box no1 float">1</div>
<div class="box no2 float">2</div>
<div class="box no3 float">3</div>
<div class="box no4 right">4</div>
<div class="box no5 float">5</div>
</div>
결과
박스 1, 2, 3, 5번은 float: left, 4번은 float: right를 주었습니다.
clear 속성: float 속성 해제하기
clear: both는 취소하다 라는 개념으로 float: left/right와 짝꿍 개념입니다.
float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나
부유된 영역 아래(under)로 들어가게 됩니다.
float 속성이 더 이상 사용하지 않고, 그 전으로 되돌리고 싶다면
사용하는 것이 clear: both입니다.
clear: both; 오른쪽/왼쪽을 취소, 가장 많이 사용
clear: left; 왼쪽을 취소
clear: right; 오른쪽을 취소
clear: none; 기초 값을 clear값을 설정하지 않은 것과 같다.
float: left를 해제하기 위해 clear: left라고 지정하면 되지만
float 속성 값을 일일이 기억하지 번거롭기 때문에
보통 clear: both라고 지정합니다.
예제
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #dedede;
font-size: 30px;
}
.float {
float: left;
}
.clear {
clear: both;
}
.no1 {
background-color: red;
}
.no2 {
background-color: yellow;
}
.no3 {
background-color: greenyellow;
}
.no4 {
background-color: pink;
width: 600px;
height: 200px;
}
.no5 {
background-color: skyblue;
}
</style>
<div>
<div class="box no1 float">1</div>
<div class="box no2 float">2</div>
<div class="box no3 float">3</div>
<div class="box no4">4</div>
<div class="box no5 clear">5</div>
</div>
결과
박스 4번의 경우, float 속성을 적용하지 않았으므로,
float을 적용했던 박스 1,2,3번은 부유한 상황이고,
이들의 아래로 들어가 있게 됩니다.
clear속성을 적용한 박스 5번은 flaot 속성이 해제돼있습니다.
실무에서 clear: both 사용방법
제가 실무에서 주로 사용하는 방법은
부모 태그에 class name을 fixedclear로 주고, ::after 가상 요소를 이용합니다.
.fixedclear:after {
content: '';
display: block;
clear: both;
}
위와 같이 사용하면, float을 줄 때마다 부모 클래스 이름에 fixedclear를 주면,
앞으로 css에서 일일이 clear:both를 줄 필요가 없어 간편합니다.
예제
결과
float 실무에서 잊지말아야 할 꿀팁
· float은 <li>와 같은 형제요소 줍니다.(<a>에 안주는 이유: <a>끼리는 남이기 때문에)
· clear: both 사용시, 부모 태그에 class name을 fixedclear로 주고, ::after 가상요소를 이용합니다.
· float 해제하는 다른 방법은 overflow: hidden 입니다.
-> "overflow: hidden;"는 영역을 벗어난 부분을 감춰주는 의미이기도 하지만,
float을 시켰을 때 그 부모 영역의 높이가 없어져 버립니다.
예로, <ul> <li> 사용시, <li> 요소에 float을 주면 <ul> 의 높이가 없어집니다.
이때, <ul> 에 overflow: hidden; 을 적용하면 float을 해제되어 영역만큼 높이 설정이 됩니다.
· 같은 요소에서 margin: 0 auto와 float은 동시에 적용이 안됩니다.
-> 이 경우에는 <div> 태그를 이용하여 부모를 하나 더 감싼 후 부모요소에 margin 0 auto를 주거나,
flaot : left, margin-left로 너비를 잡아줍니다.
'개발 > Html, Css' 카테고리의 다른 글
[css] reset css 기본값 코드(ft. 기본 css 세팅) (0) | 2021.01.25 |
---|---|
[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형) (0) | 2021.01.21 |
[css]뷰포트 미디어쿼리 사용하기(ft. 반응형웹 만들기) (0) | 2020.09.21 |
[css] background속성 한번에 사용하기 (0) | 2020.09.16 |
[css] 가상요소 선택자 ::before, ::after 사용법(ft. 가상 클래스) (0) | 2020.07.09 |
댓글