그리드2 [CSS] CSS Grid(그리드) 레이아웃 CSS GridCSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다. CSS Grid는 CSS Flex와 같이Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. (부모요소) Container ▶ Items를 감싸는 부모 요소, 그 안에서 각 Item을 배치할 수 있습니다. (자식요소) Items ▶ 각 Item 열(가로) column 행(세로) row 출처 : https://studiomeal.com/archives/533Grid ContainerGrid Container를 위한.. 2024. 5. 25. [UX/UI] 8pt 그리드 시스템 왜 '8pt'를 사용하지?8pt로 디자인해야 여러 디스플레이에서 컴포넌트가 깨지지 않기 때문 8의 배수로 UI 사이즈를 통일한 시스템을 8pt grid system이라고 부르는데,말그대로 모든 컴포넌트 dimension, padding, margin 등 수치를 전부 8의 배수로 디자인하는 것입니다. 왜 pt로 디자인을 할까? Why pt?Designing for the smallest size allows us to scale our assets into the different sizes the different devices require.pt로 작업한 아트보드는, 실제 디바이스로 갔을 때 더 크게 렌더됨 (대표적으로 @2, @1.5, @0.75 배)1pt가 해상도 (@1, @2, @3)에 따라 .. 2024. 4. 30. 이전 1 다음 728x90 반응형
