CSS 핵심! 실무에서 바로 쓰는 2D 변형 속성 마스터하기 (트랜스폼)

2D 변형 마스터하기! (중학생 눈높이 설명)

3D 변형? 일단 2D부터!

우리가 배우는 건 주로 2D 변형이야. 3D 변형도 있긴 한데, 실무에서는 2D 변형을 훨씬 많이 쓰거든. 3D 변형이 궁금하면 따로 검색해서 공부해봐! 책에서는 실무에서 자주 쓰는 2D 변형만 다룰 거야.

변형의 핵심은 '트랜스폼'!

모든 변형은 transform이라는 속성으로 시작해. transform 안에는 여러 가지 기능이 있는데, 우리는 2D에서 쓸 수 있는 것들만 볼 거야.

• translate (이동): 요소를 움직이는 거야.

  • translateX(값): x축 방향으로 움직여. 100px이면 오른쪽으로 100픽셀, -100px이면 왼쪽으로 100픽셀.
  • translateY(값): y축 방향으로 움직여. 100px이면 아래로 100픽셀, -100px이면 위로 100픽셀.
  • translate(x값, y값): x축과 y축을 한 번에 움직일 수 있어. translate(100px, 50px)는 오른쪽으로 100픽셀, 아래로 50픽셀 이동하는 거야.

• scale (크기 조절): 요소를 확대하거나 축소하는 거야.

  • scaleX(값): x축 방향으로만 크기를 조절해. 2면 가로로 2배 커져.
  • scaleY(값): y축 방향으로만 크기를 조절해. 0.5면 세로로 절반 크기가 돼.
  • scale(x값, y값): x축과 y축 크기를 다르게 조절할 수 있어. scale(2, 3)은 가로로 2배, 세로로 3배 커지는 거야.
  • scale(값): x축, y축 모두 같은 비율로 조절돼. scale(2)는 가로세로 2배씩 커지는 거지.

• skew (비틀기): 요소를 기울이는 거야. 실무에서는 잘 안 쓰지만 알아두면 좋아.

  • skewX(각도): x축을 기준으로 기울여. 30deg는 30도만큼 기울이는 거야.
  • skewY(각도): y축을 기준으로 기울여.
  • skew(x각도, y각도): x축과 y축을 다르게 기울일 수 있어.

• rotate (회전): 요소를 돌리는 거야.

  • rotateX(각도): x축을 기준으로 돌려. 2D에서는 약간 3D처럼 느껴질 수 있어.
  • rotateY(각도): y축을 기준으로 돌려.
  • rotate(각도): 그냥 돌리는 거야. 양수면 오른쪽으로, 음수면 왼쪽으로 돌아가.

변형의 기준점 바꾸기: transform-origin

기본적으로 변형은 요소의 중앙을 기준으로 일어나. 마치 중앙에 핀을 꽂아놓고 돌리는 것처럼 말이지. 만약 기준점을 바꾸고 싶다면 transform-origin을 사용해.

• transform-origin: top left; : 왼쪽 위 모서리를 기준으로 변형이 일어나.
• transform-origin: bottom right; : 오른쪽 아래 모서리를 기준으로 변형이 일어나.

꿀팁! 요소를 화면 정중앙에 배치하는 방법

HTML 요소를 화면 정중앙에 딱! 오게 하고 싶을 때가 있을 거야. 이때 position: absolute;와 transform을 같이 쓰면 돼.

1. position: absolute; left: 50%; top: 50%; 로 일단 중앙 근처로 보내.
2. 그런데 이렇게 하면 요소의 왼쪽 위 꼭지점이 중앙에 오게 돼. 그래서 transform: translate(-50%, -50%); 를 추가해서 요소 크기의 절반만큼 왼쪽 위로 다시 올려주는 거야.

이 방법은 실무에서 정말 많이 쓰이니까 꼭 기억해둬!