sliver__

이번 포스팅에서는 CSS Grid에서 트랙(track) 과 아이템(item) 을 정렬하는 방법을 배워봅니다.Flexbox와 유사하지만, Grid만의 고유 속성으로 컨테이너 안의 트랙(열·행) 과 셀(cell) 내부의 아이템 두 영역 모두를 다루는 방법을 알아보겠습니다.1. 트랙 정렬: 컨테이너 안에서 열·행 배치하기Grid 컨테이너가 자신이 가진 트랙(열·행)을 모두 채우지 못할 만큼 커졌을 때, 남는 공간을 어떻게 분배할지 결정하는 속성입니다.1-1. 수평 방향 (justify-content) .container { display: grid; justify-content: center; /* 가로 중앙 정렬 */ /* space-between, start, end 등도 가능 */}cent..

이번 포스팅에서는 자동 배치에서 벗어나, CSS Grid의 grid-column 과 grid-row 속성을 사용해 원하는 셀(cell)에 직접 아이템을 배치하고, 여러 셀을 가로지르기(span) 하는 방법을 알아봅니다.1. 브라우저 DevTools로 그리드 라인(Line) 확인하기브라우저 개발자 도구에서 Grid 레이아웃 표시 버튼을 클릭행(row)·열(column)마다 번호 매겨진 그리드 라인과, 라인 사이 셀(cell), 그리고 간격(gutter) 이 시각화됨각 아이템이 위치할 셀의 시작(start)·끝(end) 라인 번호를 확인2. 단일 셀에 아이템 배치하기 /* 예: 8번 아이템(.l-8)을 2열 1행 셀에 배치 */.l-8 { grid-column: 2 / 3; /* 2번 열 라인에서 시작 ..

1. Fr 단위를 이용한 유연한 트랙 크기픽셀(px) 대신 fr(fraction) 단위를 쓰면 남는 공간을 손쉽게 분배예:→ 전체 가로 공간을 1:1:2 비율로 나눔.container { display: grid; grid-template-columns: 1fr 1fr 2fr;}동일 크기 열 만들기:이렇게 하면 브라우저 너비 변화에 따라 자동으로 열 너비가 조정됨.container { grid-template-columns: 1fr 1fr 1fr 1fr; /* 4개 열이 동일 비율 */}2. repeat() 함수로 코드 간결화반복되는 fr 값을 더 짧게 작성 가능예:.container { /* 1fr을 4번 반복 */ grid-template-columns: repeat(4, 1fr);}열 개수..

CSS Grid는 이차원(2D) 레이아웃을 위해 설계된 CSS 모듈로, 컨테이너를 행(row)과 열(column) 로 나누고 그 안에 아이템을 자유롭게 배치할 수 있게 해 줍니다.Flexbox가 1차원 레이아웃에 특화된 반면, Grid는 복잡한 그리드 구조를 더 적은 코드로 구현할 수 있어 UI 설계의 혁신을 가져왔습니다.핵심 용어Grid Container: display: grid 또는 inline-grid를 선언한 부모 요소Grid Items: 컨테이너의 직속 자식 요소들Grid Lines: 행과 열을 나누는 가상의 선, 1부터 열 개수+1, 행 개수+1까지 번호 매김Grid Cells: 교차하는 그리드 라인 사이의 사각 영역(셀)Grid Tracks: 하나의 행(row track) 또는 열(colu..

CSS Grid는 이차원(2D) 레이아웃을 위한 최신 CSS 모듈로, 단 몇 줄의 코드만으로도 복잡한 구조를 쉽게 구현할 수 있습니다.display: grid를 통해 그리드 컨테이너를 선언하고, grid-template-columns/grid-template-rows로 열과 행(track) 의 크기를 직접 설정합니다.또한 gap 속성으로 열·행 간격(gutter)을 일괄 지정할 수 있으며, column-gap과 row-gap을 통해 축별로 서로 다른 간격도 정의할 수 있습니다.1. Grid 컨테이너 선언하기.container { display: grid;}grid 또는 inline-grid 값을 주면 해당 요소가 그리드 컨테이너가 되고,그 직속 자식들이 그리드 아이템이 됩니다.이 선언만으로는 시각적 변..

이번 글에서는 flex 속성의 구성 요소(flex-grow, flex-shrink, flex-basis)를 이해하고, 실제로 아이템 크기를 유연하게 조절하는 방법을 알아봅니다.1. flex 속성의 구성과 기본값/* flex shorthand = flex-grow | flex-shrink | flex-basis */.element { /* 기본값 */ flex-grow: 0; /* 공간이 남아도 늘어나지 않음 */ flex-shrink: 1; /* 공간이 부족하면 줄어들 수 있음 */ flex-basis: auto;/* 콘텐츠 크기 기반으로 기본 크기 결정 */}flex-grow: 남는 공간을 얼마나 나눠 가질지 결정 (0‒∞)flex-shrink: 공간 부족 시 얼마나 줄어들지 결정 (0..