- 엘리먼트 분할하기
//------------------
* 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' 카테고리의 다른 글
| [Web] 백앤드 웹프레임워크 속도 측정 비교 (0) | 2021.03.07 |
|---|---|
| PHP 8의 새로운 기능, 성능 비교 (0) | 2021.02.18 |
| [CSS] div 분할 (반으로 나누기) (0) | 2021.02.12 |
| AVIF 그림 파일 포맷 (0) | 2021.01.28 |
| Squid 프록시 접속 아이디 비밀번호 설정 방법 (0) | 2020.09.06 |
| Proxy API (0) | 2020.09.02 |
댓글을 달아 주세요