학원 59일차 - CSS

仁·2021년 7월 11일

2021.06.18

ex48_transform.html

<!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>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        /* 
            transform, 변형
            - 요소의 위치, 크기, 회전, 비틀기(왜곡) 변형을 적용
            - transform: 값;

            값(함수)
            1. translate(x좌표, y좌표) : 위치 변형(position-relative 유사)
            2. scale(가로축배율, 세로축배율) : 배율(크기) 변형 -> 객체의 크기가 커진 것이 아니라 확대한 것.
            3. rotate( deg) : 회전 변형
            ------------------------------
            4. skew(x각도, 각도) : 왜곡 변형
            5. matrix() : X

        */

        .box {
            margin: 10px 0px;
        }

        #box1 {
            transform: translate(100px, 100px);
        }

        #cat {
            margin-bottom: 80px;
        }

        /* margin 정책(마진 상쇄현상) : 인접한 요소의 margin이 겹치면 큰 값만 적용된다. */
        /* 
        #box1 { margin-bottom: 10px; }
        #box2 { margin-top: 20px; }
        */


        /*
            레이아웃 작업: position 사용
            사용자 인터페이스: transforn-translate 사용 
        */
        /* #cat > img:hover {
            transform: translate(0px, -15px);
        } */


        /* #cat:hover > img {
            transform: translate(0px, -15px);
        } */


        /* 마우스를 올린 사진의 형제 */
        /* #cat > img:hover + img {
            transform: translate(0px, -15px);
        } */


        /* #cat > img:hover ~ img {
            transform: translate(0px, -15px);
        } */

        /* 짝수번째 사진 */
        /* #cat:hover > img:nth-child(even) {
            transform: translate(0px, -15px);
        } */

        /* 홀수번째 사진 */
        /* #cat:hover > img:nth-child(odd) {
            transform: translate(0px, -15px);
        } */

        /* ------------------------------------------- */

        /* 1:1 배율 -> 정사이즈 */
        /* #box2 {
            transform: scale(1, 1);
        } */

        /* #box2 {
            transform: scale(1.5, 1.5) translate(300px, 0px);
        } */

        /* #box3 {
            width: 300px;
            height: 300px;
        } */

        /* #box2 {
            transform: scale(-1, 1);
        } */

        /* 역상 - 종이가 뒤집힌다고 생각. */
        /* #box2 {
            transform: scale(-1, -1);
        } */


        #box2 {
            transition: transform 1s;
        }

        #box2:hover {
            transform: scale(-1, 1);
        }

        #cat > img:hover  {
            transform: scale(1.3, 1.3);
            opacity: 0.3;
        }    


        /* ------------------------------------------- */


        /* #box3 {
            transform: rotate(30deg);
        } */

        #box3 {
            transform: rotate(-30deg);
        }

        /* #cat > img:hover  {
            transform: rotate(30deg);
        } */


        /* ------------------------------------------- */


        /* 서로 반대방향을 잡고 30도가 될 때까지 밀어낸 모양 */
        #box1 {
            transform: skew(30deg, 0deg);
        }

    </style>
</head>

<body>
    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box box-border5 box-medium bgcolor-red">상자1</div>
    <div id="box2" class="box box-border5 box-medium bgcolor-yellow">상자2</div>
    <div id="box3" class="box box-border5 box-medium bgcolor-blue">상자3</div>


    <h1>고양이</h1>
    <!-- div#cat>img[src='images/catty$$.png']*5 -->
    <div id="cat">
        <img src="images/catty01.png" alt="">
        <img src="images/catty02.png" alt="">
        <img src="images/catty03.png" alt="">
        <img src="images/catty04.png" alt="">
        <img src="images/catty05.png" alt="">
    </div>


        <!-- 텍스트 박스도 기울기를 정할 수 있음 -->
    <div>
        <input type="text" style="color: rebeccapurple; transform: rotate(45deg);">
    </div>

    <div>
        <input type="text" style="color: rebeccapurple; transform: scale(-1, 1);">
    </div>

    <br><br><br><br><br><br><br><br><br><br>
    
</body>
</html>

ex49_transform.html

