사용자에게 특정 팝업(div로 만드는 간단한 팝업)을 보여주려고 하는데, 우선 중앙정렬 하도록 하기 위해서 최상단 div 태그에 top: 50%;, left: 50%; 로 지정해주었다. 그런데 몇 십 픽셀 정도 묘하게 어긋나서 이유를 알아보니 div의 왼쪽 상단 모서리를 기준으로 위치가 산정되기 때문이었다.
이 때 사용하면 좋은 것이 transform 속성이다. transform은 요소에 이동(transform), 회전(rotate), 확대/축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 애니메이션이 필요하다면 트랜지션이나 애니메이션과 함께 사용하고, 아무것도 사용하지 않으면 바로 해당 속성이 적용되어 렌더링 될 것이다.
transform 함수들
transform function | 설명 | 단위 |
translate(x,y) | 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. | px, %, em 등 |
translateX(n) | 요소의 위치를 X축으로 x만큼 이동시킨다. | px, %, em 등 |
translateY(n) | 요소의 위치를 Y축으로 y만큼 이동시킨다. | px, %, em 등 |
scale(x,y) | 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다. | 0과 양수 |
scaleX(n) | 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다. | 0과 양수 |
scaleY(n) | 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다. | 0과 양수 |
skew(x-angle,y-angle) | 요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다. | +/- 각도(deg) |
skewX(x-angle) | 요소를 X축으로 x 각도만큼 기울인다. | +/- 각도(deg) |
skewY(y-angle) | 요소를 Y축으로 y 각도만큼 기울인다. | +/- 각도(deg) |
rotate(angle) | 요소를 angle만큼 회전시킨다. | +/- 각도(deg) |
내가 사용한 방식
아래와 같이 작성하면 viewport를 기준으로 상하좌우 가운데 배치된다.
.pop-up {
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
}
참고 자료
https://poiemaweb.com/css3-transform
'Programming > HTML, CSS' 카테고리의 다른 글
[CSS] 속성 선언 순서 (0) | 2023.11.12 |
---|---|
[CSS] 글꼴 이탤릭체로 만드는 법 (0) | 2023.08.12 |
[iOS] button 요소에 color를 지정하지 않으면 safari 브라우저에서 버튼 텍스트가 파란색(-apple-system-blue)로 표시된다 (0) | 2023.03.20 |
MUI Breadcrumbs (0) | 2022.12.28 |
[MUI] select 요소의 border 없애기 (0) | 2022.12.13 |
댓글