반응형 개발/CSS34 Overflow : hidden 이 레이아웃을 부숴버릴때 Overflow : hidden 이 레이아웃을 부숴버릴때 overflow은 CSS에서 요소의 컨텐츠가 요소의 box를 벗어나는 경우 어떻게 처리할 지 지정한다. hidden 은 box를 벗어나는 부분을 숨긴다. 그러나 이 속성을 사용할 때 예상치 못한 레이아웃 문제가 발생하기도 한다. text-overflow:ellipsis 와 overflow:hidden 나의 경우에는 ellipsis를 이용하여 ... 을 만들려는 상황에서 레이아웃이 망가졌다. &-ellipsis { overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; } 검색해보니 overflow : hidden이 레이아웃을 망칠때는 vertical-align : bottom 을 사용하.. 2023. 7. 3. 애니메이션 최적화 : 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. 이전 1 2 3 4 5 ··· 9 다음 반응형
