- 엘리먼트 분할하기
//------------------
* 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
'Code > Web' 카테고리의 다른 글
AWS EBS 저장장치 버스트 잔고 관리 (gp2 vs gp3) (0) | 2021.04.22 |
---|---|
[Web] 백엔드 웹프레임워크 속도 측정 비교 (0) | 2021.03.07 |
AVIF 그림 파일 포맷 (0) | 2021.01.28 |
Squid 프록시 접속 아이디 비밀번호 설정 방법 (0) | 2020.09.06 |
Proxy API (0) | 2020.09.02 |