CSS를 이용해 객체 가운데 위치하기!
객체를 가운데에 두는 방법에는 여러 개가 있다.
calc를 기억해두려는 목적으로 글을 쓰기 시작했는데, 내가 작업하면서 써봤던 방법을 작성해두려고 한다. (flex-box는 논외)
조건은 부모 객체의 가운데에 위치시키기다.
HTML
<div class="wrapper">
<div class="popup">
</div>
</div>
CSS
.wrapper{
position:relative;
width:400px;
height:400px;
background-color:#cacaca;
}
.popup{
position:absolute;
top:50%;
left:50%;
margin-top:-75px;
margin-left:-75px;
width:150px;
height:150px;
background-color:pink;
}
이런 식으로 영역의 50%를 top, left 내리고 그 객체 사이즈의 반 값을 빼주는 형식으로 작업했다.
(객체 시작 위치를 기준으로 50% 이동하기 때문에 객체의 값을 빼줘야 가운데 위치한다.)
위와 비슷하게 calc를 쓸 수 있다.
CSS
.wrapper{
position:relative;
width:400px;
height:400px;
background-color:#cacaca;
}
.popup{
position:absolute;
top: calc(50% - 75px);
left: calc(50% - 75px);
width:150px;
height:150px;
background-color:pink;
}
top: calc(50% - 75px);
left calc(50% - 75px);
(75px은 객체의 반 값)
[예제]
See the Pen study-alignment css3 by leeyoonseo (@okayoon) on CodePen.
can i use : https://caniuse.com/#search=calc
IE9~ 지원하는데, 부분 지원이라고 나온다.
물론 값이 변수일 경우에는 js로 비슷하게 작업했다.
HTML
<div class="wrapper">
<div class="popup">
</div>
</div>
CSS
.wrapper{
position:relative;
width:400px;
height:400px;
background-color:#cacaca;
}
.popup{
position:absolute;
top:50%;
left:50%;
width:150px;
height:150px;
background-color:pink;
}
JS
const popup = document.getElementsByClassName('popup')[0];
const _width = popup.offsetWidth;
const _height = popup.offsetHeight;
popup.style.marginTop = -(_width/2)+'px';
popup.style.marginLeft = -(_height/2)+'px';
가운데에 위치하기 위한 margin 값 들을 변수로 받아서 계산한 후에 적용시켜준다.
이렇게 하면 width, height 값이 변하더라도 깨지지 않는다.
[예제]
See the Pen study-alignment js by leeyoonseo (@okayoon) on CodePen.
'개념' 카테고리의 다른 글
| 로컬 스토리지(Local Storage) (0) | 2019.06.05 |
|---|---|
| 쿠키(Cookie) (0) | 2019.06.05 |
| CND이란? (0) | 2019.05.16 |
| MVC 패턴 (0) | 2019.05.16 |
| 구글 API KEY생성하는 법 (0) | 2018.10.26 |
| void 0 이란? (0) | 2018.10.23 |
| let 키워드, const 키워드 (0) | 2018.10.23 |
| ES6 매개변수 기본 정의 (0) | 2018.10.16 |
