본문 바로가기
CSS/CSS 이론에따라 직접해보기

레이아웃-1 Float

by 임혁진 2024. 1. 26. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .abox{
            width:500px;
            margin:0 auto;
            border:1px solid #777;
            
            /*2nd 방법 부모요소에 overflow:hidden */
            overflow:hidden;
        }

        /* 자식에 float을 적용하면 부모영역이 자식을 감싸지 못하는 문제가 생기기때문에 1st,2nd방법*/

        /* float 사용법 1st-부모요소가 float을 못잡아줘서 문제가 생김 해결하는법 외우기 가상요소 after*/
        /* .abox:after{content:"";display:block;clear:both;} */
    
        .abox .item {
            float: left;
            border:1px solid #777;
            width:25%; /*부모영역에 대한 % */
            box-sizing: border-box;
        }

        .bbox {
            border:1px solid #777;
            margin: 0 auto;
            width: 500px;

            overflow:hidden;    
        }

        .bbox .left{
            float:left;
                  }
        
        .bbox .left2{
            float:left;
            
        }

        .bbox .right{
            float:right;
        }

    </style>
</head>
<body>
    
    <div class="abox">
        <div class="item">상자</div>
        <div class="item">상자</div>
        <div class="item">상자</div>
        <div class="item">상자</div>
        
    </div>

    <div class="bbox">
        <div class="left">왼쪽</div>
        <div class="right">오른쪽</div>
        <div class="left2">왼쪽</div>
        
        <!-- cleart:both; 는 더이상 플롯의 영향을 받지 않도록 함 -->
        <div style="clear:both;">하나 넣었음</div> 
    </div>

    <hr>

    <!-- 메뉴를 float으로 정확히 5등분 -->

    <style>
        *{margin:0; padding:0;}
        ul, li{list-style:none;}

        .aa li a{
            text-decoration: none;
            color: #fff;
        }
        header{
            background-color: black;
            
        }
        .aa{
            overflow: hidden;
            border: 1px solid #777;
            margin : 0 auto;
            width:100px;
        }
        .aa li{
            float:left;
            width:20%;
            box-sizing: border-box;
    }
    </style>
<header>
    <ul class="aa">
        <li class = "item"><a href="#">메뉴</a></li>
        <li class = "item"><a href="#">메뉴</a></li>
        <li class = "item"><a href="#">메뉴</a></li>
        <li class = "item"><a href="#">메뉴</a></li>
        <li class = "item"><a href="#">메뉴</a></li>
   
    </ul>
</header>
    <div style="clear:both; text-align: center;" >
        <h1>다양한 메뉴 팝니다</h1>
        
    </div>

</body>
</html>

부모에 overflow:hidden !!!! 안넣으면 float이제대로 들어가지 않는다!.

  이렇게 된다.

 

두번째 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 태그를 먼저다 만들고(구상하고) 시작하는 연습 이게 나중엔 더 쉽다 -->
    <style>
        .box{
            width:800px;
            border:1px solid #777;
            margin: 0 auto;
            overflow:hidden;
        }
        .box .item{
            float:left;
            width:25%;
            border:1px solid #777;
            box-sizing: border-box;
        }
        .box .item img{
            width:100%; 
            height: auto;
        }
        .content{
            overflow:hidden;
        }
        .content .left{
            float: left;
        }
        .content .left Strong{display:block;}
        .content .right{
            float:right;
        }

        .buttons{
            overflow:hidden;
        }
        .buttons button{
            float:left;
            width: 50%;
        }


    </style>
</head>
<body>
    
    <div class="box">
        <div class="item">
            <img src="img/생선만 골라먹는 아기 고양이.jpg" alt="">
            <div class="content">
                <div class="left"><!--왼쪽-->
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                </div>
                <div class="right">오른쪽</div>
                <!-- <div class="price" style="clear:both;">가격영역</div> -->

            </div>

            <div class="price">
                \999,999,999
            </div>

            <div class="buttons">
                <button >장바구니</button>
                <button>구매하기</button>
            </div>
        </div>
        <div class="item">
            <img src="img/생선만 골라먹는 아기 고양이.jpg" alt="">
            <div class="content">
                <div class="left"><!--왼쪽-->
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                </div>
                <div class="right">오른쪽</div>
                <!-- <div class="price" style="clear:both;">가격영역</div> -->

            </div>

            <div class="price">
                \999,999,999
            </div>

            <div class="buttons">
                <button >장바구니</button>
                <button>구매하기</button>
            </div>
        </div>
        <div class="item">
            <img src="img/생선만 골라먹는 아기 고양이.jpg" alt="">
            <div class="content">
                <div class="left"><!--왼쪽-->
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                </div>
                <div class="right">오른쪽</div>
                <!-- <div class="price" style="clear:both;">가격영역</div> -->

            </div>

            <div class="price">
                \999,999,999
            </div>

            <div class="buttons">
                <button >장바구니</button>
                <button>구매하기</button>
            </div>
        </div>
        <div class="item">
            <img src="img/생선만 골라먹는 아기 고양이.jpg" alt="">
            <div class="content">
                <div class="left"><!--왼쪽-->
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                    <Strong>좌측</Strong>
                </div>
                <div class="right">오른쪽</div>
                <!-- <div class="price" style="clear:both;">가격영역</div> -->

            </div>

            <div class="price">
                \999,999,999
            </div>

            <div class="buttons">
                <button >장바구니</button>
                <button>구매하기</button>
            </div>
        </div>

    </div>
</body>
</html>

 

 

 

 

박스를 (tag를 먼저다 짜놓고 만드는 연습을 하자 ) - 구상을 먼저해야 수정이 적고 코드가 꼬이지 않는다. 

'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글

그림자 사용하기  (1) 2024.01.26
레이아웃Float 실습  (1) 2024.01.26
패딩과 마진  (1) 2024.01.26
03백그라운드  (0) 2024.01.26
02-2 디스플레이  (1) 2024.01.26

관련글

티스토리툴바