1 개요[ | ]
- HTML div 3개 한줄로 배열 (왼쪽-가운데-오른쪽)
- div 3개 왼쪽-가운데-오른쪽 한줄로 배열
- div 왼쪽, 가운데, 오른쪽 배치
- div 3단 분할
2 방법 1: flex ★[ | ]
- 외부 박스(container)에
display: flex;
- 내부 박스에
flex: 숫자;
형식으로 비율 기입
- 또는
flex-basis: 크기;
형식으로 크기 지정
2.1 예시: 1:3:1 분할[ | ]
- 아래는 너비를 1:3:1 비율로 분할한 예시임
html
Copy
<style>
#container {
display: flex;
}
#box-left {
background: red;
flex: 1;
}
#box-center {
background: orange;
flex: 3;
text-align: center;
}
#box-right {
background: yellow;
flex: 1;
text-align: right;
}
</style>
<div id='container'>
<div id='box-left'>왼쪽</div>
<div id='box-center'>가운데</div>
<div id='box-right'>오른쪽</div>
</div>
2.2 예시: 100px:*:150px 분할[ | ]
html
Copy
<style>
#container {
display: flex;
}
#box-left {
background: red;
flex-basis: 100px;
}
#box-center {
background: orange;
flex: 1;
text-align: center;
}
#box-right {
background: yellow;
flex-basis: 150px;
text-align: right;
}
</style>
<div id='container'>
<div id='box-left'>왼쪽</div>
<div id='box-center'>가운데</div>
<div id='box-right'>오른쪽</div>
</div>
3 방법 2: grid ★[ | ]
html
Copy
<style>
#container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
}
#box-left {
background: red;
}
#box-center {
background: orange;
text-align: center;
}
#box-right {
background: yellow;
text-align: right;
}
</style>
<div id='container'>
<div id='box-left'>왼쪽</div>
<div id='box-center'>가운데</div>
<div id='box-right'>오른쪽</div>
</div>
4 방법 3: table-cell ★[ | ]
html
Copy
<style>
.row {
width: 100%;
display: table;
}
.box { display: table-cell; }
.box-a { background: red; width: 50px; }
.box-b { background: orange; }
.box-c { background: yellow; width: 50px; }
</style>
<div class="row">
<div class="box box-a">A</div>
<div class="box box-b">B</div>
<div class="box box-c">C</div>
</div>
5 방법 4: float[ | ]
- 왼쪽 div는
float: left;
- 오른쪽 div는
float: right;
- 가운데 div는
margin: 0 auto;
를 적용 - 단, div를 왼쪽-오른쪽-가운데 순으로 배열해야 함 ★
5.1 예시 1[ | ]
html
Copy
<style>
#container {
text-align: center;
}
#left-box {
background-color: red;
float: left;
}
#center-box {
background-color: yellow;
margin: 0 auto;
}
#right-box {
background-color: blue;
float: right;
}
</style>
<div id='container'>
<div id='left-box'>왼쪽</div>
<div id='right-box'>오른쪽</div>
<div id='center-box'>가운데</div>
</div>
5.2 예시 2[ | ]
html
Copy
<style>
#left-box {
width: 100px;
background-color: red;
float: left;
}
#center-box {
text-align: center;
background-color: yellow;
margin: 0 auto;
}
#right-box {
width: 100px;
background-color: blue;
float: right;
text-align: right;
}
</style>
<div>
<div id='left-box'>왼쪽</div>
<div id='right-box'>오른쪽</div>
<div id='center-box'>가운데</div>
</div>
6 같이 보기[ | ]
편집자 Jmnote 106.247.230.186 220.117.189.193
로그인하시면 댓글을 쓸 수 있습니다.
- 분류 댓글:
- HTML (1)
HTML에 CSS를 적용하는 방식 3가지 ― 천도현