이번에는 position을 이용하여 수평 가운데, 수직 가운데 배치를 하는 방법을 알아보겠습니다.
먼저 이전 글에서 말씀드렸던 width & margin:auto 를 이용한 코드를 보겠습니다.
----- HTML 코드 -----
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
----- CSS 코드 -----
.container {
background-color: yellow;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
margin: auto;
}
잠시 margin:auto는 삭제하겠습니다.
그리고 position 속성을 부모요소( .container )와 정렬될 요소( .item )요소에 넣으면
아래의 코드가 됩니다.
.container {
background-color: yellow;
position: relative;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
position: absolute;
}
이 코드의 결과는 아래와 같습니다.
.item 은 보이나 .container 가 보이지 않게 되었습니다.
position:absolute 를 사용하면
해당 요소의 위치가 조상요소 중 position:relative가 있는 요소를 기준으로 바뀌게 됩니다.
만약 position:relative 를 가진 요소가 없으면 최상위 요소인 view(웹브라우저)를 기준으로 위치하게 됩니다.
position:relative 가 .container에 있으므로 .item은 .container 를 기준으로 위치하게 됩니다.
동시에 .container는 .item을 포함하지 않게 됩니다.
.item 이 .container 위에 존재하지만, .item 과 .container 사이에 공간이 있다고 생각하시면 됩니다.
position 속성이 없을 때는 .item 과 .container 가 딱 달라붙어 있었는데,
position 속성을 가짐으로써 .item 과 .container 사이에 약간의 공간이 생겼다고 보시면 됩니다.
position 속성이 없을 때 .container 는 딱 달라붙어있던 .item 만큼의 height 를 가졌는데
position 속성을 가짐으로써 .container 와 .item 이 떨어짐으로써
.container 가 .item 의 height를 갖지 못하게 되는 것입니다.
그래서 다음과 같이 .container 의 height를 설정해주겠습니다.
.container {
background-color: yellow;
position: relative;
height: 300px;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
position: absolute;
}
이 코드의 결과는 다음과 같습니다.
이 상태는 .item 이 .container 와 포함관계에 있지 않고 허공에 떠 있는 상태이고,
top, bottom, left, right 속성을 통해 위치를 지정해줄 수 있습니다.
position을 통해 위치를 설정해주려면 위치시키려는 요소( .item )에 width 와 height가 설정되어 있어야 합니다.
이 코드에서는 이미 width와 height가 설정되어 있습니다.
좌우 배치시에는 width 속성이, 상하 배치시에는 height 속성이 있어야 합니다.
.container {
background-color: yellow;
position: relative;
height: 300px;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
position: absolute;
left: 30px;
top: 20px;
}
position:relative 를 갖고 있는 .container 의 위치를 기준으로
top에서 20px만큼, left에서 30px만큼 떨어진 곳에 위치시키게 됩니다.
그 결과는 아래와 같습니다.
아래와 같이 left:0, right:0 과 margin:auto 를 넣어주면 좌우 너비의 가운데 위치로 오게 됩니다.
.container {
background-color: yellow;
position: relative;
height: 300px;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
left:0, right:0 을 통해 좌우 끝에 기준점을 찍고, margin:auto 를 통해 margin을 좌우에 최대치로 균등배분하게 됩니다.
그 결과는 아래와 같습니다.
이제는 상하 높이의 가운데 배치를 해보겠습니다.
left:0, right:0 대신 top:0, bottom:0 을 넣어주면 됩니다.
.container {
background-color: yellow;
position: relative;
height: 300px;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
그 결과는 아래와 같습니다.
이제 좌우 너비의 가운데 정렬과, 상하 높이의 가운데 배치를 같이 해보겠습니다.
left:0, right:0, top:0, bottom:0 을 모두 넣으면 됩니다.
.container {
background-color: yellow;
position: relative;
height: 300px;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
그 결과는 아래와 같습니다.
다음과 같이 left, right, top, bottom에 0이 아닌 숫자를 넣어줘도 됩니다.
.container {
background-color: yellow;
position: relative;
height: 300px;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
position: absolute;
top: 50px;
bottom: 10px;
left: 60px;
right: 30px;
margin: auto;
}
top, bottom, left, right에 설정된 위치를 기준으로
margin:auto에 의해 margin이 균등 배분됩니다.
그 결과는 다음과 같습니다.
< 관련 글 >
[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를 가운데 정렬하기, 수평만, width&margin:auto
[CSS] div 안의 div를 가운데 정렬하기, 수평만, width&margin:auto
위의 코드와 같이 div가 중첩되어 있을 경우 안 쪽(자식요소)의 div를 바깥쪽(부모요소)의 div의 가운데로 정렬할 때 필요한 CSS 코드를 알아보겠습니다. 이 때 필요한 CSS 코드는 width와 margin: auto 입
webprogramming.tistory.com