CSS translateY() 함수로 y축 방향 요소 변환하기

CSS의 translateY(n) 메서드를 사용하면 요소를 y축(세로) 방향으로 자유롭게 이동시킬 수 있습니다. 애니메이션이나 레이아웃 미세 조정 등 다양한 상황에서 유용하게 활용됩니다.

기본 문법

translateY(n)

여기서 n은 이동 벡터의 y좌표를 나타내는 길이 값입니다. 양수(px, %, em 등 단위 사용 가능)를 지정하면 요소가 아래쪽으로 이동하고, 음수를 지정하면 위쪽으로 이동합니다.

예제

다음 예제는 검은색 사각형 요소에 translateY(20px)를 적용해 세로 방향으로 20px 이동시키고, 배경색을 주황색으로 변경하는 코드입니다.

div {
    width: 50px;
    height: 50px;
    background-color: black;
}
.trans {
    transform: translateY(20px);
    background-color: orange;
}

위 코드에서 .trans 클래스가 적용된 요소는 원래 위치에서 세로로 20픽셀 아래로 밀려나 표시됩니다. 참고로 translateY()는 원래 위치의 공간을 그대로 유지하므로, 주변 레이아웃에는 영향을 주지 않습니다.