[TIL] 03.24 css transform

css transfrom

요소에 적용할 변형을 지정한다. 나는 transform: translateX translateY 를 사용하여 이미지의 위치를 조정해 주었다. 

처음엔 float을 사용하였는데 받는 이미지가 여러가지였다. 그냥 image도 있고 icon 이나 썸네일 등이 있었는데 썸네일의 경우 기본적으로 마진을 받기 때문에 float을 사용할 경우 위치가 살짝 어극 나게 되었다. 그래서 position: absolute; 를 해주고 transform을 사용하여 위치를 고정 시켜 주었다. 

 

아래 처럼 사용하여 이미지를 중앙으로 정렬 시켜 주었다.

position: absolite
transfrom: translate( -50%, -50%)
top: 50%
left: 50%

참고 블로그: https://www.biew.co.kr/34