CSS Layout

Creator

Creator

Seonglae Cho

Created

Created

2021 Jun 28 7:8

Editor

Editor

Seonglae Cho

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

CSS Aspect Ratio

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

https://www.joshwcomeau.com/css/understanding-layout-algorithms/

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 및 렌더링

https://black7375.tistory.com/79

[스압/데이터주의] 웹 최적화 방식 모음 - 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

https://www.gabe.pizza/notes-on-component-libraries/?ref=sidebar

Notes on maintaining an internal React component library

Recommendations

////////