[CSS] 6. 블록 앨리먼트를 붙여보쟈. (float) 강의이야기 | Posted on 2012. 2. 4. 23:56
해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.
이번에는 블록 앨리먼트들을 인라인 앨리먼트들처럼 붙여보겠습니다.
사용하는것은 float 입니다.
float:(left || right);
예시입니다.
<div>a</div>
<div style="float:left;">b</div><div>c</div>
<div style="float:right;">d</div>
<div>e</div>
보시면 아시겠지만..
a는 왼쪽.
b도 왼쪽이지만 오른쪽에 c가 붙어있습니다.
그 아래쪽은 e가 왼쪽, d가 오른쪽에 있습니다.
float는 설정된 장소에 있고, 다음 블록 앨리먼트를 반대편으로 끌어오는 역활을 합니다.
만약에 d를 c 오른쪽에 붙이고 싶으시다면, d의 float:right;를 지우시고, c에 float:left;를 추가하시면 됩니다.
또한 앨리먼트를 단순 좌우 정열에도 사용이 가능합니다.
d와 e처럼 말이죠.
동일한 라인의 좌우에 블록 앨리먼트가 있어야 할 필요가 있다면 float로 해결이 가능합니다.
※ Tip : 만일 d와 e를 동일한 라인에 두고 싶지 않을경우..
즉, float의 영향을 받게 하고 싶지 않을경우는, clear:both;를 사용하시면 됩니다.
<div>a</div>
<div style="float:left;">b</div><div>c</div>
<div style="float:right;">d</div>
<div style="clear:both;">e</div>
clear에는 both말고도 left, right, none 이 있습니다.
출처 : Pure Ani's Blog
이번에는 블록 앨리먼트들을 인라인 앨리먼트들처럼 붙여보겠습니다.
사용하는것은 float 입니다.
float:(left || right);
예시입니다.
<div>a</div>
<div style="float:left;">b</div><div>c</div>
<div style="float:right;">d</div>
<div>e</div>
보시면 아시겠지만..
a는 왼쪽.
b도 왼쪽이지만 오른쪽에 c가 붙어있습니다.
그 아래쪽은 e가 왼쪽, d가 오른쪽에 있습니다.
float는 설정된 장소에 있고, 다음 블록 앨리먼트를 반대편으로 끌어오는 역활을 합니다.
만약에 d를 c 오른쪽에 붙이고 싶으시다면, d의 float:right;를 지우시고, c에 float:left;를 추가하시면 됩니다.
또한 앨리먼트를 단순 좌우 정열에도 사용이 가능합니다.
d와 e처럼 말이죠.
동일한 라인의 좌우에 블록 앨리먼트가 있어야 할 필요가 있다면 float로 해결이 가능합니다.
※ Tip : 만일 d와 e를 동일한 라인에 두고 싶지 않을경우..
즉, float의 영향을 받게 하고 싶지 않을경우는, clear:both;를 사용하시면 됩니다.
<div>a</div>
<div style="float:left;">b</div><div>c</div>
<div style="float:right;">d</div>
<div style="clear:both;">e</div>
clear에는 both말고도 left, right, none 이 있습니다.
출처 : Pure Ani's Blog