CSS 기본 5 - 위치, 부동, CSS 그리기

58123 단어 css position float

위치

position은 요소가 문서에 배치되는 방식을 설정하는 CSS 속성입니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 배치된 요소의 최종 위치를 결정합니다.

정적: 요소가 정상 흐름(정상 위치)을 기준으로 배치됩니다. 이것이 기본값입니다. 정적으로 배치된 요소는 top, bottom, left 및 right 속성의 영향을 받지 않습니다.

상대적: 요소는 문서의 일반적인 흐름에 따라 배치된 다음 위쪽, 오른쪽, 아래쪽 및 왼쪽 값에서 자신을 기준으로 오프셋됩니다. offset(top, right, left, bottom)은 다른 요소의 위치에 영향을 주지 않습니다.

절대: 일반 문서 흐름에서 요소가 제거되고 페이지 레이아웃의 요소에 대한 공간이 생성되지 않습니다. 옷장 위치 조상(있는 경우)을 기준으로 위치가 지정됩니다. 그렇지 않으면 초기 포함 블록(일반적으로 본문)을 기준으로 배치됩니다

고정됨: 요소가 뷰포트를 기준으로 배치됩니다. 즉, 페이지가 스크롤되더라도 항상 같은 위치에 유지됩니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 요소를 배치하는 데 사용됩니다.

sticky: 사용자의 스크롤 위치에 따라 요소가 배치됩니다.

정적, 상대, 절대

<!DOCTYPE html>
<html lang="ko">

