풀스택 개발 학습 과정/프론트엔드

[HTML + CSS] CSS 4 - float / flex 를 이용한 콘텐츠 배치

육츠 2024. 2. 25. 03:24

Float 이용 배치

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float을 이용한 Layout-2</title>
    <style>
        /* 전체 div 태그에 속성 지정 */
        div.section{
            width : 600px;
            padding : 20px;
            margin : 20px;
            border : 2px solid gray;
        }
        div.section>div {
            width : 100px;
            height: 200px;
            background-color : orange;
            border:1px solid gray;
        }
        /* parent1에 일반적인 float 속성 적용 */
        div.parent1{
            /* 이 속성이 없으면 자식태그의 높이를 인식하지 못함. 자식 div가 흘러넘침 */
            overflow: hidden;
        }
        div.parent1 > div {
            float: left;
        }
        
        /* parent2 : 부모의 폭이 좁으면 자식 요소는 자동으로 밑으로 내려감 */
        div.parent2{
            width : 500px;
            overflow: auto;
        }
        div.parent2 > div {
            float : left;
            margin-right : 10px;
        }

     </style>
</head>
<body>
    <h2>Float을 이용한 Layout-2</h2>
    <h3>(1) float을 적용한 예</h3>
    <div class="parent1 section">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>Box-3</div>
        <div>Box-4</div>
        <div>Box-5</div>
    </div>

    <h3>(2) float을 적용한 예2</h3>
    <div class="parent2 section">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>Box-3</div>
        <div>Box-4</div>
        <div>Box-5</div>
    </div>

</body>
</html>

 

Flex 를 이용한 배치

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float을 이용한 Layout-2</title>
    <style>
        /* 전체 div 태그에 속성 지정 */
        div.section{
            width : 600px;
            padding : 20px;
            margin : 20px;
            border : 2px solid gray;
        }
        div.section>div {
            width : 100px;
            height: 100px;
            background-color : orange;
            border:1px solid gray;
        }
        /* flex-container: 부모요소 : float:left 와 유사 */
        div.parent1{
            display: flex; /* 자식 요소를 flex 하겠다 */
        }

        /* flex-direction 적용 */
        div.parent2{
            display: flex;
            flex-direction: row-reverse;
        }

        /* justify-content 적용 */
        div.parent3{
            display: flex;
            justify-content : flex-start;
        }

         /* align-items 적용 */
         div.parent4{
            display: flex;
            align-items : flex-start;
        }
        div.parent4>div:nth-child(1) { height: 80px;}
        div.parent4>div:nth-child(2) { height: 25px;}
        div.parent4>div:nth-child(3) { height: 60px;}
        div.parent4>div:nth-child(4) { height: 55px;}
        div.parent4>div:nth-child(5) { height: 70px;}

        /* flex-wrap 적용 */
        div.parent5{
            display : flex;
            flex-wrap : wrap;
        }
        
     </style>
</head>
<body>
    <h2>Flex을 이용한 Layout</h2>
    <h3>(1) flex을 적용한 예 1</h3>
    <div class="parent1 section">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>Box-3</div>
        <div>Box-4</div>
        <div>Box-5</div>
    </div>
 
    <h3>(2) flex-direction : row(default), column, row-reverse, column-reverse</h3>
    <div class="parent2 section">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>Box-3</div>
        <div>Box-4</div>
        <div>Box-5</div>
    </div>

    <h3>(3) justify-content : 좌우로 정렬방법 지정</h3>
    <div class="parent3 section">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>Box-3</div>
        <div>Box-4</div>
        <div>Box-5</div>
    </div>

    <h3>(4) align-items : stretch, flex-start, flex-end, center, baseline </h3>
    <div class="parent4 section">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>ing-3</div>
        <div>Box-4</div>
        <div>Box-5</div>
    </div>

    <h3>(5) flex-wrap: overflow되는 content의 처리 </h3>
    <div class="parent5 section">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>ing-3</div>
        <div>Box-4</div>
        <div>Box-5</div>
        <div>Box-6</div>
    </div>
</body>
</html>