๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/HTML CSS

CSS ๊ธฐ๋ณธ (6)_ํฌ์ง€์…”๋‹(float, overflow, clear)

by KASSID 2022. 1. 5.

๋ชฉ์ฐจ

    728x90

    float

    ๋ถ€๋ชจ ์š”์†Œ ๊ธฐ์ค€, ์™ผ์ชฝ or ์˜ค๋ฅธ์ชฝ ๋ฐฐ์น˜ ์ง€์ •

    margin : auto

    : ๊ฐ€์šด๋ฐ๋กœ! (โ€ป์ฃผ์˜ : block์š”์†Œ๋งŒ ์ ์šฉ๊ฐ€๋Šฅ!)

     

    ์˜ˆ์‹œ

    <div class="parent">
        <div class="child"></div>
    </div>
    .parent {
         border: 5px solid red;
         width: 600px;
         /*์ž์‹์š”์†Œ์— height๊ฐ’ ์ง€์ •ํ•ด์ฃผ๋ฉด ์ž๋™์œผ๋กœ ๋Š˜์–ด๋‚˜๊ธฐ ๋•Œ๋ฌธ์— ๋†’์ด ๋”ฐ๋กœ ์ง€์ •X*/
    }
    .child {
        background-color: gold;
        width: 200px;
        height: 200px;
    }

    float ์†์„ฑ์„ ๋”ฐ๋กœ ์ฃผ์ง€ ์•Š์€ ์ƒํƒœ์ด๋‹ค.

    ์™ผ์ชฝ์œผ๋กœ ๋ฐฐ์น˜ ๋˜์–ด์žˆ๋Š” ๊ฒƒ์„ ๋ณด๊ณ 

    "๊ธฐ๋ณธ๊ฐ’์ด float: left ์ธ๊ฐ€?" ๋ผ๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ

     

    ์•„๋‹ˆ๋‹ค!

     

    float ์†์„ฑ์„ ์ค€ ๊ฒฝ์šฐ

    .parent {
         border: 5px solid red;
         width: 600px;
         /*์ž์‹์š”์†Œ์— height๊ฐ’ ์ง€์ •ํ•ด์ฃผ๋ฉด ์ž๋™์œผ๋กœ ๋Š˜์–ด๋‚˜๊ธฐ ๋•Œ๋ฌธ์— ๋†’์ด ๋”ฐ๋กœ ์ง€์ •X*/
    }
    .child {
        background-color: gold;
        width: 200px;
        height: 200px;
    }

    ์œ„ ์ฒ˜๋Ÿผ float: left๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด ์ž์‹์š”์†Œ๊ฐ€ ์—†๋‹ค๊ณ  ํŒ๋‹จํ•ด์„œ ๋†’์ด๊ฐ’์„ ์žƒ๋Š”๋‹ค!

    ์ฆ‰, ์ž์‹์š”์†Œ๊ฐ€ ๋ถ€๋ชจ ์†์„ฑ์˜ ์œ„์— ๋ฐฐ์น˜๊ฐ€ ๋œ๋‹ค.

     

    float๋Š” ๋ง๊ทธ๋Œ€๋กœ ๋‘ฅ๋‘ฅ ๋– ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.

     

    ๋ถ€๋ชจ์š”์†Œ์— ๋†’์ด๊ฐ’์„ ์ค„ ๋•Œ ์ง์ ‘ height๊ฐ’์„ ์ฃผ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์ง€๋งŒ,

    ์ž์‹์š”์†Œ์— ๋งž๊ฒŒ ๋ณ€ํ™”๋ฅผ ์ฃผ๋ ค๋ฉด ์ผ์ผํžˆ ๋ณ€๊ฒฝ์„ ํ•ด์•ผํ•œ๋‹ค.

     

     

    ๊ทธ๋ž˜์„œ overflow: hidden์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

    .parent {
         border: 5px solid red;
         width: 600px;
         overflow: hidden;
    }
    .child {
        background-color: gold;
        width: 200px;
        height: 200px;
        float: left;
    }

    float์†์„ฑ์„ ์ฃผ์ง€ ์•Š์•˜๋˜ ๊ฒƒ๊ณผ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค!

    ์ž์‹ ์š”์†Œ์˜ height๊ฐ’์— ๋ณ€ํ™”๋ฅผ ์ฃผ์–ด๋„ ์ž๋™์œผ๋กœ ๋งž์ถฐ์ง„๋‹ค.

    (height: auto๊ฐ€ ์ ์šฉ์ด ๋˜๋Š” ๊ฒƒ!)


     float ์†์„ฑ ์œ ์˜ํ•  ์ ! 

    float์†์„ฑ์„ ์‚ฌ์šฉํ•  ๋•Œ left์™€ right๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ

    ํ•œ ๊ฐ€์ง€ ์•Œ๊ณ  ์žˆ์œผ๋ฉด ์ข‹์„ ํŒ์ด ์žˆ๋‹ค!

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

     

    div {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 5px;
        box-sizing : border-box;
    }
    .container {
        width: 500px;
        overflow: hidden;
    }
    .box1{background: #000;float: left;}
    .box2{background: gold;float: left;}
    .box3{background: crimson;float: right;}
    .box4{background: dodgerblue;float: right;}

    ์œ„์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค๋Š”๋ฐ

    box3 ์™€ box4๊ฐ€ float : right๋กœ ์˜ค๋ฅธ์ชฝ ์ •๋ ฌ์ด ๋˜์–ด์žˆ๋‹ค.

     

    ์ด๋•Œ ๋จผ์ € right๋ฅผ ์ ์šฉํ•œ box3๊ฐ€ ๋จผ์ € ๋ฐฐ์น˜๊ฐ€ ๋œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค!

     


    ๊ฐ€์šด๋ฐ ์ •๋ ฌ (margin: auto)

     

    ํ•œ ๋ฒˆ ์–ธ๊ธ‰์„ ํ–ˆ์ง€๋งŒ margin: auto๋Š” block์š”์†Œ์—๋งŒ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

    div๋Š” ๋ธ”๋ก์š”์†Œ ์ค‘ ํ•˜๋‚˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์šด๋ฐ ์ •๋ ฌ์„ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐ€๋Šฅํ•˜๋‹ค!

    .parent {
         border: 5px solid red;
         width: 600px;
         overflow: hidden;
    }
    .child {
        background-color: gold;
        width: 200px;
        height: 100px;
        margin: auto;
    }

     

    div๋ฅผ inline-block์š”์†Œ๋กœ ๋ฐ”๊พธ์–ด๋ณด์ž

    .child {
        background-color: gold;
        width: 200px;
        height: 100px;
        margin: auto;
        display: inline-block;
    }

    margin: auto๊ฐ€ ์žˆ์–ด๋„ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ๋˜์ง€ ์•Š๋Š”๋‹ค.

     

    ๊ทธ๋ ‡๋‹ค๋ฉด inline์š”์†Œ์™€ inline-block์š”์†Œ๋Š” ๊ฐ€์šด๋ฐ ์ •๋ ฌ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฑธ๊นŒ??

     

    ๊ฐ€๋Šฅํ•˜๋‹ค!!

     

    ๋ถ€๋ชจ์š”์†Œ์— text-align: center๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

    .parent {
         border: 5px solid red;
         width: 600px;
         overflow: hidden;
         text-align: center;
    }
    .child {
        background-color: gold;
        width: 200px;
        height: 100px;
        display:inline-block;
    }

    ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ์ด ์ž˜ ๋œ ๋ชจ์Šต์ด๋‹ค.

     

    ์ด๋•Œ, ๋‹ค์‹œ ์ฃผ์˜ํ•  ์ ์€ ์ด ๋ฐฉ๋ฒ•์€ block์š”์†Œ์—๋Š” ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค.

     

     

    ์ •๋ฆฌํ•ด๋ณด๋ฉด,
    margin: auto : block ์š”์†Œ / ์ž๊ธฐ ์ž์‹ ์—๊ฒŒ ๋ถ€์—ฌ
    text-align: center : inline, inline-block ์š”์†Œ / ๋ถ€๋ชจ ์š”์†Œ์— ๋ถ€์—ฌ


    clear

    : float์†์„ฑ์€ ๋‹ค์Œ ์š”์†Œ๋กœ '์ž๋™ ์ƒ์†'์ด ๋œ๋‹ค. ์ด๊ฒƒ์„ ํ’€์–ด์ค„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

     

      ์‰ฝ๊ฒŒ ๋งํ•˜๋ฉด float๋ฅผ ์ค€ ๊ฒƒ์˜ ๋‹ค์Œ ์š”์†Œ๋„ float์ด ์ž๋™ ์ ์šฉ์ด ๋˜๋Š”๋ฐ

      ์ด๋ฅผ ํ•ด์ œ ์‹œํ‚ฌ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

     

    clear : both, left, right

     

    ์˜ˆ์‹œ

    <div class="parent">
        <div class="top">float: none</div>
        <div class="left">float: left</div>
        <div class="right">float: right</div>
        <div class="clear">clear: both</div>
    </div>
    .parent {
        border: 1px solid #000;
        width: 600px;
    }
    .top {
        background-color: blueviolet;
        height: 50px;
    }
    .left {
        background-color: rgb(234, 167, 255);
        height: 70px;
        width: 200px;
        float: left;
    }
    .right {
        background-color: rgb(217, 103, 255);
        height: 70px;
        width: 400px;
        float: right;
    }
    .clear {
        background-color: blueviolet;
        /* clear: both; */
        height: 50px;
    }

    ์œ„ ์ฝ”๋“œ์˜ ์‹คํ–‰ ๊ฒฐ๊ณผ์ด๋‹ค.

    float ํ˜น์€ clear: both์„ ๋ถ€์—ฌํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ

    ๊ทธ ๊ฒฐ๊ณผ๋กœ ์œ„์ฒ˜๋Ÿผ ํ™”๋ฉด์ƒ์— ๋‚˜์˜ค์ง€ ์•Š๊ณ  ์ˆจ์–ด๋ฒ„๋ฆฐ๋‹ค.

     

    ์ด๋Š” ์œ— ์š”์†Œ๊ฐ€ float ์†์„ฑ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์—

    float:none ์œผ๋กœ ์ ์šฉ์ด ๋œ ๊ฒƒ์ด๋‹ค!

     

     

    ๊ทธ๋ ‡๋‹ค๋ฉด clear:both๋กœ ํ•ด์ œ๋ฅผ ์‹œ์ผœ๋ณด์ž

    .clear {
        background-color: blueviolet;
        clear: both;
        height: 50px;
    }

    ํ•ด์ œ๋ฅผ ํ•ด์ฃผ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ •์ƒ์ ์œผ๋กœ ํ™”๋ฉด์ด ๋‚˜์˜ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜์žˆ๋‹ค!


     ์—ฌ๋Ÿฌ ์š”์†Œ ๊ฐ€๋กœ ๋ฐฐ์น˜๋ฅผ ์œ„ํ•œ 2๊ฐ€์ง€ ๋ฐฉ๋ฒ• 

     

    block์š”์†Œ์ธ section๊ณผ article ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ์•Œ์•„๋ณด์ž.

    ์ด ์š”์†Œ๋“ค์€ ๋ณธ๋”” ๊ฐ€๋กœ๋ฐฐ์น˜๋ฅผ ํ•  ์ˆ˜ ์—†๋Š” ํŠน์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค!

    (์ž์„ธํ•œ ๋‚ด์šฉ: https://bluishhot-star.tistory.com/67 )

    <section class="parent">
        <article class="child"></article>
        <article class="child"></article>
        <article class="child"></article>
    </section>
    .parent {
        border: 1px solid #000;
        width: 300px;
    }
    .child {
        background-color: gold;
        width: 100px;
        height: 50px;
        border: 1px solid red;
    }

    ์œ„์˜ ๊ทธ๋ฆผ์„ ๊ฐ€๋กœ ๋ฐฐ์น˜ํ•ด๋ณด์ž!

     

     

    1. float์™€ overflow

    <section class="parent">
        <article class="child"></article>
        <article class="child"></article>
        <article class="child"></article>
    </section>
    .parent {
        border: 1px solid #000;
        width: 300px;
        overflow: hidden;
    }
    .child {
        background-color: gold;
        width: 100px;
        height: 50px;
        border: 1px solid red;
        float: left;
        box-sizing: border-box; /*์‚ฌ์ด์ฆˆ ์ง€์ •ํ•œ๋Œ€๋กœ ๋งž์ถฐ์ฃผ๊ธฐ*/
    }

    float: left๋ฅผ ์ด์šฉํ•ด ์š”์†Œ๋“ค์„ ๊ฐ€๋กœ๋กœ ๋ฐฐ์น˜ํ•˜๊ณ 

    overflow: hidden์„ ํ†ตํ•ด์„œ ๋ถ€๋ชจ์š”์†Œ์˜ ์žƒ์–ด๋ฒ„๋ฆฐ height๋ฅผ ์ฐพ์•„์ฃผ์—ˆ๋‹ค.

     

     

    2. inline-block์œผ๋กœ ๋ณ€ํ™˜

    .parent {
        border: 1px solid #000;
        width: 400px;
        text-align: center;
    }
    .child {
        background-color: gold;
        border: 1px solid red;
        width: 100px;
        height: 50px;
        display: inline-block;
    }

    inline-block์š”์†Œ๋กœ ๋ณ€ํ™˜ํ•œ ๋’ค

    ๋ถ€๋ชจ์š”์†Œ์— text-align: center๋ฅผ ์ ์šฉํ•ด์„œ ๊ฐ€์šด๋ฐ ์ •๋ ฌ์„ ํ•ด์ฃผ์—ˆ๋‹ค.


    ๋‘๊ฐ€์ง€๋ฅผ ๋ชจ๋‘ ํ•ด๋ณด์•˜๋Š”๋ฐ ์ด ๋‘˜์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ผ๊นŒ?

     

    1๋ฒˆ ๋ฐฉ๋ฒ•์€ ๋‹จ 1px์˜ ์˜ค์ฐจ์—†์ด ์ •ํ™•ํžˆ ๋ฐฐ์น˜ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

    border-sizing: border-box๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒƒ๋„ ๊ทธ ์ด์œ ์ด๋‹ค.

    (๊ฐ€๋กœ๋ฐฐ์น˜ํ•  ๋•Œ ๋ณดํ†ต ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•)

     

    2๋ฒˆ ๋ฐฉ๋ฒ•์€ 1px 2px์ด ๋‹ค์†Œ ์ค‘์š”ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์— ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•œ๋‹ค.

    (๊ฐ€๋กœ๋ฐฐ์น˜ํ•˜๊ณ  ์ ๋‹นํžˆ ๊ฐ€์šด๋ฐ์— ์žˆ์œผ๋ฉด ๋ผ~)

    ๋Œ“๊ธ€