CSS 주의점

css를 사용하면서 반복적인 실수를 할 때가 있다. 이번에도 이전에 했던 실수를 또 하게 되었다. 앞으로 이 포스팅에 반복되는 실수(?)들을 하나씩 채워나갈 생각이다.

1. transform: scale(0.5)을 통한 크기 변환

원래 element의 크기가 width: 100px, height: 100px 이라면 transform: scale(0.5)적용 시 width: 50px, height: 50px로 크기가 줄어든다. 여기서 중요한 점은 기존 공간을 유지 한 채 크기가 줄어든다는 것이다!

보면 transform : scale(0.5)를 사용한 경우 div안의 글자크기도 함께 줄어들었지만 원본 크기만큼의 공간을 유지한 채 크기가 줄어들었다. 왜냐하면 원본크기는 여전히 width: 100px, height:100px이기 때문

하지만 width, height를 이용해 크기를 줄였을 때는 원본 자체가 5050이 된 것이기 때문에 100100만큼의 공간이 남지 않는다.

이게 왜 중요하냐면 위쪽에 margin-top : 12px을 줄 때 transform: scale(0.5)로 크기 조정을 했을 경우 실제로는 12px + α만큼의 margin이 생겨 생각과는 다른 위치에 element가 있을 것이기 때문