css margin:0 auto
오늘은 제 포스팅에서도 가운데 정렬을 하기 위해 종종 썼었던 margin:0 auto의 쓰임새에 대해서
알아보도록 하겠습니다.
- margin:0 auto의 쓰임새는?
margin:0 auto는 이 속성값이 들어가는 html 요소에게 가운데 정렬을 시켜주고 싶을 때 사용하게
됩니다.
근데 가운데 정렬을 하려고 하는데 왜 margin값을 저렇게 주는 것인가 궁금증이 생길 수 있습니다.
그것에 대해서 알기 위해서는 먼저 margin의 속성에 대해서 좀 알아야 합니다.
(참고 자료 : https://begindevelop.tistory.com/28)
margin값은 해당 요소와 주변의 요소 사이에 여백을 주는 css 속성입니다.
간단하게 하나 예시를 들어보면,
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
border: 1px solid black;
display: inline-block;
height: 100px;
}
.one {
margin: 10px 40px;
}
.two {
margin: 0 0 0 100px;
}
</style>
</head>
<body>
<div class="one">
안녕
</div>
<div class="two">
하세요.
</div>
</body>
</html>
첫 번째 div는 위아래 10px, 좌우 40px씩 다른 요소들과의 여백을 두었고, 두 번째 div는 왼쪽에만
100px의 여백을 두어 실행을 시켰을 때, 두 div 사이에는 40px+100px 해서 총 140px의 거리가
벌어지게 되는 것입니다.
이 예제에서 중요하게 봐야 할 점은 margin값의 갯수에 따라 여백이 주어지는 방향이 달라진다는 점입니다.
margin: 값; (상하좌우 모두 해당 값만큼 여백)
margin: 값1 값2; (값1은 상하, 값2는 좌우에 해당 값만큼 여백)
margin: 값1 값2 값3; (값1은 위, 값2는 좌우, 값3은 아래에 해당 값만큼 여백)
margin: 값1 값2 값3 값4; (순서대로 위, 오른쪽, 아래, 왼쪽에 해당 값만큼 여백)
그럼 여기서 알 수 있듯 margin:0 auto 는 상하 0(여백없음), 좌우 auto값이 주어지는 것을 알 수 있죠?
- auto값은?
auto는 가로 중앙에 배치한다는 뜻입니다.
그리고 남은 좌우 여백은 균등하게 배분되는데, 예를 들어 부모 영역이 가로 200px이고 자식 영역이
가로 100px이라고 했을 때 margin으로 좌우 auto값을 주면 자식 영역이 가운데로 오게 되고,
남은 가로 길이 100px은 좌우에 균등하게 50px씩 배분될 것입니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
border: 1px solid black;
}
.container {
background-color: #CFFFE5;
width: 200px;
height: 100px;
}
.content {
margin: 0 auto;
background-color: yellow;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
안녕하세요.
</div>
</div>
</body>
</html>
보면 자식 div 영역이 가운데로 와 있고 자식 div의 양옆 여백이 균등하게 배분된 것을 볼 수 있습니다.
- 예외?
margin auto값으로 가운데 정렬이 먹히지 않을 때, 몇 가지 이유가 있습니다.
1. DOCTYPE 선언 문제
<!DOCTYPE html> 앞에는 어떤 문자도 선행되서는 안되며, 선언도 명확해야 합니다.
2. 가로 연산
margin auto값을 줄려면 해당 영역의 가로값에 대한 연산이 가능해야 합니다.
즉, 해당 영역은 가로 값을 갖고 있어야 합니다.(width값 없으면 불가능)
3. display:block
흔히 놓치기 쉬운 문제인데, margin auto값이 먹히려면 해당 영역의 display가 block 상태여야
합니다.
만약 위의 예제에서 제가 div 태그에 display:inline이나 display:inline-block을 줬다면 margin
auto로 가운데 정렬이 먹히지 않았을 것입니다.(div는 기본 display값이 block입니다.)