[HTML/CSS] div 가로로 나란히 정렬하는 4가지 방법

 

1. inline-block

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
</div>

.parent {
  border: 1px solid black;
  margin: 1px;
  padding: 10px;
  text-align: center;
}
.child {
  display: inline-block;
  
  width: 100px;
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
}

<div>는 기본적으로 'block' 요소입니다.

block 요소는 항상 새로운 줄에 표시되고, 가로폭 전체를 차지합니다.

따라서, <div> 요소는 항상 수직으로 배치되어 쌓이게 됩니다.

 

display: inline-block;

<div>를 가로로 배치하기 위해서 inline-block 속성을 지정하였습니다.

inline-block은 inline과 block의 특성을 조합한 것으로,

inline처럼 요소들을 같은 줄에 배치하고,

block처럼 크기와 여백을 조절할 수 있습니다.

 

 

 

2. float

<div class='parent'>
  <div class='child'>a</div>
  <div class='child'>b</div>
</div>

.parent {
  border: 1px solid black;
  margin: 1px;
  padding: 10px;
  height: 100px;
}
.child {
  float: left;
  
  width: 100px;
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
}

float: left;

float는 요소를 지정한 값에 따라, 왼쪽이나 오른쪽에 배치합니다.

속성 값으로는 left, right, none, inherit를 사용할 수 있는데,

여기서는 float의 값을 left로 하여

div를 왼쪽에 배치하였습니다.

 

 

 

3. flexbox

<div class='parent'>
  <div class='child'>a</div>
  <div class='child'>b</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  border: 1px solid black;
  margin: 1px;
  padding: 10px;
  height: 100px;
}
.child {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
}

flexbox는 요소의 레이아웃을 설정할 수 있는 

보다 직관적인 방법을 제공합니다.

 

display: flex;

나란히 배치할 <div>의 상위 요소에 display:flex;를 설정하였습니다.

이제 하위의 요소들은 flex 설정에 의해 배치됩니다.

display:flex를 설정하면 그 안의 요소들은 가로 방향으로 배치됩니다.

 

justify-content: center;

justify-content 속성은 메인축 방향으로 어떻게 정렬할 것인가를 지정합니다.

flex-start, flex-end, center, space-between, space-around, space-evenly 값을 지정할 수 있는데,

여기서는 center로 지정하여 요소들이 가로축의 가운데 오도록 하였습니다.

 

 

 

4. Grid

<div class='parent'>
  <div class='child'>a</div>
  <div class='child'>b</div>
</div>

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  border: 1px solid black;
  margin: 1px;
  padding: 10px;
  height: 100px;
}
.child {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
}

display: grid;

grid 컨테이너를 생성합니다.

 

grid-template-columns: 1fr 1fr;

grid 컨테이너의 열을 2개로 설정하고, 각 열의 너비를 1fr, 1fr씩으로 균등하게 나누어 줍니다.

위 코드를 다음과 같이 쓸 수도 있습니다.

grid-template-columns: repeat(2, 1fr);

 

grid-gap: 10px;

그리드 아이템 사이의 간격을 10px로 지정합니다.