transform: translateY(-50%)는 요소를 수직으로 중앙에 정렬하는데 사용된다
- top: 50%; - 이 속성은 요소의 상단을 부모 요소의 상단으로부터 50% 아래로 이동시킵니다. 즉, 요소의 상단이 부모 요소의 중간에 위치
- transform: translateY(-50%); - 이 속성은 요소를 현재 위치에서 자신의 높이의 50%만큼 위로 이동
이 두 속성을 결합하면, 요소의 상단이 부모 요소의 중간에 위치하고, 그 위치에서 요소가 자신의 높이의 절반만큼 위로 이동하게 되어 요소의 중간이 부모 요소의 중간에 위치하게 된다
예를 들어, 요소의 높이가 50px이고 부모 요소의 높이가 100px이면
- top: 50%;를 적용하면, 요소의 상단이 부모 요소의 상단에서 50px (100px의 50%) 아래로 이동하고,
- 그 다음, transform: translateY(-50%);를 적용하면 요소가 자신의 높이인 50px의 50% (즉, 25px)만큼 위로 이동한다
import styled from 'styled-components';
const StCardWrapper = styled.div`
display: flex;
width: 100%;
height: 50px;
background-color: var(--blue-one);
position: relative; /* 상대적 위치 설정 */
`;
const StAmount = styled.div`
position: absolute; /* 절대적 위치 설정 */
right: 10px; /* 오른쪽에서 10px 떨어진 위치 */
top: 50%; /* 부모 요소의 중간 위치 */
transform: translateY(-50%); /* 자신의 높이의 50%만큼 위로 이동 */
`;
export default function ExpenseCard({ costData }) {
const { id, date, item, amount, description } = costData;
return (
<StCardWrapper>
{date}
<StAmount>{amount}</StAmount>
{description}
</StCardWrapper>
);
}