<!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>Document</title>
    <style>
        /* 너비: 1000 + 가운데 정렬 */

        /* 
            인접한 인라인 태그 사이의 공백을 없애는 방법
            1. 직접 공백을 지운다. > 비권장
            2. float > 추가 비용 발생
            3. font-size(한글자 크기)를 0px으로 준다.
        */

        
        /* 가로 메뉴 */
        #menu {
            width: 630px; /* 아이콘 크기게 맞게 줄인다. */
            margin: 0 auto;
            font-size: 0;
            /* border: 1px solid black; */
            /* text-align: center; 인라인 태그에 영향을 준다, 내용물만 가운데로 */
            transform: translate(0px, -100px);
        }

        /* #menu:hover {
            transform: translate(0px, -10px);
        } */

        #menu > img:hover {
            transform: translate(0px, 90px);
        }

        /* 
        
        #menu > img {
            float: left;
        }
        
        #menu::after {     -> float 영향 없애는 법
            content: "";
            display: block;
            clear: both;
        } 
        
        */

        
        /* 세로 서브메뉴 */
        #submenu {
            /* border: 1px solid black; */
            width: 126px;
            font-size: 0;
            transform: translate(-110px, 0px);
        }

        #submenu > img:hover{
            transform: translate(100px, 0px);
        }
        
        
        #section {
            width: 1000px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <nav id="menu">
        <!-- img[src=imges/rect_icon$$.png]*5 -->
        <img src="images/rect_icon01.png" alt="">
        <img src="images/rect_icon02.png" alt="">
        <img src="images/rect_icon03.png" alt="">
        <img src="images/rect_icon04.png" alt="">
        <img src="images/rect_icon05.png" alt="">
        <!-- <div style="clear: both;"></div> -->
    </nav>

    <nav id="submenu">
        <!-- img[src=imges/rect_icon$$.png]*5 -->
        <img src="images/rect_icon01.png" alt="">
        <img src="images/rect_icon02.png" alt="">
        <img src="images/rect_icon03.png" alt="">
        <img src="images/rect_icon04.png" alt="">
        <img src="images/rect_icon05.png" alt="">
        <!-- <div style="clear: both;"></div> -->
    </nav>

    <section>

        <h1>Transform Menu</h1>

        <!-- ((h2>lorem5)+(p>lorem)*3)*5 -->
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sed iusto ullam repellendus. Doloremque aperiam sint temporibus minima maiores, iste molestias natus, saepe similique soluta nemo architecto id ratione totam?</p>
        <p>Neque repellat quos consectetur corporis accusantium ducimus. Fuga, ea ullam? Dolor itaque doloremque dolore quam, voluptate officia ipsum eveniet autem officiis atque asperiores impedit nulla quod aliquid labore qui commodi!</p>
        <p>Architecto ex dicta amet ut vitae, fugiat delectus similique placeat maxime impedit? Excepturi perspiciatis, ratione inventore nihil tempora qui quidem, aperiam minus debitis vitae quos sed repellat, quam et consequatur?</p>

        <h2>Asperiores et debitis quis doloribus.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quas soluta possimus, asperiores, dolores quasi saepe cupiditate illo obcaecati animi, repellat odit recusandae cumque dolore! Facere consequatur quo neque quaerat!</p>
        <p>Similique fuga itaque nesciunt ab dolores libero rem. Doloremque quas voluptatibus culpa nisi quos maiores fugiat, tenetur nostrum soluta. Recusandae quia eos suscipit modi officia tempore tempora facilis illo maxime!</p>
        <p>Totam repellat distinctio rem. Nemo laboriosam molestiae corrupti facilis. Tempora fugit temporibus ad fuga dolore! Minima repellendus, magni voluptatem odit a iure inventore, illo reprehenderit perspiciatis, ipsum vero recusandae dolor!</p>

        <h2>Nesciunt accusantium rem unde assumenda.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dolore pariatur deserunt exercitationem ipsam neque quas voluptatem perferendis rerum fuga, debitis saepe, eos recusandae at. At a nulla excepturi eos.</p>
        <p>Repudiandae reprehenderit suscipit esse perspiciatis, perferendis magnam dolore saepe alias expedita in placeat velit autem cupiditate nisi magni fuga laborum, corporis ab odio sunt sit excepturi id. Voluptatibus, ipsam voluptatum?</p>
        <p>Beatae quos dolor ex velit, odio distinctio illo autem veniam dicta porro maiores? Quos eligendi tenetur dolor odit, natus nihil nostrum aliquid ipsa quam excepturi mollitia amet illum voluptas eveniet.</p>
        
        <h2>Quae repellat doloribus veritatis a.</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo corrupti, neque, debitis ea officiis placeat necessitatibus, in cum suscipit veritatis reprehenderit dicta voluptates sit et. Doloremque cumque reprehenderit atque eum.</p>
        <p>Aut quaerat quas eum cumque neque vitae repellat vel quisquam iure, ab fugit. Praesentium vitae minus porro, corporis ipsum magnam sed sint aperiam deserunt quas, quo ex laudantium reiciendis unde!</p>
        <p>Magni nobis eos, cupiditate similique accusantium reiciendis ipsum, maxime officia beatae sit ipsa nisi in. Quis eos sit esse, nulla, expedita dolor ipsa maiores modi placeat amet fugiat iusto porro.</p>

        <h2>Dolore, aut totam! Neque, sed.</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A magnam ratione reprehenderit dolores quae aliquam incidunt error architecto, quia soluta harum omnis eligendi repellat earum voluptatibus itaque totam similique ducimus?</p>
        <p>Pariatur quasi asperiores nostrum omnis corrupti amet incidunt. Explicabo, sequi nam provident quam molestias, vitae repellendus doloribus in pariatur suscipit hic quae quis, commodi eos ex mollitia quisquam animi. Libero?</p>
        <p>Similique rerum nihil modi architecto saepe repudiandae assumenda pariatur dolorem, ea quod omnis maxime inventore? Ratione, cumque. Fugiat, necessitatibus esse obcaecati, voluptatibus ex autem labore quaerat, reprehenderit ut non ducimus.</p>
    </section>
