728x90
반응형
Float
- 다른 내용(content)들이 해당 요소를 비켜가게 만든다.
- float 설정한 요소는 둥둥 떠있는 요소로 바뀐다.
- float 요소끼리는 한 줄을 가득 채우면 다음줄로 넘어가는 특성이 있다.
- clear 속성을 사용해 원하는 쪽에 float 요소가 오지 않게 할 수 있다.
- float 요소는 해당 요소를 포함한 요소의 크기 결정에 영향을 미치지 못한다.
- float 설정된 요소가 바깥 요소를 넘치지 않게 하기 위해 float이 포함된 요소의 맨 마지막에 가짜 요소를 추가하고 clear를 통해 요소의 크기를 늘려주는 것이 좋다.
float: left;< 웹 브라우저로 상세히 보기 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14_Float.html</title>
<link rel="stylesheet" href="./assets/css14.css">
</head>
<body>
<h3># Float</h3>
<ul>
<li>다른 내용(content)들이 해당 요소를 비켜가게 만든다.</li>
<li>float 설정한 요소는 둥둥 떠있는 요소로 바뀐다.</li>
<li>float 요소끼리는 한 줄을 가득 채우면 다음줄로 넘어가는 특성이 있다.</li>
<li>clear 속성을 사용해 원하는 쪽에 float 요소가 오지 않게 할 수 있다.</li>
<li>float 요소는 해당 요소를 포함한 요소의 크기 결정에 영향을 미치지 못한다.</li>
<li>
float 설정된 요소가 바깥 요소를 넘치지 않게 하기 위해
float이 포함된 요소의 맨 마지막에 가짜 요소를 추가하고
clear를 통해 요소의 크기를 늘려주는 것이 좋다.
</li>
</ul>
<div id="div1">
<img id="img1" src="../html/resource/image/ddung.jpg" alt="스폰지밥실사화">
<img id="img2" src="../html/resource/image/부리부리맨.jpg" alt="부리부리맨">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae reiciendis ab
odit reprehenderit aliquid harum, qui officiis nisi distinctio nostrum libero laboriosam
omnis possimus quia, recusandae incidunt, aspernatur accusamus dolore!
</div>
<div id="div2" style="margin-top: 30px;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="div3">
<div>header</div>
<div>left pane</div>
<div>
<div>pre-body</div>
<div>body(content)</div>
<div>post-body</div>
</div>
<div>right pane</div>
<div>footer</div>
</div>
</body>
</html>#div1 {
text-align: justify;
border: solid 3px black;
}
#div1::after {
content:"";
display: block;
clear: right;
}
#img1 {
float: left;
margin-right: 15px;
width: 200px;
}
#img2 {
float:right;
clear: left; /* 다른 float 요소가 왼쪽에 없게 해달라는 뜻 */
width: 300px;
margin-left: 15px;
}
#div2 {
border: solid 3px black;
background-color: beige;
margin-bottom: 20px;
}
#div2::after {
content: "";
display: block;
clear: left;
}
#div2 > div {
box-sizing: border-box;
border: solid 3px darkred;
background-color: salmon;
border-radius: 15px;
padding: 30px;
color: white;
font-size: 25px;
float: left;
}
#div2 > div:first-child {
width: 100%;
}
#div2 > div:nth-child(2) {
width: 75%;
height: 800px;
background-color: white;
color: black;
}
#div2 > div:nth-child(3) {
width: 25%;
height: 600px;
}
#div2 > div:nth-child(4) {
width: 25%;
height: 200px;
}
#div3 {
border: solid 3px black;
}
#div3::after {
content: "";
display: block;
clear: left;
}
#div:nth-child(3)::after {
content: "";
display: block;
clear: left;
}
#div3 > div {
box-sizing: border-box;
border: solid 3px red;
font-size: 25px;
float: left;
}
#div3 > div:first-child {
width: 100%;
height: 100px;
}
#div3 > div:nth-child(2) {
width: 20%;
height: 900px;
}
#div3 > div:nth-child(3) {
width: 60%;
height: 900px;
}
#div3 > div:nth-child(3) > div {
border: solid 3px blue;
float: left;
}
#div3 > div:nth-child(3) > div:first-child {
width: 100%;
height: 210px;
}
#div3 > div:nth-child(3) > div:nth-child(2) {
width: 100%;
height: 50%;
}
#div3 > div:nth-child(3) > div:nth-child(3) {
width: 100%;
height: 25%;
}
#div3 > div:nth-child(4) {
width: 20%;
height: 900px;
}
#div3 > div:nth-child(5) {
width: 100%;
height: 100px;
}728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] Flex (2) | 2023.06.08 |
|---|---|
| [CSS] Display (0) | 2023.06.08 |
| [CSS] 가상 요소 (0) | 2023.06.07 |
| [CSS] 가상 클래스 (0) | 2023.06.07 |
| [CSS] 아이콘(Icon) (0) | 2023.06.07 |
