transform: translate || scale || rotate

inline 요소들을 좌|가운데|우 배치하고 싶을때 text-align : 사용하자

 

block 요소 안에 있는 inline(text,이미지 포함) 요소 만 적용가능

---

transform : 나의 원래 위치를 기억 하고 있다.
즉, 다른 주변요소들에게 영향을 주지 않는다.

 

transform 의 기준은 항상 자기 자신이다.

*transform : translateY(-50%)
내가 가진(현재요소) height값을 기준으로  height의 반 정도만 올리겠다는 의미

*transform : translateX(-50%)
내가 가진(현재요소) width 값을 기준으로 width의 반 정도 왼쪽으로 땡기겠다는 의미 

현재 내가 가진 (width,height)를 기준으로 배치를 할 수 있다 
- 올리겠다.
+내리겠다.

 

 

---

position:fixed 를 사용하여
viewport 기준으로 top 에서 50% left 에서 50%
꼭짓점을 기준으로 중앙에 온게 확인이된다

이럴 때 사용하는 것이 transform: translate(X,Y);

현재 내가 가진 (width,height)를 기준으로 배치를 할 수 있다 
(-)위로
(+)아래로

  transform: translate(X,Y)

---

scale( )
transform : scale(크기 (정수));   0.5.0.7... ,1(자기사이즈),2
scale(X,Y)

---

rotate(Ndeg) deg->각도
degree 명사) 도
어떤 요소의 각도를 돌려줄 경우