<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>relative</title>
    <style>
        .box1 {
            position: static;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
        }

        .기준 {
            position: relative;
        }

        .box2 {
            /*  */
            position: absolute;
            /* position: relative; */
            left: 40px;
            /* right: 40px; */
            top: 30px;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
            z-index: 2;
            /* z-index:0 원래 있어야 할 자리 */
            /* z-index:1 원래 있어야 할 자리보다 앞으로 */
            /* z-index:-1 원래 있어야 할 자리보다 뒤로 */
            /* z-index: 0; */
        }

        .box3 {
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: aqua;
            color: white;
            width: 100px;
            height: 100px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="box1">box1</div>
    <div class="기준">
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
    <!-- <div class="box2">box2
        <div class="box3">box3</div>
    </div> -->

    <!-- <div class="box3">box3</div> -->

    <!-- <div class="face">
        <div class="eye"></div>
        <div class="nose">
            <div class="mustache"></div>
        </div>
    </div> -->

</body>

</html>

결정된

<!DOCTYPE html>
<html lang="ko">

<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>position - fixed</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .nav {
            position: fixed;
            padding: 10px;
            background: #4267B2;
            color: white;
            font-weight: 700;
            font-size: 30px;
            line-height: 50px;
            width: 100%;
            height: 60px;
        }

        .container {
            margin-top: 0;
            padding-top: 120px;
            margin-left: 100px;
            margin-right: 100px;
        }
    </style>
</head>

<body>
    <div class="nav">facebook</div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo maxime quas porro reiciendis, molestias natus
            accusantium, blanditiis repudiandae obcaecati deleniti adipisci. Velit totam hic reiciendis temporibus,
            obcaecati necessitatibus. Autem, commodi?
            Minus ea animi excepturi, magni commodi obcaecati ipsum. Deleniti ipsum, maiores dolorum eaque nihil, hic
            dolorem perferendis ipsam reiciendis fuga laboriosam? Similique delectus consectetur eius doloremque
            temporibus quos minima eveniet.
            Recusandae in fugit ad provident quaerat illum aspernatur voluptatum repellat, praesentium ex aut! Quaerat
            molestias voluptatem ratione voluptates rem ex voluptas reiciendis nobis in id placeat aperiam, ut quasi
            repudiandae.
            Sint magni suscipit dicta voluptatum, soluta in exercitationem tempore minima modi, quos tenetur cumque
            aperiam ad facilis necessitatibus possimus, repellat dolores voluptates minus. Molestias fugit perspiciatis
            velit cumque porro sit!
            At, provident corporis cum reiciendis odit distinctio repudiandae tenetur consectetur eaque dolorem
            voluptate iusto sed beatae molestias, error non aperiam quibusdam ullam! Reiciendis doloremque sunt minima
            velit ullam voluptatem assumenda?
            Commodi nulla adipisci quasi magnam exercitationem quis nihil? Cumque nam dolorem repudiandae alias debitis
            sunt deleniti possimus deserunt non? Alias officia atque unde quae aspernatur rerum fuga sunt tenetur
            consequuntur?
            <br><br>
            Natus, ad. Quaerat eaque in dolorem? Obcaecati ab iusto non reprehenderit? Consequatur obcaecati facere
            assumenda, sequi distinctio possimus fuga exercitationem nam. Ipsam, vitae. Quos aspernatur quis cumque hic
            earum ipsa.
            Sed id ea magnam aut consequuntur natus odio corrupti voluptatem hic? Repellat minima accusamus at
            laudantium provident animi illo officiis? Tenetur et eos, excepturi minima nobis quia assumenda voluptatem
            aut?
            Porro ad eos maiores, doloribus, laborum debitis dolores mollitia id inventore laudantium explicabo, dolore
            tenetur sint. Omnis distinctio hic, sint ullam alias, similique sit dolor libero saepe molestias at quod!
            Dolorem necessitatibus ab ipsa, culpa explicabo vero perspiciatis id illum. Doloribus minima unde
            accusantium saepe in architecto recusandae iusto, cum praesentium labore hic temporibus voluptatibus eius,
            vel dolores facilis nostrum!
            A, ullam obcaecati! Ut assumenda ratione temporibus quasi autem hic amet eaque eos incidunt neque eveniet,
            ipsam ad perferendis provident. Nam, iste dolores. Amet corporis iusto quos quasi voluptates! Porro!
            Laboriosam sed earum officiis? Repudiandae, iste veniam omnis provident odio doloribus minus? Porro
            distinctio nemo provident vero fuga voluptate, corporis quisquam alias tenetur, praesentium numquam vitae
            fugiat laudantium soluta? Consequuntur!
            Id, labore consectetur culpa excepturi commodi vero sapiente porro quidem nesciunt, fuga quas quos veritatis
            sed impedit eveniet odit deserunt dolore enim fugit exercitationem error. Aperiam nam enim dignissimos ab?
            <br><br>
            Eius hic alias quis facilis dolore debitis adipisci? Sint tempora officiis distinctio esse eaque quis
            blanditiis quos necessitatibus, mollitia, minima aut beatae quidem. Quis quidem veniam, qui aut soluta
            culpa?
            Alias non distinctio dicta nulla provident molestiae molestias dolorem placeat deleniti explicabo quaerat,
            dolor rem voluptas praesentium laborum? Repellat et nobis, reprehenderit vitae ipsum officia natus accusamus
            dolorem iure est.
            Facilis suscipit mollitia minima ipsum excepturi, nisi eum cumque aperiam veniam harum corporis, quasi ipsa
            ad nemo dolores nam architecto! Veniam dolores velit iste, praesentium dolor aut suscipit optio vero!
            Accusantium maiores quia minus distinctio dicta dolorem assumenda, nostrum exercitationem reiciendis sit
            fugit nulla hic explicabo velit nam vel cupiditate voluptate sint maxime porro soluta obcaecati praesentium
            quasi? Esse, magni?
            Similique vero possimus explicabo, hic unde perspiciatis corporis, voluptatum odio error ratione assumenda
            impedit! Nobis nam totam ipsam, soluta explicabo iusto! Animi incidunt sit cumque corrupti voluptatum itaque
            aspernatur ipsum?
            Voluptates amet similique nulla sint illum nesciunt aspernatur voluptatibus sunt! Esse facere officiis
            temporibus! Delectus non in excepturi illum sapiente voluptatum explicabo! Fugit corrupti similique
            aspernatur perferendis. At, eligendi recusandae?
            Quas a cumque esse, at, numquam vitae officiis voluptatem natus distinctio labore eveniet quibusdam ducimus
            sed odio cupiditate facilis ab provident incidunt? Voluptatem sit enim dolorem a rerum. Ipsam, vitae.
            Totam laboriosam corporis, nisi illo voluptatum nam, aut dolore fuga debitis quia earum inventore similique
            dolores esse voluptate deleniti recusandae. Iste veniam in explicabo atque error vitae unde voluptatum?
            Asperiores?
            <br><br>
            Veniam ea qui possimus. Quisquam, dolore dolorem consequuntur nulla, porro, debitis neque qui minus vero
            aliquid impedit voluptate modi autem est beatae commodi distinctio nostrum at voluptas reprehenderit.
            Sapiente, quibusdam.
            Blanditiis consequuntur iste sunt, ex quis labore quaerat ratione ullam aspernatur maiores vero nesciunt
            quae, nemo perferendis repellat facilis magnam dolor rem odio beatae. Expedita praesentium vel sit nisi
            alias.
            Vitae quod voluptatum porro non temporibus dignissimos magni illo quasi quidem, ab consequatur blanditiis
            totam asperiores eum, quam officiis. Maiores temporibus fugiat voluptatibus aliquam? Delectus, praesentium
            reiciendis! Magni, fugiat nisi!
            Molestiae, totam vero excepturi ullam voluptatem corporis obcaecati vitae amet porro labore necessitatibus
            praesentium asperiores repudiandae, blanditiis, sunt assumenda eligendi! Consequatur delectus ad officia
            ducimus hic esse ipsum quisquam dolores!
            Excepturi voluptas, non modi vel soluta asperiores nisi fuga dicta molestias ducimus accusantium quos porro,
            repudiandae neque nesciunt. Exercitationem, quos accusamus? Fugit vel error iusto ab deleniti harum totam
            quia.
            Omnis culpa molestiae tempore deleniti quos tenetur. Delectus tempore consequatur mollitia, omnis autem
            iusto? Commodi corporis reprehenderit officia saepe sequi, eveniet eos odio, doloribus quisquam dolores illo
            rerum dolorem error.
            Odio est iste esse vero quis molestiae alias voluptates libero, excepturi fugit, autem, commodi quasi et. At
            ab laboriosam, omnis et quod dolorum officia quam adipisci! Eaque iste reprehenderit accusamus.
            Laborum tempora ipsum unde exercitationem a consequuntur quaerat velit explicabo. Ipsa ut deserunt hic
            consequatur autem voluptatum, numquam id! Velit modi asperiores nihil molestias obcaecati neque in harum
            quae tempora.
            Molestias accusantium eum itaque laborum eius tempora excepturi est magni quia iusto velit ratione incidunt
            optio illum quos tenetur deleniti, quae minus ab, sunt earum eos quas quasi. Quasi, tempora.
            Sapiente sit quaerat ducimus enim nulla earum, voluptates aut harum. Minus ad totam a eligendi voluptas non
            illo eaque quo, maiores nostrum, sapiente necessitatibus enim odio praesentium voluptatem cum accusamus?
            Consequuntur esse, quam et modi accusantium dolore facere hic at aliquam saepe pariatur nulla animi
            aspernatur non veniam impedit laboriosam ducimus architecto, quos velit neque, nemo fugiat nihil! Magnam,
            atque!
            Corporis illo laudantium dolore aspernatur natus hic delectus alias magnam maiores omnis. Dolore soluta illo
            qui, numquam ea quod recusandae quia laudantium necessitatibus nesciunt inventore voluptatibus perspiciatis
            quasi ipsam quam.
            Aut tempore quidem minima sit maiores reprehenderit adipisci ut perferendis temporibus nihil, facilis, est
            possimus dolorum. Mollitia tempore vitae debitis nobis, odit nulla nostrum perferendis minus dolores
            corrupti, sapiente quae.
            Mollitia, veniam unde! Ullam, sequi repellat totam facere veniam, at quia, praesentium magnam voluptas ab
            quidem? Tempore nisi quos voluptatibus repudiandae harum sunt, minus illum. Nisi corrupti sint illum
            obcaecati?
            Impedit, neque enim. In quia dolores quisquam pariatur dicta quo reiciendis laboriosam commodi perferendis
            facilis, totam hic quos eligendi voluptatibus? Eius quisquam odit dolorem nam eum similique in hic
            repudiandae!
            Rem sint velit distinctio delectus maxime amet corrupti possimus illo eligendi, dolore nulla rerum soluta
            magni quod quis ipsum. Atque iste nulla itaque beatae quaerat hic molestiae ex! Excepturi, doloribus!
            <br><br>
            Unde suscipit, explicabo, similique praesentium numquam, laudantium ad eos libero ipsam enim labore hic! A
            eveniet impedit corporis? Sunt consectetur quasi repellendus pariatur consequuntur laboriosam sequi
            accusamus, asperiores aspernatur veritatis?
            Laboriosam quod, cum praesentium consequatur eius odit placeat ullam harum at qui rem velit aspernatur
            aliquid. Eaque, ea nulla soluta harum minus animi aut, necessitatibus nostrum, non voluptatibus similique
            dolor?
            Harum fuga, voluptatum, unde cum veniam soluta eligendi commodi nostrum corrupti libero neque odit dolorum
            doloremque illo omnis nisi. Consectetur nesciunt quod quo tempore deserunt explicabo nemo neque similique.
            Dolorum.
            Eum doloribus laborum iusto ducimus nam, optio illum autem animi pariatur repellendus, suscipit vitae ad
            nisi rerum dolorum quis iste commodi, sed possimus. Iste fugiat debitis numquam maxime molestias. Molestias!
            Delectus voluptate iste vel ipsa expedita dolorem dolore soluta aperiam, rem quaerat beatae modi, totam
            officia, laudantium earum repellendus! Rem officia perspiciatis totam. Nam, provident hic aspernatur dolorum
            doloremque autem.
            Ipsam reiciendis expedita doloribus similique necessitatibus beatae inventore, provident modi, nisi quis
            commodi sequi odio ut nobis obcaecati incidunt? Eligendi ullam maiores aut facere esse nemo aliquam quae
            nisi. Nobis?
            <br><br>
            Illo, consequatur. Corporis fugit facilis nostrum dignissimos quae nulla dolore cupiditate, dolores eius
            quibusdam similique odit? Quae cum, eveniet quasi velit obcaecati nisi libero ad! Quibusdam commodi nobis
            consequatur tempore!
            Aut optio quos dolor error, deserunt vitae quia illo quisquam at autem labore impedit placeat mollitia
            neque. Excepturi, deleniti tenetur ad ab tempora sit numquam, vero similique minus facilis nemo.
            Adipisci, alias perferendis! Tempore enim vitae eveniet accusantium ipsam error consequatur itaque
            architecto ab at ea nemo, dicta, ullam atque praesentium voluptatibus eaque, nihil quia. Officiis ad dolor
            molestias itaque.
            Veritatis alias numquam pariatur quaerat odit, tenetur, accusamus, eaque reprehenderit in expedita harum?
            Eos ea repellat impedit ipsa in delectus dolore nihil ducimus eveniet reiciendis possimus molestiae,
            blanditiis, asperiores officia.
            Voluptatibus dolorem placeat laboriosam quod fugit repellendus, dolores veniam magni distinctio consectetur
            delectus animi vel officia soluta ad voluptas molestias commodi cupiditate atque nemo quasi? Deserunt
            incidunt recusandae numquam rerum?
            Autem, consequuntur officiis? Vitae, quo quia et similique quos facere saepe dicta aut fugiat fuga dolore
            rem iure molestiae nihil esse voluptatem eius neque voluptate deserunt laboriosam nesciunt. Laudantium,
            alias!
            In blanditiis facere unde neque odio aspernatur sequi minus ullam placeat dolorem omnis voluptas recusandae
            eius soluta, dolore sint perspiciatis laudantium reprehenderit excepturi porro? Minima qui harum esse
            temporibus nihil?
            Laboriosam, rem! Natus ab nihil aliquid dolorum amet veritatis unde, molestiae veniam reprehenderit eius
            voluptatibus facilis earum obcaecati ex dolores quis nisi quibusdam quia nostrum asperiores totam adipisci,
            laudantium ipsa.
            Quae, quos nemo vel suscipit ullam obcaecati, quas earum alias ab deleniti nam sapiente nulla unde sit omnis
            aliquid nobis provident necessitatibus voluptates placeat soluta magni minus, iste ex. Reiciendis?
            Inventore eveniet nostrum amet dolor iure repellendus qui autem alias, illum deleniti cum. Quia non placeat
            qui possimus incidunt atque, mollitia repellendus optio distinctio harum, dolorem minima, deserunt saepe
            iste!
            Consequatur cumque aliquid earum autem ex eaque vel dolore reprehenderit mollitia, sit incidunt fugiat odio,
            ullam dolorum quaerat maiores dolor? Quibusdam voluptatibus ad mollitia numquam fugit vero autem, laboriosam
            placeat?
            Ut optio dicta est non. Ea perspiciatis eius itaque quod ullam repellat doloremque sint autem corporis
            harum! Voluptates dolores nisi numquam odit optio maxime, veniam blanditiis neque, beatae ea totam.
            Voluptates, provident obcaecati! Quo corrupti aperiam adipisci obcaecati eum nesciunt ducimus dicta, alias
            similique laudantium architecto eos, amet, at neque. Harum, mollitia! Quas recusandae iure praesentium
            voluptate, voluptates voluptatum repellat.
            Accusantium ratione, harum dolor voluptate ipsum officia iusto, eveniet hic in saepe provident quia ab.
            Tempore quos praesentium ab quia nemo laboriosam, fugit optio! Ab ducimus iste expedita voluptatem
            praesentium.
            Quo molestiae voluptate hic? Culpa quod similique recusandae quis laborum maiores, veniam asperiores
            reprehenderit est, sit vitae alias ipsum minima dolorum facere dicta mollitia adipisci error vero quasi
            officia blanditiis.
            Facilis iusto commodi, nostrum in temporibus eum omnis! Ullam voluptatem natus exercitationem voluptatibus
            veritatis praesentium inventore amet expedita corrupti, possimus quia doloremque fugit porro modi ducimus,
            nostrum voluptas voluptates quos.
            Nemo, nulla! Fuga voluptate necessitatibus molestias accusantium repellendus harum animi obcaecati nemo,
            expedita explicabo nesciunt quaerat dicta reiciendis illum totam, quos sit placeat quo saepe officiis
            doloribus eaque? Ad, sapiente.
            Reprehenderit officia saepe explicabo eaque magnam beatae fugiat consectetur delectus? Sunt voluptate
            officia magni enim aperiam sequi magnam eos autem fugiat omnis consectetur, distinctio itaque quo veniam
            architecto at et.
            Mollitia cupiditate suscipit facere dignissimos eum doloremque, quisquam molestias sit dolores, adipisci
            odio quibusdam deserunt neque, natus nostrum! Repellendus cumque consequatur consequuntur atque tenetur
            repudiandae optio laudantium! Earum, voluptatibus magnam.
        </p>
    </div>
</body>

</html>

어려운

<!DOCTYPE html>
<html lang="ko">

<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>position - sticky</title>
    <style>
        body {
            height: 500px;
            background: lightblue;
        }

        .other {
            height: 1000px;
            background: yellow;
        }

        .other2 {
            height: 1000px;
            background: black;
        }

        .stiky {
            position: sticky;
            width: 50px;
            height: 50px;
            background: pink;
            top: 10px;
        }
    </style>
</head>

<body>
    <div class="other">
        <div class="stiky"></div>
    </div>
    <div class="other2"></div>

</body>

</html>

Z-색인

z-index는 배치된 요소와 그 자손 또는 플렉스 항목의 z-순서를 설정합니다. 더 큰 z-인덱스가 있는 겹치는 요소는 더 작은 인덱스를 가진 요소를 덮습니다.

z-색인:0

있어야 할 곳

z-색인:1(양수)

있어야 할 곳에서 한 층 위로

z-색인:-1(음수)

그것이 있어야 할 곳에서 한 층 뒤에
(우선 순위를 낮추는 음수 값)

변환

<!DOCTYPE html>
<html lang="ko">

<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>transform</title>
    <style>
        .one {
            border: darkgoldenrod solid 5px;
            border-radius: 30px;
            background: chocolate;
            height: 100px;
            width: 200px;
            /* If you are drawing something, it's better to use box-sizing: border-box; */
            box-sizing: border-box;
            text-align: center;
            line-height: 80px;
            color: white;
            font-size: 28px;
            transition: all 1s;
        }

        .one:hover {
            background: teal;
            transform: rotate(90deg) scale(2);
        }

        .two {
            border: solid 5px darkgoldenrod;
            border-radius: 30px;
            background: chocolate;
            height: 100px;
            width: 200px;
            box-sizing: border-box;
            text-align: center;
            line-height: 80px;
            color: white;
            font-size: 28px;
            transition: all 1s;
        }

        .two:hover {
            background: teal;
            /* transform: skew(30de,20deg) scale(2); */
            transform: translate(100px, 200px);
        }
    </style>
</head>

<body>
    <div class="one">Click!</div>
    <br>
    <div class="two">Click!</div>
    <br>
    <div class="three">Click!</div>
</body>

</html>

CSS로 캐릭터 그리기 - 나만의 캐릭터 그리기

위치에 대해 배운 것을 사용하여 우리 자신의 캐릭터를 그리는 도전이 있었습니다. 이것이 내가 한 일입니다!

My code

뜨다

Float는 CSS 속성으로 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 컨테이너를 둘러쌀 수 있도록 합니다. 요소는 페이지의 일반 흐름에서 제거되지만 여전히 흐름의 일부로 남아 있습니다.

플로트:왼쪽
요소는 포함 블록의 왼쪽에 떠 있어야 합니다.

플로트:오른쪽
요소는 포함 블록의 오른쪽에 떠 있어야 합니다.

<!DOCTYPE html>
<html lang="ko">

<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>float</title>
    <style>
        img {
            width: 200px;
            float: right;
            /* float: left; */
        }
    </style>
</head>

<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/235B2F485958F12129" alt="">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur
    recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores? Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Ab aliquid officiis, at fugiat ratione expedita vel tenetur facere
    suscipit
    aut earum magnam in? Nihil perspiciatis laudantium minus officiis voluptatum cumque.
    Veritatis ea, fugit tenetur ex fugiat magnam odio dicta! Ex quo commodi qui nesciunt harum voluptas iusto officiis
    tempora porro ipsam nemo quas, atque pariatur minus ab praesentium nihil! Praesentium!
    Laboriosam at itaque adipisci, consequuntur quaerat quisquam dicta eum similique quia ex. Amet minus expedita dolor
    officiis ipsam exercitationem non, repellendus quaerat perspiciatis doloribus beatae iusto rem minima aut ut.
</body>

</html>

플로트 문제

자식 요소가 모두 float 속성을 가질 때 부모 요소는 자식의 높이를 적용하지 않고 부모가 가진 높이만 취합니다. 자식 요소를 외부에 두도록 만듭니다.

위와 같은 문제의 예

<!doctype html>
<html>
<head>
<style>
    .wrap{
    border: 4px solid blue;
    }
    .content{
    float: left;
    margin: 5px;
        height: 20px;
        border: 2px solid green;
    }
</style>
</head>
<body>
        <div class="wrap">
            <div class="content">내용1</div>
        <div class="content">내용2</div>
        </div>
</body>
</html>

플로트 문제 해결

문제를 해결하는 몇 가지 방법이 있습니다.
1. 상위 요소에 오버플로를 제공합니다.
오버플로는 요소의 내용이 너무 커서 들어갈 수 없을 때 사용됩니다.
오버플로를 사용하면 자식 요소가 부모 요소에 들어갈 수 있도록 부모 요소의 높이를 확장합니다.

.wrap {
    border: 4px solid blue;
    overflow: hidden; 
}

2. 부모 요소의 높이를 지정합니다.

.wrap {
    border: 4px solid blue;
    height: 35px;
}

이것은 작동하지만 자식 요소의 높이가 변경되거나 다른 자식 요소가 추가될 때 부모 요소의 높이를 변경해야 하지만 항상 높이를 변경해야 하는 경우 실용적이지 않기 때문에 부모 요소를 지정하는 것은 좋은 방법이 아닙니다. 변경될 때.
3.'클리어'를 사용하세요.
float 속성을 가진 요소 바로 옆에 있는 형제 요소에 clear 속성을 부여합니다.

<div class="first"></div>
<div class="second"></div>

div{
  width:100px;
  height:100px;
  background-color:black;
}
.first{
  float:left;
}
.second{
  clear:both; /* both 속성은 left, right 둘 다 클리어 합니다. */
  background-color:pink;
}

4.* 명확한 수정 *
::after(의사 요소)로 해결
상위 요소에 의사 요소를 마지막 하위로 추가합니다. 따라서 부모 요소가 자식 요소를 인식하도록 만드십시오.
이를 명확한 수정이라고 합니다.

<!DOCTYPE html>
<html lang="ko">

<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>float</title>
    <style>
        /* float 해제하는 여러가지 방법들 */

        /* ul {
            overflow: hidden;
            display: inline-block;
        } */


        /*
        clear-fix
        부모요소에 after 사용. => 가장 마지막 자식요소로 가상요소를 만듦
        (before는 가상의 자식요소를 만드는데, 가장 첫 번째 자식요소로 가상요소를 만듦)
        현업에서는 clear-fix 라는 클래스를 만들고 (유틸리티 클래스)
        부모 요소에 클래스로 집어넣어서 적용 많이 한다고 함.. 
        */
        ul::after {
            display: block;
            content: '';
            clear: both;
        }

        li {
            float: left;
            width: 300px;
            height: 100px;
            background: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>

</html>

플로트 실습 - 네이버 로그인 UI 복제

위의 UI에 대한 내 코드

<!DOCTYPE html>
<html lang="ko">

<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>Naver Login (네이버로그인) UI</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        section {
            width: 350px;
            height: 135px;
            background: #f6f9fa;
            border: 1px solid #c7d6db;
            margin: 0 auto;
            margin-top: 50px;
        }

        article {
            padding: 15px;
        }

        p {
            font-size: 12px;
            margin-top: 0;
            color: #4f4e4e;
        }

        button {
            background: #17ce5f;
            border: none;
            color: white;
            width: 100%;
            height: 50px;
            border: 1px solid #10bc52;
            border-radius: 2px;
            margin: 12px 0;
        }

        .logo {
            width: 68px;
            line-height: 18px;
            vertical-align: middle;
            margin-right: 2.4px;
        }

        .login-text {
            font-size: 14px;
            font-weight: 700;
            line-height: 18px;
            vertical-align: -2.4px;
        }

        ul {
            padding: 0;
            margin: 5px 0 0 0;
        }

        li {
            list-style: none;
        }

        .find {
            float: left;
        }

        .find li {
            display: inline-block;
        }

        .join {
            float: right;
        }

        .small {
            width: 10px;
        }

        a {
            text-decoration: none;
            font-size: 13px;
            color: #4f4e4e;
        }

        span[class=circle] {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: #cdd2d6;
            display: inline-block;
            vertical-align: middle;
            margin: 0 2px;
        }
    </style>

<body>
    <!-- 네이버 로그인 부분 UI 만들기 -->
    <section>
        <article>
            <p>네이버를 더 안전하고 편리하게 이용하세요</p>
            <button>
                <img class="logo" src="icon/title.png" alt="">
                <span class="login-text">로그인</span>
            </button>
            <ul class="find">
                <li>
                    <img class="small" src="icon/lock.png" alt="">
                    <a href>아이디</a>
                </li>
                <li><span class="circle"></span></li>
                <li class="password"><a href>비밀번호찾기</a></li>
            </ul>
            <ul class="join">
                <li>
                    <img class="small" src="icon/user.png" alt="">
                    <a href>회원가입</a>
                </li>
            </ul>
        </article>
    </section>
</body>

</html>

Reference

이 문제에 관하여(CSS 기본 5 - 위치, 부동, CSS 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/daaahailey/css-basic-5-position-float-css-drawing-41bj

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

QUADTREE(쿼드트리 뒤집기)

초보자는 프레젠테이션 환경에서 MQL5에서 SMA를 이용한 자동 매매를 시도했다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다