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

 

    - 엘리먼트 분할하기

 

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

* flex 사용 <=== 추천

<div  style="display: flex; height: 100px;">

        <div style="width: 50%; background: green;">

            Left 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

반응형

저작자표시

'Code > Web' 카테고리의 다른 글

AWS EBS 저장장치 버스트 잔고 관리  (0)	2021.04.22
[Web] 백엔드 웹프레임워크 속도 측정 비교  (0)	2021.03.07
[CSS] div 분할 (반으로 나누기)  (0)	2021.02.12
AVIF 그림 파일 포맷  (0)	2021.01.28
Squid 프록시 접속 아이디 비밀번호 설정 방법  (0)	2020.09.06
Proxy API  (0)	2020.09.02