Haruponea

transform을 통해 요소의 확대, 축소, 늘리기, 기울이기, 회전 등등 다양한 변형을 할 수 있습니다. 여기에서는 몇가지 transform을 정리해보겠습니다. 1. transform:rotate() 요소를 회전시킵니다. 단위로 rad, deg, turn 등등을 사용합니다. transform-origin을 통해서 회전축을 바꿀 수 있습니다. See the Pen Untitled by Haruponea (@Haruponea) on CodePen. 마우스를 올려보면 위에는 중심을 기준으로, 아래 div는 오른쪽 아래 꼭짓점을 기준으로 회전하는 것을 알 수 있습니다. 2. transform:scale() 요소의 크기를 조절합니다. See the Pen Untitled by Haruponea (@Harupo..

1. percentages %는 항상 다른 값에 대한 상댓값입니다. 다른 값은 부모의 값이 될수도, 요소 자신의 값이 될 수 도 있습니다. width: 50% -> 부모의 width의 50% line-height 50% -> 자기 자신의 font-size의 50% 2. em em도 relative unit입니다. font-size에 em을 사용할 때, 1em은 부모 요소와 같은 크기의 font-size, 2em은 부모 요소 font-size의 2배가 됩니다. 다른 property와 사용하면 1em은 요소 자체의 font-size와 같고 2em은 요소 자체의 font-size의 2배입니다. /*html */ article{ font-size:20px; } p{ font-size:2em; margin-lef..