개발하는 일상

문제 상황 perspective 속성을 사용하다보면 의도와 다르게 이상하게 동작할 때가 있습니다. 저는 문을 만들면서 이 상황을 겪게 되었는데요. 아래의 네모박스에 마우스를 가져가면 마치 문이 열리는 듯한 동작을 하도록 만들었습니다. 처음 동작은 부드럽게 되는 듯 하나, 마우스를 빠르게 왔다갔다 해보시면 perspective가 매우 작게 설정된(매우 가까이 에서 문이 열린) 것 같은 효과가 발생합니다. 원인과 해결 방법 이 문제는 원치않게 perspective가 변할 때 발생하는데요. 보통 perspective의 초기값을 설정하지 않았을 때 이런 문제가 발생하니 이벤트가 발생하지 않았을 때 초기값을 잘 지정해주면 됩니다. 저의 경우는 door-front에서 opend클래스가 추가 되었을 때 transfo..

border-radius: 5px; 가장 많이 쓰이는 사용법일 것 같은데요. 이 사용법은 축약형으로, 실제로는 다음과 같은 속성으로 나눠져 있습니다. 이 문법은 블락의 네 모서리의 border-radius를 한 번에 지정합니다. 그렇다면 저 5px이 의미하는 것은 무엇일까요? 아래의 예시에서 radius값을 조절해보세요! border-radius 값을 늘리면 늘릴 수록 원이 커지는데, 저 원의 반지름이 바로 border-radius에 지정한 값이 됩니다. border-top-left-radius: 5px 10px; border-radius를 원이 아니라 타원형으로도 지정할 수 있습니다. 처음 써준 값이 타원의 수평 반지름, 두 번째 써준 값이 수직 반지름이 됩니다. 아래의 예시에서 horizontal과 ..