💻 Frontend
[React] calc()을 활용해 요소를 원하는 좌표에 배치하는 방법
⚙️ calc
calc : 상대적인 크기와 절대적인 크기를 조합하여 계산하는 방식
예시 코드
.child {
position: absolute;
left: 50%;
}
left: 50%는 부모의 절반까지만 이동할 뿐, 요소의 크기는 고려하지 않음.
.parent {
width: 800px;
position: relative;
}
.child {
position: absolute;
left: calc(50% - 3px);
}
- left : 50% 부모 요소의 너비(800px)의 50% 위치(= 400px) 로 이동
-
- 3px: 3px 왼쪽으로 이동
⇒ 최종 위치 : 397px
🖥️ calc()가 반응형에서 중요한 이유
저는 calc()이 반응형에서 정말 중요하다는 걸 프로젝트를 통해 알게 되었어요.
프로젝트에서 정해진 좌표에 태그를 위치시켜야 하는 기능을 구현했어야 했는데, 단순한 left, top, right, bottom으로는 화면 크기가 바뀔 때마다 태그의 위치가 계속 바꼈어서 이것저것 많이 찾아봤어요.
절대 좌표도 찾아보고, 여러 단위도 찾아본 결과, calc()이 반응형 위치 지정에 딱이더라구요!
calc()이 반응형에서 어떻게 적용되는지 알아볼게요!
부모 요소가 가변 크기일 때
부모 요소가 width: 100vw 같은 방식으로 설정되어 있으면, calc(50% - 3px)는 뷰포트 크기에 따라 자동으로 변화해요
.parent {
width: 100vw;
}
.child {
position: absolute;
left: calc(50% - 3px);
}
- 화면 크기가
- 1200px일 때, → 600px - 3px = 597px
- 800px일 때, → 400px - 3px = 397px
⇒ 부모 크기가 변해도 요소는 정중앙에서 3px 왼쪽으로 이동한 위치를 유지!
이렇게 하니까, 화면 크기가 바뀌어도 태그의 위치가 바뀌지 않고 원 안에 고대로 있게 되었어요!
