float
float은 이미지에 텍스트를 둘러 감싸기 위해 만들어진 속성입니다.
자연스러운 배치가 가능하기 때문에 페이지 전체의 레이아웃을 구성할 때에도 중요하게 사용됩니다.
float 속성에는 총 3가지를 사용할 수 있습니다.
- left : 요소를 왼쪽 방향으로 띄움
- right : 요소를 오른쪽 방향으로 띄움
- none : 기본값이며, 요소를 띄우지 않습니다.
float: none
<body>
<img src="img.jpg" width="250" height="200">
<div>
아직 float 속성을 적용하지 않았습니다. flaot 속성을 적용하지 않으면 어떻게 될까요,,,
float에는 3가지 속성이 있는데 지금은 적용하지 않았으니 기본값으로 none이 적용된 상태이겠죠.
</div>
</body>
float: left
<body>
<img style="float:left" src="img.jpg" width="250" height="200">
<div>
한자로는 ~~~ 이하 생략
</div>
</body>
float 속성에 left를 적용한 모습입니다. 이미지가 자연스럽게 왼쪽으로 정렬이 되고 텍스트는
그 이미지를 자연스럽게 따라서 줄바꿈되는 모습입니다.
float: right
<body>
<img style="float:right" src="img.jpg" width="250" height="200">
<div>
한자로는 ~~~ 이하 생략
</div>
</body>
이번에는 반대로 float 속성에 right 적용한 모습입니다. 당연히 이번엔 오른쪽으로 이미지가
자연스럽게 배치되고 텍스트도 그에 따라 바뀐 모습입니다.
*** 사진 속 고양이는 '까망이' 입니다,,,
고양이가 귀엽네요