sliver__

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

안녕하세요! 이번 포스팅에서는 Flexbox를 실습하며 아이템 정렬과 간격 주는 방법을 좀 더 깊이 배워보겠습니다. 1. 기본 정렬 복습justify-content: 주 축(main axis, 기본 가로) 방향 정렬center → 가로 중앙flex-start → 왼쪽 정렬 (기본값)space-between 등 다양한 옵션 존재align-items: 교차 축(cross axis, 기본 세로) 방향 정렬center → 세로 중앙flex-start → 위쪽 정렬stretch → 컨테이너 높이에 맞춰 늘이기 (기본값).container { display: flex; justify-content: flex-start; /* 수평 정렬 */ align-items: center; /* 수직 중..

Flexbox는 **일차원 레이아웃(one-dimensional layout)**을 위해 설계된 관련 CSS 속성들의 집합으로, 컨테이너 내부의 빈 공간을 자식 요소들이 자동으로 분배하도록 돕습니다.원래 핵심 목표는 개발자가 일일이 너비나 마진을 계산하지 않아도 되도록, 브라우저가 컨테이너 안의 빈 공간을 자식 요소들에 알아서 나눠주게 하는 것이었습니다.또한 Flexbox는 **가로·세로 정렬(horizontal & vertical alignment)**을 매우 간단하게 처리할 수 있는데, 이는 기존 CSS에서는 까다로웠던 수직 중앙 정렬이나 동일 높이 컬럼(equal-height columns) 문제를 손쉽게 해결해 줍니다.결과적으로 구식 float 기반 레이아웃을 대체하고, 더 간결하고 유지보수하기 ..

안녕하세요 여러분! 이번 포스팅에서는 Flexbox를 실습하며 기본 개념을 익히는 방법을 알아보겠습니다. 이미 강의에서 여러 차례 언급했던 Flexbox를 드디어 코드에 적용해볼 차례인데요, 복잡한 프로젝트 환경이 아니라 간단한 형태로 따로 떼어놓고 실습해볼 거예요.Flex 컨테이너와 아이템 이해하기1. Flexbox 적용컨테이너 설정이 한 줄만으로도 자식 요소들이 가로로 나란히 배치됩니다..container { display: flex;}용어 정리Flex Container: display: flex를 준 부모 요소Flex Items: 컨테이너 내부의 자식 요소들2. 기본 레이아웃각 아이템은 자신의 콘텐츠 크기만큼 너비를 차지높이는 기본적으로 컨테이너 내 가장 큰 아이템 기준(Stretch)컨테이너 배..

안녕하세요! 이번 포스팅에서는 사이드바에 패딩을 추가하다 생긴 박스 크기 붕괴 문제를 살펴보고, 이를 box‑sizing: border-box 로 한 방에 해결하는 방법을 알아볼게요. ✨1️⃣ 문제 상황: 패딩을 추가하자!사이드바(aside)에 padding: 40px;을 넣자원래 width: 300px;이던 박스가 총 380px로 커져서 레이아웃 밖으로 튀어나옴원인: 기본 박스 모델(content-box)은 지정 너비에 패딩/보더를 “추가”하기 때문2️⃣ 해결책: box-sizing: border-box개념border-box 모드에서는 padding과 border를 포함해 전체 박스 크기를 계산지정한 너비(높이)가 “컨텐츠+패딩+보더” 모두를 아우르는 값이 됨코드 적용/* 전역 Reset 예시 */* ..