jonbeo 님의 블로그

CSS Grid는 단순히 열을 나열하는 것뿐 아니라상황에 따라 자동으로 조정되는 반응형 레이아웃을 만들 수 있는고급 함수들도 제공합니다.이번 포스팅에서는 가장 많이 쓰이는 4가지 키워드를 정리해볼게요:repeat()minmax()auto-fillauto-fit ✅ 1. repeat()grid-template-columns: repeat(3, 1fr); → 1fr 1fr 1fr을 간단하게 줄인 형태예요.반복되는 패턴을 간단하게 작성할 수 있어요. ✅ 2. minmax()grid-template-columns: repeat(3, minmax(200px, 1fr)); → 각 열의 최소 너비는 200px, 최대는 남은 공간만큼→ 창 크기에 따라 유연하게 반응하는 열을 만들 수 있어요! ✅ 3. auto-fill..

Flexbox로 정렬을 하다 보면,가로 정렬은 잘 되는데 왜 세로 정렬은 자꾸 안 맞지?라고 생각한 적 한 번쯤 있으시죠?그럴 땐 주축이 아닌 교차축 정렬, 즉 align-items와 align-self를 확인해봐야 해요.이 두 속성이 Flexbox에서 세로 방향 정렬을 담당합니다.이번 포스팅에서는 이 두 속성의 차이와 활용법을 쉽게 정리해볼게요! ✅ align-items란?align-items는 모든 Flex 아이템들의 세로 정렬(교차축 정렬) 방식을 한 번에 지정해주는 속성이에요..container { display: flex; align-items: center;} 📦 align-items의 속성값값설명stretch기본값. 아이템 높이를 컨테이너에 맞춰 늘림flex-start위쪽 정렬 (교차..