<div> <!-- 부모요소 -->
<div> <!-- 자식요소 -->
</div>
</div>위의 코드와 같이 div가 중첩되어 있을 경우
안 쪽(자식요소)의 div를 바깥쪽(부모요소)의 div의 가운데로 정렬할 때 필요한 CSS 코드를 알아보겠습니다.
이 때 필요한 CSS 코드는 width와 margin: auto 입니다.
우선 div 요소에 CSS에서 사용할 이름을 부여하고,
화면에 보이도록 배경색을 설정해보겠습니다.
----- HTML 코드 -----
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
----- CSS 코드 -----
.container {
background-color: yellow;
}
.item {
background-color: gray;
}
이 상태로 웹페이지에서 확인하면 화면에 아무것도 나오지 않습니다.
div태그는 block요소이고, block요소의 상하 높이는 최대한 작아지려는 경향이 있기 때문입니다.
div태그 안에 아무 것도 없으므로 .container 요소와 .item 요소는 모두 상하 높이가 0이 됩니다.
그래서 화면에 아무 것도 나오지 않습니다.
따라서 아래와 같이 .item 요소에 높이를 설정해보겠습니다.
.container {
background-color: yellow;
}
.item {
background-color: gray;
height: 100px;
}
그랬더니 아래와 같이 .item 요소의 색이 보입니다.
block 요소의 좌우 너비는 최대한 커지려는 경향이 있으므로,
.container 와 .item 의 좌우 너비는 화면을 꽉 채우게 됩니다.
.container 의 높이는 설정되어 있지 않지만, 자식 요소인 .item 보다 더 작아질 수 없습니다.
.container 와 .item의 크기는 (너비:화면최대, 높이:100px)로 서로 같게 되고, 부모요소 위에 자식요소가 그려지므로
.item 의 색깔인 gray가 보이게 됩니다.
자식요소인 .item의 좌우 너비를 작게 조절해보겠습니다.
.container {
background-color: yellow;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
}
.item의 좌우 너비를 100px로 조절했더니 .item 뒤로 .container의 색이 보입니다.
아래와 같이 margin을 auto로 설정해보겠습니다.
.container {
background-color: yellow;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
margin: 0 auto;
}
그랬더니 아래와 같이 .item 요소가 .container 의 가운데에 정렬이 되었습니다.
margin에 0과 auto가 들어가있는데
두 번째의 auto가 .item 요소의 좌측과 우측의 margin을 자동으로 설정해준다는 의미입니다.
좌측과 우측의 margin을 부모요소를 기준으로 최대치로 똑같이 설정해주어 가운데정렬이 됩니다.
우측 정렬을 하고 싶으면 아래와 같이 margin: 0 0 0 auto를 주면 됩니다.
우측 margin은 0으로, 좌측 margin은 최대치로 설정해주기 때문에 우측 정렬이 됩니다.
.container {
background-color: yellow;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
margin: 0 0 0 auto;
}
아래는 그 결과입니다.
상하 높이의 가운데 정렬을 시도해보겠습니다.
.container의 높이를 설정하고, .item의 margin 4방향을 모두 auto로 놓겠습니다.
.container {
background-color: yellow;
height: 300px;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
margin: auto;
}
그러나 아래와 같이 상하 높이의 가운데 정렬은 이루어지지 않습니다.
margin:auto 는 block 요소에 한해 수평 정렬 시에만 사용할 수 있습니다.
block 요소는 width를 주어도 한 줄을 모두 차지합니다.
예를 들어, 화면 넓이가 200px일 때 width:10px 의 block 요소가 여러개 있어도
block요소는 한 줄에 오직 1개만 배치됩니다.
block요소는 한 줄을 모두 차지하고 있는 개념이므로 margin:auto를 통해 한 줄을 모두 차지하면서 정렬될 수 있습니다.
그러나 block의 수직길이는 최대로 늘어나지 않고 최소로 줄어드는 경향이 있으므로
margin:auto 를 활용하여 정렬을 할 수 없습니다.
수직정렬은 전통적으로 position을 활용해왔고,
최근에는 display:flex를 이용하여 정렬합니다.
position 또는 display:flex 모두를 이용하여 수직정렬을 할 수 있습니다.
< 관련 글 >
[CSS] div 안의 div를 가운데 정렬하기, 수평&수직, display:flex
[CSS] div 안의 div를 가운데 정렬하기, 수평&수직, display:flex
이 전 글에서 width와 margin:auto를 이용해 div 안의 div를 수평정렬하는 방법을 알아봤습니다. 그 코드를 다시 한번 살펴보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 (A 코드) ----- .container { background-colo
webprogramming.tistory.com
[CSS] div 안의 div를 가운데 정렬하기2, 수평&수직, position
[CSS] div 안의 div를 가운데 정렬하기2, 수평&수직, position
이번에는 position을 이용하여 수평 가운데, 수직 가운데 정렬을 하는 방법을 알아보겠습니다. 먼저 width & margin:auto 를 이용한 코드를 보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { backg
webprogramming.tistory.com