CSS

[CSS] Float

로아다 2023. 6. 8. 08:51
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
반응형