1. Float
- block요소를 부유(float) 시켜주는 속성
- 부유(float)되는 block요소 밑으로 뒤에 있는 block요소가 자리를 채운다.
(inline / inline-block 속성의 요소는 float 된 요소 밖으로 밀려남)
- 기사에 삽입된 광고나 단락에 삽입된 이미지가 가장 흔한 예시.
<style>
/* "Float"의 가장 많은 사용 예시는 광고창 */
#float {
width: 300px;
height: 300px;
margin-right: 20px;
margin-bottom: 20px;
float: left
}
/* display 속성이 block인 div의 폭은 변경 없이 100%로 float요소 밑에 그대로 존재하고 있지만
div안에 있는 inline(혹은 inline-block) 속성의 텍스트는 float가 차지하는 공간에 들어가지 못한다. */
#green {
width: 100%;
height: 500px;
}
#pink {
width: 100%;
height: 400px;
}
</styel>
<div id="float"> 예)광고창 </div>
<div id="green"> 보통 원문 기사가 이런 자리에 이렇게 들어 갈 겁니다.</div>
<div id="pink"> 기사가 계속 이어지는 모양 예시.</div>
2. Multiple Floats (Grid-layout)
- 동시에 여러 요소들을 Float 시켜서 그리드 레이아웃을 만들 수 있다.
- 여러 요소에 float 값을 left(혹은 right)로 설정할 경우 요소의 폭이 브라우저 넓이를 넘으면
자동 줄 바꿈이 된다.
<style>
/*float된 요소들의 폭이 브라우저 폭을 넘으면 자동 줄바꿈 됨.*/
.col {
float: left;
}
.col-one {
width: 200px;
height: 200px;
}
.col-two {
width: 500px;
height: 200px;
}
</style>
<div class="col col-one" background-color:"yellow"></div>
<div class="col col-one" background-color:"orange"></div>
<div class="col col-two" background-color:"red"></div>
<div class="col col-two" background-color:"green"></div>
<div class="col col-one" background-color:"navy"></div>
<div class="col col-two" background-color:"blue"></div>
<div class="col col-two" background-color:"purple"></div>
3. Clear
- "float" 속성과 같이 쓰이는 속성
- "clear"는 'float"의 좌우 빈공간에 컨텐츠가 따라 붙어 버리는 큰 문제를 해결해주는 역할을 함.
- 속성값 left / right를 취해 왼쪽 혹은 오른쪽에 더이상 요소가 붙지 않게끔 해줌.
<style>
.grid {
border: 3px;
}
/* 그리드-레아이웃 정리용 clear 속성의 div*/
. clear_fix {
cealr: left;
}
.col {
float: left;
}
.col-one {
width: 200px;
height: 200px;
}
.col-two {
width: 500px;
height: 200px;
}
</style>
<div class="grid">
<div class="col col-one" background-color:"yellow"></div>
<div class="col col-one" background-color:"orange"></div>
<div class="col col-two" background-color:"red"></div>
<div class="col col-two" background-color:"green"></div>
<div class="col col-one" background-color:"navy"></div>
<div class="col col-two" background-color:"blue"></div>
<div class="col col-two" background-color:"purple"></div>
<!-- 그리드 레이아웃과 다른 요소를 구분하고 정리해주기 위해 "clear"속성의 div를 추가 -->
<div class="clear_fix"></<div>
<p>float된 요소 밑에 바로 inline / inline-block요소가 오면 float요소들의 좌, 우 빈공간에
마구잡이로 요소가 들러 붙는 문제가 생긴다.</p>
</div>
댓글