</body>
</html>

ex50_transform.html

<!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>Document</title>
    <style>
        #box {
            border: 10px solid steelblue;
            font-size: 0;
            width: 250px;
            height: 188px;
            overflow: hidden;
        }

        #innerbox {
            /* border: 10px solid red; */
            width: 1250px;

        }

        #box:hover > #innerbox {
            transform: translate(-250px, 0px);
        }
        
    </style>
</head>
<body>
    <div id="box">
        <div id="innerbox">
            <!-- img[src=images/cat$$.jpg]*5 -->
            <img src="images/cat01.jpg" alt="">
            <img src="images/cat02.jpg" alt="">
            <img src="images/cat03.jpg" alt="">
            <img src="images/cat04.jpg" alt="">
            <img src="images/cat05.jpg" alt="">
        </div>
    </div>
</body>
</html>

ex51_transition.html

<!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>Document</title>
    <link rel="stylesheet" href="css/example.css">
    <style>
        /* 
            transition, 전환
            - 객체의 속성(상태값)이 변화되는 과정을 시간 순으로 보여주는 기술
            - 수치형 속성 값에 한해서.. (열거형은 불가능)
        */
        #box {
            /* 애니메이션이 걸릴 대상 */
            /* transition-property: width, height, font-size; */

            /* all : 모든 속성 */
            transition-property: all;

            /* 변화를 일으키는데 걸리는 시간 */
            transition-duration: 1s;
        }

        #box:hover {
            /* width: 500px; */
            /* height: 500px; */
            /* font-size: 5em; */
            /* opacity: .1; */
            /* font-family: 궁서체; -> 수치가 아니라서 서서히 바뀌지 않음. */
            /* background-color: royalblue; */
            /* border-width: 30px; */
            /* padding: 50px; */
            /* border-radius: 50%; */
            /* margin-left: 200px; */
            /* box-shadow: 10px 10px 10px slateblue; */

            /* transform: translate(100px, 0px); */
            /* transform: scale(-1, 1); */
            /* transform: rotate(30deg); */
        }

        #cat > img {
            transition-property: all;
            transition-duration: 0.2s;
            opacity: .3;
        }

        #cat > img:hover {
            transform: translate(0px, -25px);
            opacity: 1;
        }


        /* 문제 - 덜덜 떨림, 안정적이지 않음 */
        /* #cat6 {

        }   

        #cat6:hover {
            transform: translate(500px, 0px);
        } */


        /* 자바스크립트를 쓰지않고 해결하는 방법 */

        /* 방법 1. 형제를 이용한다. */
        /* #cat5 + #cat6 {
            transition: all 1s;
        }   

        #cat5:hover + #cat6 {
            transform: translate(500px, 0px);
        }  */

        /* 방법 2. 부모태그를 이용한다. */
        #cage {
            /* border: 10px solid black; */
            width: 620px;
        }

        #cat7 {
            transition: all 1s;
        }
        
        #cage:hover > #cat7 {
            transform: translate(500px, 0px);
        }

    </style>
