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

CSS_flexbox(1) ์ˆ˜ํ‰์ •๋ ฌ

by KASSID 2022. 1. 30.

๋ชฉ์ฐจ

    728x90

    flexbox

    ๋ถ€๋ชจ์š”์†Œ ๋‚ด์˜ ์ž์‹์š”์†Œ๋“ค์— ๋Œ€ํ•œ

    ๊ณต๊ฐ„ ๋ฐฐ๋ถ„, ์ •๋ ฌ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋ธ์ด๋‹ค!

     

    css์—์„œ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•  ๋•Œ float์„ ์ด์šฉํ•˜์˜€์ง€๋งŒ

    ์ตœ๊ทผ์—๋Š” flex๋ฅผ ์ ์  ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ์ถ”์„ธ์ด๋‹ค.

     

    ์‚ฌ์‹ค ํ˜ธํ™˜์„ฑ๋ฌธ์ œ๋กœ ์‚ฌ์šฉ ์ˆ˜๊ฐ€ ์ ์—ˆ๋Š”๋ฐ ๋งŽ์ด ํ•ด๊ฒฐ์ด ๋˜์—ˆ๋‹ค๊ณ  ํ•œ๋‹ค.

     

    ์ ์  ๋Š˜์–ด๋‚˜๋Š” ์‚ฌ์šฉ์ž ์ˆ˜!


    ์ˆ˜ํ‰์ •๋ ฌ

    ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•๋“ค๊ณผ์˜ ๋น„๊ต

     

    ๋จผ์ € ๊ธฐ์กด์— ๋‹ค๋ค˜๋˜ ๊ฒƒ๋“ค์„ ์‚ดํŽด๋ณด์ž!

     

    1. float

    <div class="container clearfix">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

     

    .container{
        width: 400px;
        border: 1px solid #000;
        /* overflow: hidden; */ /*์ด ์†์„ฑ์„ ์ด์šฉํ•ด๋„ ๋œ๋‹ค.*/
    }
    .item {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: gold;
        border-radius: 5px;
    
        float: left;
    }
    .clearfix::after{ /*๋‹ค์Œ์— ์˜ค๋Š” ์š”์†Œ๊ฐ€ ์—†์–ด๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๋„๋ก!*/
        clear:both;
        content: "";
        display: block;
    }

    ๊ธฐ์กด์— ๋‹ค๋ค˜๋˜ ๋‚ด์šฉ์ธ float๋ฅผ ์ด์šฉํ•˜์—ฌ

    ์ˆ˜ํ‰์ •๋ ฌ์„ ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ

     

    ์ด ๊ฒฝ์šฐ์—๋Š” ๋ถ€๋ชจ์š”์†Œ์— clearfix

    ์ฆ‰, clear ์†์„ฑ์„ ์ด์šฉํ•ด float์„ ํ•ด์ œ ์‹œ์ผœ์ฃผ๋ฉด์„œ

    ์ž์‹์š”์†Œ๋ฅผ ๊ฐ์‹ธ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

    (overflow: hidden๋„ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋‹ค!)

     


    2. inline-block

     

    inline-block ์š”์†Œ๋Š” ์ˆ˜ํ‰์ •๋ ฌ์ด ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ

    display๋ฅผ ์ด์šฉํ•ด block -> inline-block ์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋ฉด

    .container{
        width: 400px;
        border: 1px solid #000;
    }
    .item {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: gold;
        border-radius: 5px;
        display: inline-block;
    }

    ์œ„์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜จ๋‹ค.

     

    ์ˆ˜ํ‰์ •๋ ฌ์ด ๋˜๊ธด ํ•˜์ง€๋งŒ

    ๋ฏธ๋ฌ˜ํ•œ ๊ณต๋ฐฑ.. ์ด ๋…€์„์ด ๋ˆˆ์—ฃ๊ฐ€์‹œ์ด๋‹ค

     

    ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด 

    margin๊ฐ’์„ -(์Œ์ˆ˜)๋กœ ์ ์šฉ์„ ํ•˜๋Š” ๋“ฑ์˜

    ์„ธ๋ถ€์ ์ธ ์กฐ์ •์ด ํ•„์š”ํ•˜๋‹ค.

     


    3. flex

    .container{
        width: 400px;
        border: 1px solid #000;
        display: flex;
    }
    .item {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: gold;
        border-radius: 5px;
    }

    ์˜ค๋Š˜์˜ ์ฃผ์ธ๊ณต flex๋ฅผ ์ด์šฉํ•˜๋ฉด

    ๋ถ€๋ชจ์š”์†Œ์— ๋‹จ ํ•œ ์ค„๋งŒ์œผ๋กœ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค!

    ๋Œ“๊ธ€