CSS Layout

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2021 Jun 28 7:8
Editor
Edited
Edited
2022 Jul 1 18:48
Refs
Refs

Components should usually take up all horizontal space given

Applying this rule makes responsive pages easier to implement because almost all media query CSS can exist (where they should) in container components (flex/grid/spacer/etc.).
Flex, Grid 가 기존 레이아웃 방식에 비해 성능도 훨씬 좋다
CSS Layout Methods
 
 
 
 
Understanding Layout Algorithms
As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should focus on how the language uses those properties to calculate layouts. In this blog post, we'll pop the hood on CSS and see how the language is structured, and how to learn it effectively.
Understanding Layout Algorithms
[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링
레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow 란 글이 잘 설명해준다. 3.1.1 CSS 속성 개요 분류: CSS 이야기가 나온김에 리플로우에 영향을 미치는 유명한 CSS 요소들을 뽑아보자면 [ CSS Triggers, 20 Tips for Optimizing CSS Performance] 이 있다. 그리고 재계산을 유발하기로 유명한 속성은 다음이 있으며 불필요하게 값을 수정하지 않는게 좋다.
[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링
Notes on maintaining an internal React component library
I have been on the UI Infrastructure team at DigitalOcean since November 2021. One of my main responsibilities is acting as the primary maintainer of our internal React component library, Walrus. This library predates my involvement by several years, and it has been interesting getting to see how previous design choices have played out.
Notes on maintaining an internal React component library
 
 

Recommendations