margin auto 속성으로 정렬하기 / 그리고 margin-left: auto;

margin auto 속성으로 정렬하기 

 

웹디자인기능사 공부하다가 margin-left: auto 속성이 나왔다.

margin: 0 auto; 만 사용하다가 margin-left: auto 속성을 보고 margin 속성에 대해 궁금해져서 이것저것 만져보면서 가지고 놀아보았다.

 

 

 

1. margin: 0 auto;

기존에 많이 사용하던 margin 0 auto 속성

<div class="box"></div>

.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

 

 

▶ 요소를 가운데 정렬할 수 있다.

▶ margin: 0 auto; 는 위아래의 마진을 0으로, 좌우 마진을 자동으로 조정해주는 것 

▶ margin: 0 auto; ⇔ margin: 0 auto 0 auto; 

 

 

 

---

 

2. margin-left: auto;

<div class="box">
  <div class="box_01">박스1</div>
  <div class="box_02">박스2</div>
</div>

박스 안에 두 개의 요소가 있을 때, 

① 첫번째 요소에 margin-left: auto; 

.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
}
.box_01{
  margin-left: auto;
}

▶ 박스 안의 두 요소 모두가 오른쪽으로 정렬.

 

 

 

② 두번째 요소에 margin-left: auto; 

.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
}
.box_02{
  margin-left: auto;
}

▶ 박스 안의 두 요소 중 두번째 요소만 오른쪽으로 정렬.

 

 

 

---

 

 

3. margin-top: auto;

① 첫번째 요소에 margin-top: auto; 

.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
}
.box_01{
  margin-top: auto;
}

▶ 박스 안의 첫 번째 요소만 마진 탑 값이 조정되어 아래로 정렬.

 

 

 

② 두번째 요소에 margin-top: auto; 

.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
}
.box_02{
  margin-top: auto;
}

▶ 박스 안의 두 번째 요소만 마진 탑 값이 조정되어 아래로 정렬.

 

 

③ 세 번째 요소 추가

▶ margin 으로 정렬할 시 원래 있던 자리는 유지한 채 아래로만 정렬되는 것을 볼 수 있음.

 

 

④ 박스2는 margin-top: auto;  박스1은 margin-left: auto; 를 적용해줄 경우

.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
}
.box_01{
  margin-left: auto;
}
.box_02{
  margin-top: auto;
}

▶ 첫 번째에 있던 요소의 left 마진값이 자동으로 조절되면서 그 옆에 있던 요소들이 같이 오른쪽으로 밀려남.

 

 

⑤ 이 상태에서 박스3 에 margin-right: auto; 를 줬을 때

.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
}
.box_01{
  margin-left: auto;
}
.box_02{
  margin-top: auto;
}
.box_03{
  margin-right: auto;
}

▶ 박스1의 margin-left: auto; 와 박스3의 margin-right: auto; 가 만나서 박스 안의 요소들 전체에 margin: 0 auto; 를 해준것처럼 가운데 정렬이 되었다. 박스를 하나 더 추가하지 않아도 안의 요소들을 가운데 정렬할 수 있었다!