</head>
<body>
    <div id="box" class="box box-small box-border1 bgcolor-orange">상자</div>

    <h1>고양이</h1>
    <div id="cat">
        <img src="images/catty01.png" alt="">
        <img src="images/catty02.png" alt="">
        <img src="images/catty03.png" alt="">
        <img src="images/catty04.png" alt="">
        <img src="images/catty05.png" alt="">
    </div>

    <hr>
    <img src="images/catty05.png" alt="" id="cat5">
    <img src="images/catty06.png" alt="" id="cat6">

    <hr>

    <div id="cage">
        <img src="images/catty07.png" alt="" id="cat7">
    </div>

</body>
</html>

ex52_transition.html

<!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>Document</title>
    <style>

        body {
            margin: 0;
        }
        #menu {
            /* position: fixed; */
            position: relative;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 120px;
            background-color: white;
            border-bottom: 1px solid #CCC;
            box-shadow: 0px 2px 2px #DDD;
            cursor: pointer;
            transform: translate(0px, -80px);
            transition: transform .8s;
        }

        #menu:hover {
            transform: translate(0px, 0px);
        }

        #menu > span {
            font-weight: bold;
            font-variant: small-caps;
            position: absolute;
            right: 20px;
            bottom: 10px;
        }

        section{
            width: 800px;
            margin: 0px auto;
            margin-top: -60px;
        }
    </style>
</head>
<body>
    <!-- 
        메뉴 (붙박이 + 슬라이딩)
     -->

     <nav id="menu">
         <span>Menu</span>
     </nav>
     <section>
         <!-- ((h1>lorem5)+(p>lorem5)*3)*20 -->
         <h1>Lorem ipsum dolor sit amet.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Laudantium explicabo aspernatur maiores corporis?</p>
         <p>Veniam dignissimos tempora reiciendis quidem.</p>
         <h1>Corporis minima numquam distinctio! Molestiae.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Nobis repudiandae veritatis quisquam rem.</p>
         <p>Quidem eum cum maiores laudantium?</p>
         <h1>Animi optio porro nulla inventore.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Deserunt sit maiores aspernatur quis?</p>
         <p>Nostrum ratione a nobis fugiat?</p>
         <h1>Dignissimos placeat molestiae esse consectetur!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Recusandae libero officia sapiente corporis?</p>
         <p>Ex dolor consequuntur harum? Maxime.</p>
         <h1>Facere ab aperiam atque expedita?</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>A maxime aut praesentium eveniet?</p>
         <p>Eligendi exercitationem architecto quidem natus!</p>
         <h1>Est porro aliquam id. Voluptates.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Aliquid repudiandae harum quidem obcaecati?</p>
         <p>Explicabo veniam accusantium repudiandae illum?</p>
         <h1>Eveniet harum recusandae rem neque!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Nostrum totam hic natus labore?</p>
         <p>Tenetur ipsam repellat necessitatibus deleniti?</p>
         <h1>Cum perferendis quaerat itaque eos!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Sunt aliquam ipsam totam quisquam?</p>
         <p>Deleniti eligendi tempora libero voluptas.</p>
         <h1>Provident qui consequatur sunt quod?</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Voluptate, consequuntur! Excepturi, recusandae cupiditate?</p>
         <p>Possimus asperiores eveniet hic soluta?</p>
         <h1>Quod sapiente ea debitis accusamus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Ad numquam consectetur dolorem maiores.</p>
         <p>Culpa perferendis tempora maiores atque.</p>
         <h1>Ex assumenda eius aut porro!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Nihil cum numquam iste quae?</p>
         <p>Ullam, quibusdam. Repellat, laboriosam a!</p>
         <h1>Neque iure ex nostrum totam.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Dolorem nemo quidem quasi perferendis!</p>
         <p>Laudantium pariatur facere nisi a!</p>
         <h1>Rerum odio perferendis neque possimus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Cum harum dolores doloribus aliquam!</p>
         <p>Facilis mollitia nam soluta iure.</p>
         <h1>Blanditiis, minus. Doloremque, animi cupiditate.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Amet voluptates maxime minima voluptate!</p>
         <p>Temporibus cumque blanditiis esse deleniti?</p>
         <h1>Consequuntur sequi dignissimos earum eveniet!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Placeat nulla a culpa in.</p>
         <p>Dignissimos eum qui ullam numquam!</p>
         <h1>Modi accusantium ipsum optio doloribus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Unde odio quidem maiores vero?</p>
         <p>Ratione similique rerum quibusdam eveniet!</p>
         <h1>Quidem molestias repellat nesciunt voluptatibus.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Pariatur tenetur deleniti sint corporis.</p>
         <p>Eligendi vel quae quam nihil.</p>
         <h1>Enim rerum cumque id veniam!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Id numquam similique soluta officiis.</p>
         <p>Error necessitatibus et optio quibusdam?</p>
         <h1>Saepe enim totam omnis sed!</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Asperiores explicabo natus assumenda eius.</p>
         <p>Dicta fugit beatae ipsam autem.</p>
         <h1>Earum unde dolorem ipsum consectetur.</h1>
         <p>Lorem ipsum dolor sit amet.</p>
         <p>Odit ratione quia temporibus eligendi.</p>
         <p>Quam id dolorum alias sed!</p>
     </section>
