[CSS] Auto

안녕하세요 동기 여러분! 오늘은 마진(Margin)의 값인 오토(Auto)에 대해 알아봅시다!

 

Auto

요소를 중앙에 정렬하고 싶을 때 사용하는 값(value)인 Auto는 사용하기 위해 몇 가지 필요한 사항들이 있습니다.

 

.notEnoughMinerals {
  width: 400px;
  margin: 0 auto;
}

위의 코드를 살펴보면 위아래 방향의 마진(margin)은 0으로 좌우 방향은 auto로 설정이 되어 있습니다.

auto는 브라우저가 직접 적절한 크기의 여백을 설정하는 기능이 있는데 여기에서는 .notEnoughMinerals를 클래스로 가진 요소를 중앙으로 정렬해주는 역할을 합니다.

 

---

 

auto를 쓰기 위해서 width를 설정해주자

다음의 코드로 실험을 해봅시다.

<!-- HTML -->
<div class='notEnoughMinerals'>
  <h2>미네랄이 부족합니다. 미네랄을 더 채취하십시오.</h2>
</div>

/* CSS - width를 설정하지 않은 경우 */
.notEnoughMinerals {
  margin: 0 auto;
  background-color: aqua; /* width를 알아보기 쉽게 하기 위해 색을 넣음 */
}

에잉? 요소가 중앙으로 정렬하지 않습니다.

 

/* CSS - width를 설정한 경우 */
.notEnoughMinerals {
  width: 400px;              /* 400px로 설정하였습니다. */
  margin: 0 auto;
  background-color: aqua;
}

 

오 이제는 요소가 중앙으로 정렬하는군요!!

 

width를 정해주지 않거나 너무 크게 정해주게 된다면 경계 밖의 빈 공간을 조절할 마진이 남지 않게 되어 요소를 중앙으로 당겨올 수가 없게 됩니다. 

 

width를 2000px로 지정하고 실행해봅시다.

/* CSS - width를 2000으로 설정 */
.notEnoughMinerals {
  width: 2000px;
  margin: 0 auto;
  background-color: aqua;
}

• 위 스크린샷을 보면 분명 요소는 중앙으로 정렬하였지만 텍스트들이 왼쪽으로 쏠려있어 보기가 좋지 않습니다.

 

---

 

그럼 어찌하는 것이 가장 좋을까?

사용자가 사용하는 디바이스에 따라 다를 수도 있지만 보통 width: 400px가 거의 모든 스크린의 크기보다 작기 때문에 많이 쓰이는 수치입니다.

 

앞서 말했듯 어떤 목적으로 만드는 웹 페이지인지에 따라 상황은 바뀔 수 있지만 margin: 0 auto;를 사용해 요소를 중앙에 정렬하고 싶다면 width의 크기는 반드시 사용자가 사용하는 스크린의 크기보단 작게 설정해주어야 깔끔한 중앙 정렬을 만들 수 있습니다.

 

---

 

오늘의 느낌

뭔가 겁나 복잡한데 이거 부트스트랩 쓰면 그냥 다 해결되는거 아닌가... ㅋㅋㅋ