float는 사전에서 찾아보면 "붕 뜨다", "부유하다"라는 뜻을 지니고 있는 단어입니다.
글의 본문 안에서 이미지를 자연스럽게 삽입 할 때 사용하는 기법입니다.
float를 많이 사용하는 곳 중 하나는 삽화 삽입 뿐만 아니라 레이아웃을 잡을 때도 사용합니다.
<!DOCTYPE >
<html>
<head>
<style>
img {
width: 400px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
p {
border: 1px solid gray;
}
</style>
</head>
<body>
<img
src="https://blog.kakaocdn.net/dn/bcecsd/btrshzCF1Oq/EgdomCNeLsq5xHZe6g83Pk/img.gif"
alt=""
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro aperiam
laboriosam cumque ipsam dolore facere commodi modi aliquid. Beatae
obcaecati culpa id suscipit in praesentium, doloribus rem a, cupiditate
eveniet necessitatibus quo autem velit ducimus est, eum saepe?
</p>
<p style="clear: both">
<!-- clear: both => floating을 무시한다 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro aperiam
laboriosam cumque ipsam dolore facere commodi modi aliquid. Beatae
obcaecati culpa id suscipit in praesentium, doloribus rem a, cupiditate
eveniet necessitatibus quo autem velit ducimus est, eum saepe?
</p>
</body>
</html>'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] filter (0) | 2022.02.05 |
|---|---|
| [생활코딩] background (0) | 2022.02.05 |
| [생활코딩] Media Query (0) | 2022.02.04 |
| [생활코딩] Multi Column (0) | 2022.02.04 |
| [생활코딩] flex : holy grail layout (0) | 2022.02.03 |
댓글