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..

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 값을 주면 해당 요소가 그리드 컨테이너가 되고,그 직속 자식들이 그리드 아이템이 됩니다.이 선언만으로는 시각적 변..

안녕하세요! 이번 포스팅에서는 웹 디자인과 개발의 핵심 중 하나인 "레이아웃(Layout)" 에 대해 다뤄볼게요. HTML, CSS를 다루는 프론트엔드 개발자라면 꼭 알고 있어야 할 내용입니다 😊🧱 레이아웃이란?웹사이트에서 텍스트, 이미지, 버튼 등 콘텐츠들이 어떻게 배치되어 있는가를 의미해요.레이아웃은 시각적인 구조를 제공하고, 사용자에게 정보를 더 쉽게 이해하게 해주는 역할을 하죠.예를 들어, 모든 콘텐츠가 그냥 위에서 아래로 쭉 나열되어 있다면 얼마나 지루하고 보기 힘들까요?📂 레이아웃의 종류레이아웃은 크게 두 가지로 나눌 수 있어요:페이지 레이아웃전체 페이지 구조 (예: 헤더, 본문, 푸터 등)컴포넌트 레이아웃버튼, 카드, 폼 등 개별 구성요소 내부의 콘텐츠 배치이 두 가지 모두 효율적으로 ..