[CSS] float(1) - 개념

1. float

float는 글의 본문 안에서 이미지를 삽입할 때 이미지를 자연스럽게 삽입하기 위한 기법이며, 페이지의 레이아웃을 잡을 때도 사용합니다.

1) float 사용 안했을 때

우선 float을 사용하지 않고 텍스트에 이미지를 삽입했을 때 입니다.

<style type="text/css"
         img{
                  width:300px;
         }
</style>
 
<img src="images/back_image2.jpg">
<p>
          Lorem Ipsum is simply dummy text of the printing and
           typesetting industry. Lorem Ipsum has been the industry's
           standard dummy text ever since the 1500s,
           when an unknown printer took a galley of type and
           scrambled it to make a type specimen book.
           It has survived not only five centuries,
           but also the leap into electronic typesetting,
           remaining essentially unchanged. It was popularised
           in the 1960s with the release of Letraset sheets containing
           Lorem Ipsum passages, and more recently with desktop
           publihing software like Aldus PageMaker including versions
           of Lorem Ipsum.
           Lorem Ipsum is simply dummy text of the printing and
           typesetting industry. Lorem Ipsum has been the industry's
           standard dummy text ever since the 1500s,
           when an unknown printer took a galley of type and
           scrambled it to make a type specimen book.
           It has survived not only five centuries,
           but also the leap into electronic typesetting,
           remaining essentially unchanged. It was popularised
           in the 1960s with the release of Letraset sheets containing
           Lorem Ipsum passages, and more recently with desktop
           publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

• <p>의 내용으로 의미 없는 Lorem Ipsum을 추가했습니다.
• <img>와 <p>는 모두 block 형태이므로 페이지의 전체 row를 차지하기 때문에, 각각의 영역을 차지하고 있는 모습입니다.

2) img에 float 부여

이번에는 <img>에 float을 부여 해보도록 하겠습니다.

img{
        width:300px;
        float:left;
}

• 문단 옆에 그림이 자연스럽게 흘러 들어간 모습을 볼 수 있습니다.
• 이미지가 차지하는 영역이 끝나면, <p>의 내용은 이미지 밑으로 흘러갑니다.

이런 식으로 float을 사용할 수 있는데, 이러한 효과로 인해 float은 페이지의 레이아웃을 잡는데 주로 사용됩니다.

이상으로 float의 기본 개념에 대해 알아보았습니다.

다음 글에서는 float을 사용해서 레이아웃을 잡아보도록 하겠습니다.

float을 좀 더 자유자재로 사용할 수 있는 계기가 될 것 같습니다.

[ 출처 ]

생활코딩 CSS - float