2. 중앙 정렬하기

✅ transition

 

position: absolute;
top: 50%;
left: 50%;

 

이렇게 설정할 경우 

 

 

위와 같이 도형이 생성된다. 

따라서 

 

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

 

💥trasform: translate(-50%, -50%) 를 줘서 

 

 

정가운데로 위치시킨다. 

 

translate( X축 거리, Y 축 거리) 인데, 값을 준만큼 이동시키는 것이다. 

 

 

✅ scale, rotate 

 

 - scale( 가로길이에 곱하는 수, 세로길이에 곱하는 수) --> 길이 변환

 

 - roatate(각도) --> 주어진 각도만큼 요소를 시계방향으로 회전시킴.