TIL 7/17

학습내용

오늘은 CSS의 transform 에 대한 부분을 찾아봤다. transform은 선택자의 위치나 크기등을 조정하는 속성이다. 그래서 여러 속성값들이 존재한다.

translate()

transform: translate()에 대해서 살펴보면

.box1 {
  transform: translateX(x축으로 이동할 값);
  transform: translateY(y축으로 이동할 값);
  transform: translate(x축으로 이동할 값, y축으로 이동할 값);
}

현재 선택자의 위치에서 x축 y축으로 얼마나 이동할지를 나타낸다. 여기서 x축과 y축의 기준은 왼쪽 상단이 기준이다.
x축의 양수 값은 오른쪽으로 이동하는 값이고, 음수 값은 왼쪽으로 이동하는 값이다.
y축의 양수는 상단이 기준이기 때문에 아래로 이동하는 값이고, 음수의 값은 위로 이동하는 값이다.
x축 y축 이동을 한꺼번에 표현할 수도 있다.

scale()

transform: scale()을 살펴보면

.box1 {
  transform: scale(2);
}

현재 선택자의 크기를 괄호 안의 수의 배수로 표현한다. 2를 입력하면 2배가 되고 0.5를 입력하면 반으로 줄어든다. 이렇게 선택자의 크기를 전체적으로 조정할 수 있는 속성이다

rotate()

transform: rotate()를 살펴보면

.box1 {
  transform: rotate(45deg);
}

현재 선택자의 각도를 괄호 안의 값으로 기울여서 표현한다. 45deg를 입력하면 45도 기울여지고 30deg를 입력하면 30도 기울여진 상태로 표현된다.

모두 표현

.box1 {
  transform: translate(100px, 100px) scale(1.5) rotate(45deg);
}

이 모든 속성을 다 표현할 수도 있다.

느낀점

CSS 를 점점 알아갈수록 다양한 표현이 가능해지는 것 같아서 기분이 자신감이 조금씩 붙는 느낌이들었다. 물론 많이 사용해 봐야 더 얼마나 사용되는지도 필요한 기능인지도 판단이 되겠지만 기능만을 연습하기 보다 구현을 해보면서 떠올려 사용할 수 있게 클론도 많이 해봐야겠다.