transform: translateY(-50%)로 요소 수직 정렬
transform: translateY(-50%)는 요소를 수직으로 중앙에 정렬하는데 사용된다top: 50%; - 이 속성은 요소의 상단을 부모 요소의 상단으로부터 50% 아래로 이동시킵니다. 즉, 요소의 상단이 부모 요소의 중간에 위치transform: translateY(-50%); - 이 속성은 요소를 현재 위치에서 자신의 높이의 50%만큼 위로 이동이 두 속성을 결합하면, 요소의 상단이 부모 요소의 중간에 위치하고, 그 위치에서 요소가 자신의 높이의 절반만큼 위로 이동하게 되어 요소의 중간이 부모 요소의 중간에 위치하게 된다 예를 들어, 요소의 높이가 50px이고 부모 요소의 높이가 100px이면top: 50%;를 적용하면, 요소의 상단이 부모 요소의 상단에서 50px (100px의 50%) 아래..
