안녕하세요!
2025년 6월 12일, UI·UX 반응형 웹퍼블리셔 국비 수업 13일차 내용을 정리해보았습니다.
오늘은 반응형 레이아웃 설계에 자주 사용하는 `display: flex`의 기초 개념과 주요 속성들을 배웠습니다.
그리고 Flex & Grid 관련 실습 사이트 추천도 맨 아래에 있습니다!
---
13일차 학습내용
30강
## Flex
: flex`는 CSS에서 레이아웃을 가로 방향(주축 중심)으로 배치할 때 사용하는 속성이다.
: 기본적으로 자식 요소들이 한 줄로 나란히 정렬된다.
<!-- html -->
<div id="pond">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>/* CSS */
#pond {
width: 300px;
height: 300px;
background-color: green;
display: flex;
}: display: flex;를 부모에게 주면, 자식 요소들이 자동으로 가로로 정렬된다.
: 기본적으로 줄바꿈을 하지 않으며, 공간이 부족해도 옆으로 밀려난다.
## Flex-wrap(줄바꿈 허용하기)
<flex-wrap: nowrap;> : 줄바꿈 ❌ (기본값)
<flex-wrap: wrap;> : 공간이 부족하면 자동 줄바꿈
/* CSS */
#pond {
display: flex;
flex-wrap: wrap;
}: 여러 줄 정렬이 필요한 경우에는 반드시 <flex-wrap: wrap;>을 설정해야 한다.
## 높이/너비 제한하기
/* CSS */
body {
margin: 0;
}
.min-height-100vh {
min-height: 50vh;
}
.box-1 {
background-color: gray;
}: %는 부모 크기가 없으면 작동이 어려우므로, vh, vw 단위를 사용하는 것이 좋다.
---
## 속성 비교
| 속성 | 설명 | 단위 |
| min-height | 최소 높이 | vh (뷰포트 높이) |
| max-height | 최대 높이 | vh, px |
| min-width | 최소 너비 | vw |
| max-width | 최대 너비 | vw, px |
## justify-content(주 축 정렬)
| 속성 값 | 설명 |
| flex-start | 왼쪽 정렬 (기본값) |
| flex-end | 오른쪽 정렬 |
| center | 중앙 정렬 |
| space-between | 아이템 사이 공간 균등 |
| space-around | 아이템 주변 공간 균등 |
/* CSS */
#pond {
display: flex;
justify-content: center;
}: <justify-content>는 가로 방향 정렬에서만 사용된다.
: 반드시 <display: flex;>가 선언된 요소에서만 작동한다.
## align-items (교차 축 정렬)
: 세로 방향 정렬을 할 때 사용한다.
| 속성 값 | 설명 |
| flex-start | 위 정렬 |
| flex-end | 아래 정렬 |
| center | 세로 가운데 정렬 |
| stretch | 높이를 꽉 채움 (기본값) |
## align-self(자식 요소 개별 정렬)
: align-self는 특정 자식 요소 하나만 따로 정렬할 때 사용한다.
/* CSS */
.box-1 > div:first-child {
align-self: flex-start;
}## flex-grow(요소 크기 비율)
: flex-grow는 남은 공간을 얼마나 차지할지 비율을 지정한다.
: 숫자가 클수록 더 많이 차지한다.
: 기본값은 0 (남은 공간을 차지하지 않음)
/* CSS */
.item {
flex-grow: 1;
}
> 숫자 그 자체보다 다른 요소들과의 비율 차이가 중요하다.
---
마무리
오늘은 flex를 활용한 레이아웃 구성법과 줄바꿈, 정렬, 크기 조절 등 반응형 디자인의 핵심 개념들을 배웠습니다.
예제 문제를 함께 풀어보면서, 레이아웃을 직접 설계할 수 있는 코딩 방식도 익히게 되었어요.
여전히 어렵지만 재미기도 한… 그런 하루였슴당
복습 완료! 끝-
함께 해보면 좋은 실습 사이트 모음 (Flex & Grid 연습용)
오늘 배운 flex 레이아웃과 함께, 직접 체험해보며 개념을 확실히 익힐 수 있는 추천 사이트들을 소개합니다!
1. Flex Froggy
귀여운 개구리를 연못 위로 정렬하면서 flex의 개념을 배울 수 있는 게임형 튜토리얼입니다.
- justify-content, align-items 등 flex의 핵심 속성을 게임으로 익힐 수 있어요.
- 단계별로 진행되어서 초보자에게 아주 추천!
- [사이트] 보기
2. Flex Defense
적의 공격을 막기 위해 방어선을 구성하는 게임!
flexbox로 포지션을 조정하며 즐겁게 실습할 수 있습니다.
- 실전처럼 요소의 위치를 조정하는 실습 중심 게임
- 스토리 요소와 시각적 효과가 강해서 몰입감 최고!
- [사이트] 보기
3. Flexbox Playground
다양한 flex 속성을 바로 적용해보며 실시간으로 결과를 확인할 수 있는 시각화 도구입니다.
- flex-grow, flex-wrap, order 등을 직접 바꿔보면서 결과 확인 가능
- 정답이 없는 상황에서 실제 UI 설계처럼 연습 가능
- [사이트] 보기
4. Grid Garden
이번엔 CSS Grid를 채소밭처럼 가꿔보세요!
grid-row, grid-column을 자연스럽게 익힐 수 있는 게임형 튜토리얼입니다.
- display: grid의 기초부터 연습 가능
- Flex에 이어 Grid도 비교하며 학습하면 더욱 탄탄한 실력 확보!
- [사이트] 보기
저도 블로그에 기록하며 위 사이트들로 복습 중인데, 게임처럼 재미있게 배우는 게 가능해서 정말 추천드립니다!