[CSS] div 분할 (반으로 나누기)

 

    - 엘리먼트 분할하기

 

//------------------

* flex 사용 <=== 추천

 

<!-- flex로 div 균일 하게 나누기 -  flex-grow: 1;  -->

<!-- 좌우 균일 하기 나누기 -->
<div style="display: flex; flex-direction: row; height: 200px;">
    <div style="flex-grow: 1;width1: 50%; background: green;">
        Left Div
    </div>
    <div style="flex-grow: 1; background: blue;">
        Right Div
    </div>
</div>

<!-- 상하 균일 하게 나누기 -->
<div style="display: flex; flex-direction: column; height: 200px;">
    <div style="flex-grow: 1;width1: 50%; background: green;">
        Up Div
    </div>
    <div style="flex-grow: 1; background: blue;">
        Right Div
    </div>
</div>

//------------------

* float 사용

<div style="width: 100%;">

        <div style="width: 50%;  float: left;  height: 100px;background: green;"> 

            Left Div 

        </div>

        <div style="margin-left: 50%; height: 100px; background: blue;"> 

            Right Div

        </div>

    </div>

//-------------------

* display: table 사용

<div style="width: 100%; display: table;">

        <div style="display: table-row; height: 100px;">

            <div style="width: 50%; display: table-cell; background: green;">

                Left Div 

            </div>

            <div style="display: table-cell; background: blue;"> 

                Right Div

            </div>

        </div>

    </div>

//-----------------

// 참고

How to make side by side divs in HTML

https://www.educative.io/edpresso/how-to-make-side-by-side-divs-in-html