</body>
</html>

ex53_transform.html

<!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>Document</title>
    <style>
        .box {
            width: 128px;
            height: 128px;
            border: 10px solid orange;
            float: left;
            overflow: hidden;
        }

        .box:nth-child(even){
            border-color: crimson;
        }

        /* .box > img {
            transition: all 1s;
        }

        .box:hover > img {
            transform: translate(-128px, 0px);
        } */


        .box > img {
            transition: all 1s;
            /* transform: translate(0px, -128px); */
            transform: rotate(0deg) translate(0px, 0px);
            transform-origin: center top;
        }

        .box:hover > img {
            /* transform: translate(0px, 0px); */
            transform: rotate(360deg);
        }

    </style>
</head>
<body>
    <!-- (div#bpox$.box>img[src=images/catty$$.png])*5 -->
    <div id="bpox1" class="box"><img src="images/catty01.png" alt=""></div>
    <div id="bpox2" class="box"><img src="images/catty02.png" alt=""></div>
    <div id="bpox3" class="box"><img src="images/catty03.png" alt=""></div>
    <div id="bpox4" class="box"><img src="images/catty04.png" alt=""></div>
    <div id="bpox5" class="box"><img src="images/catty05.png" alt=""></div>
</body>
</html>

ex54_transition.html

<!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>Document</title>
    <style>
        #list {
            border: 1px solid black;
            width: 1400px;
            height: 350px;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 15px 0px;
            transition: width 10s;
        }

        #box1 { background-color: royalblue; transition-timing-function: linear;}
        #box2 { background-color: gold; transition-timing-function: ease;}
        #box3 { background-color: crimson; transition-timing-function: ease-in;}
        #box4 { background-color: mediumseagreen; transition-timing-function: ease-out;}
        #box5 { background-color: violet; transition-timing-function: ease-in-out;}

        #list:hover .box {
            width: 1400px;
        }
    </style>
</head>
<body>
    <!-- div#list>div#box$.box*5 -->
    <div id="list">
        <div id="box1" class="box">linear</div>
        <div id="box2" class="box">ease(defalut)</div>
        <div id="box3" class="box">ease-in</div>
        <div id="box4" class="box">ease-out</div>
        <div id="box5" class="box">ease-in-out</div>
    </div>
</body>
</html>

ex55_box-sizing.html

<!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>Document</title>
    <style>
        .box {
                margin-bottom: 5px;
        }

        #box1 {
            width: 300px;
            height: 150px;
            border: 20px solid black;
            padding: 20px;
            background-color: gold;

            /* 테두리와 여백은 제외한 컨텐츠 크기를 width와 height로 하겠다. */
            box-sizing: content-box; /* default */
        }

        #box2 {
            width: 300px;
            height: 150px;
            border: 20px solid black;
            padding: 20px;
            background-color: hotpink;

            /* 테두리와 여백을 모두 포함한 크기를 width와 height로 하겠다. */
            box-sizing: border-box;
        }



    </style>
</head>
<body>
    <!-- div#box$.box*3 -->
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
</body>
</html>

仁

모르면 괴롭고 알면 즐겁다.

이전 포스트

학원 58일차 - CSS

다음 포스트

학원 59일차 - CSS

2021.06.18

ex48_transform.html

ex49_transform.html

ex50_transform.html

ex51_transition.html

ex52_transition.html

ex53_transform.html

ex54_transition.html

ex55_box-sizing.html

학원 58일차 - CSS

학원 60일차 - CSS

0개의 댓글