float
- 붕뜨다, 부유하다 라는 사전적 의미
- 글의 본문 안에서 이미지를 삽입할 때 이미지를 자연스럽게 삽입할 때 사용하는 기법
- 삽화를 삽입하거나 레이아웃을 잡을 때 많이 사용하기도 한다.
- 화면의 크기와 상관없이 레이아웃 크기가 고정된다는 단점이 존재한다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
margin: 20px;
}
</style>
</head>
<body>
<img src="./img/리리.png" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda aperiam
reprehenderit tempore doloremque magni. Aliquid ullam quibusdam debitis
alias esse dolore dolores corrupti similique eaque dolorem quasi magni
</p>
<p style="clear: both">
<!-- 이미지를 피해가지 않고 원래 위치를 고수하는 방법 - clear 사용 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda aperiam
reprehenderit tempore doloremque magni. Aliquid ullam quibusdam debitis
alias esse dolore dolores corrupti similique eaque dolorem quasi magni
fugiat soluta, recusandae officiis animi suscipit sequi illo molestiae
vero nam fuga. Alias ut eaque, nulla quod aliquid et necessitatibus,
architecto incidunt magnam consequatur quibusdam dolor iste dolorum
assumenda quae sint aperiam pariatur officia non vel. Minima maxime
molestias est at eos optio quis. Sint suscipit dignissimos dolore nulla
qui, nesciunt commodi sed consequuntur? Ipsum a, et animi velit cum nam
nostrum autem, nihil, non possimus consequatur est modi voluptates. A
architecto autem ratione maxime error, ipsum rerum molestias, mollitia
nemo pariatur numquam quo quaerat, maiores atque dolorum! Maxime
praesentium tempora inventore, aut eligendi dolores sunt laudantium
pariatur adipisci voluptas quam magnam ab maiores repellendus
exercitationem natus soluta consequatur dolore illum repudiandae?
Voluptate consectetur pariatur porro expedita iure sit. Dolor, at
repudiandae placeat nesciunt, iure ad rerum nam eligendi id magnam vitae
consectetur accusamus illum sed, necessitatibus praesentium inventore ipsa
quo odio aliquam voluptatum? Eius esse dolore aut voluptate. Molestiae
</p>
</body>
</html>
응용 - float를 이용한 holy grail layout 만들기
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
/* 테두리까지 포함해 크기가 나옴(121x98) 계산하기 복잡하므로 box-sizing을 이용 */
/* 박스의 크기를 지정할 때 테두리를 기준으로 한다. */
}
header {
border-bottom: 1px solid gray;
}
nav {
float: left;
width: 120px;
border-right: 1px solid gray;
/* 오른쪽에 선을 주면 nav가 길어졌을 때 선이 끊기지 않는다. */
}
article {
float: left;
width: 300px;
border-left: 1px solid gray;
/* 왼쪽에 선을 주면 article이 길어졌을 때 선이 끊기지 않는다. */
border-right: 1px solid gray;
margin-left: -1px;
/* article 영역을 왼쪽으로 1px만큼 움직이면 nav의 border와 article의 왼쪽 border가 서로 겹쳐지면서 현상이 사라진다. */
}
aside {
float: left;
width: 120px;
border-left: 1px solid gray;
margin-left: -1px;
}
footer {
clear: both;
border-top: 1px solid gray;
text-align: center;
padding: 20px;
}
.container {
width: 540px;
/* 컨테이너 크기를 고정하면 화면의 크기와 상관없이 레이아웃이 변경되는 것을 막을 수가 있다. */
border: 1px solid gray;
margin: auto;
/* 화면 가운데에 위치하도록 만들 수 있다. */
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
veritatis ea tempora ratione aspernatur corrupti minima aliquid eius
assumenda. Adipisci, nesciunt qui consectetur tenetur porro ad molestias
reiciendis itaque officiis, at expedita temporibus et voluptatibus
corrupti. Explicabo dolorum error qui repudiandae soluta praesentium
deserunt, minima quia optio. Natus, quasi in.
</article>
<aside>ad</aside>
<footer>copyright</footer>
</div>
</body>
</html>
'html & css > 개념' 카테고리의 다른 글
| 필터(filter) (0) | 2023.11.28 |
|---|---|
| 배경(background) (6) | 2023.11.28 |
| 미디어쿼리 기본 (0) | 2023.11.24 |
| flex - 기타 속성들 (0) | 2023.11.24 |
| flex - holy grail layout (1) | 2023.11.24 |
