2022 0303 transform

슬라이더 하나 만들어보는 것이 쉽지 않군~,,

그래도 이렇게 필요한 태그/요소들 찾아가며

놓친 부분들 공부할 수 있어서 좋은듯~

 

절대 성급하게 생각하지 말자! 멈추지만 않으면 된다

 

슬라이드 이미지를 넣으려니 transform 태그가 필요하다

transform은 포토샵처럼 요소의 크기, 회전, 기울기, 이동효과 등을 부여하는 함수를 제공한다.

 

transform: scaleX(n)

scale값은 크기에 관여한다.

scaleX는 X축(가로)의 길이를, scaleY는 Y축(세로)의 길이를 조정한다.

(n)의 숫자는 배수를 뜻한다. 

바로 예를 들어보자

여기서 transform:scale 값을 줘보자!

-> transform: scaleX(2) 를 준 경우. 가로로 2배 커졌다

 

-> transform: scaleY(0.5)를 준 경우, 세로길이가 반으로 줄었다.(납작)

 

1을 입력하면 당연히 1배수가 되어 크기는 그대로가 된다.

주의할 점

만약 x축 y축 다 적용하고 싶다면?

transform: scaleX(2);

transform: scaleY(0.5);

이렇게 입력하면 마지막 선언만 적용이 되어버린다

transform: scaleX(2) scaleY(0.5);

위와같이 한번에 해주어야한다

더 간단하게는

transform: scale(2, 0.5);

 

https://codepen.io/vineethtrv/pen/XKKEgM

애니메이션으로 transfrom의 나머지 각종 속성값을 눈으로 확인할 수 있다

 

transform-origin

scale translate skew 등등 위치나 형태가 변할 때, 그 박스의 딱 중심축을 중심으로 변하는 것을 확인할 수 있다.

그 기준점을 바꿀 때 필요한 게 transform-origin이다

 

이번엔 rotate로 예시를 들어보겠다

transform: rotate(45deg)

블럭 가운데를 기준으로 시계처럼 45도가 회전된 걸 확인할 수 있다.

 

이제 여기서 중심축을 좀더 특정화 해보자

transform: rotate(45deg)

transform-origin: left top;

left top 즉, 왼쪽 위 꼭지점을 중심축으로 45도 회전된 걸 확인할 수 있다.

이는 transfor-origin: 0 0 0; 과 같다 각각 x y z축을 말한다

 

이 외에도 transfrom library(css shake 등..)를 구글링해보면 다양한 트랜스폼 애니메이션 기능을 살펴보고 이용할 수 있다.

 

Background 속성에 대해 공부하는데

https://www.youtube.com/watch?v=JryRu5zby3A    6:20

background: background-position / background-size

이렇게 슬래쉬를 쓰는 걸로 아는데 저건 대체 무슨 구조인지 잘 모르겠다 ㅠㅠ 일단은 패스하고 다른부분으로 넘어가자

 

+추가적으로 오늘은 height와 line-height의 차이를 알아봤었습니다

https://www.codeit.kr/community/threads/3830