반응형 개발/CSS33 애니메이션 최적화 : transform, opacity 애니메이션 최적화 : transform, opacity transform은 요소에 회전,크기조정,기울기,이동효과를 부여한다. 이는 CPU가 아닌 GPU를 사용하여 렌더링되므로 애니메이션에 이 속성을 사용하면 성능이 향상될 수 있다. opacity는 요소의 투명도를 설정한다. 이 속성도 GPU에서 렌더링되므로 애니메이션에서 이 속성을 사용하면 성능이 향상된다. 리플로우 리페인트 애니메이션 최적화를 논하기 전에 먼저 브라우저 렌더링 과정에 대한 이해가 필요하다. 이 내용 정도면 충분하다. 처음 화면이 모두 그려진 후에, JS로 인해 화면 내 어떤 Element의 width, height가 변경되면 브라우저는 해당 Element의 width,height를 다시 계산하여 변경된 사이즈로 화면을 그린다. 이를 리.. 2023. 5. 19. border color에 gradient 넣으면서 가운데 공간을 투명하게 하는 법 위의 이미지를 만드려 했다. 생각보다 쉽지 않았다.디자이너님이 과감해지셨다.. 처음에는 border-image를 사용했는데, border-image와 border-radius를 동시에 쓸 수 없음을 알고 구글링을 하였다. 이 블로그 를 참고하여 해결한 줄 알았지만, 가운데 공간을 텅 빈공간으로 만들지 못했다. 이 스택오버플로어 덕분에 해결했다. 차근차근 const ScrollIconWrapper = styled.div` width: 52px; height: 94px; padding: 10px; display: inline-block; position: relative; background: red; ` 위으 코드는 다음 빨간박스을 만든다. 가상 클래스 :before를 사용한다. const ScrollIc.. 2022. 12. 9. css cascading 안되는 경우 정규직 전환이 되기 전, 인턴초반에 문제가 생길때마다 팀장님한테 많이 여쭤보았었다. (지금은 이직하신..) 그때 팀장님께서 알려주신 것 중에 cascading이 있다. 당연하다고 생각했지만 명확하게 알지 못하면 관련해서 문제가 생겼을때 원인 파악이 어려울수도 있는 내용이었다. 위와 같이 wrapper에서 color를 지정하면 button에서 당연히 color가 캐스캐이딩 될 것이라 생각했다. 그런데 그렇지 않았다! 처음에는 다른 엘리먼트에 의해 막힌줄 알고 개발자도구를 살펴보았다. 하지만 아무 이유 없이 color:white 가 취소된 상태였다. 혹시 몰라 button태그를 div태그로 바꾸니 cascading이 잘 되었다. 이번 상황을 통해 전혀 몰랐던 것을 알게 되었다. 모든 속성을 부모 엘리먼트로부.. 2022. 11. 6. fit-content와 100%차이 fit-content : 공간이 부족하지 않을땐 max-content, 공간이 부족하면 auto처럼 margin을 제외한 너비를 width로 사용(height도 마찬가지) min-content : 해당 엘리먼트의 크기를 최소로 줄이고 싶을 때 사용(ex : 텍스트의 경우 최대줄바꿈) max-content : 해당 엘리먼트의 최대 크기(ex : 텍스트의 경우 줄바꿈하지 않은 문장의 길이) 100% : 부모 엘리먼트의 크기에 꽉 채운다. 2022. 11. 2. 이전 1 2 3 4 5 ··· 9 다음 반응형
