로그인 · 가입
KREN
← 홈페이지 5강 목록으로
📐
EPISODE 05
1차원 레이아웃의 표준 · 2차원 레이아웃의 강자 · @media · Mobile-First · rem · clamp()

Flexbox · CSS Grid · 반응형 웹 디자인

1차원(가로 또는 세로) 레이아웃을 손쉽게 만드는 Flexbox — flex-direction, justify-content, align-items, gap, flex-wrap, flex 단축속성, order, align-self까지. 2차원(가로+세로 동시) 레이아웃을 만드는 CSS Grid — grid-template-columns/rows, fr 단위, grid-column/row, grid-template-areas, auto-fill/fit까지. 뷰포트 메타 태그, @media 쿼리, Mobile-First 접근, rem/em/vw 단위, 그리고 clamp()로 단계 없이 부드럽게 변하는 유동 크기를 익힙니다.

CSSFlexbox레이아웃Grid반응형media query
소요 시간
⏱ 60분 + 60분 + 30~60분
난이도
📊 초보
선수 조건
🎯 css-04
결과물
네비게이션 바, 카드 3열 배치, 완전 중앙 정렬 / 잡지 레이아웃, 대시보드, 반응형 카드 그리드 / 모바일·태블릿·PC 모두 자연스러운 페이지

이 강의에서 배우는 것

  • 1Flex Container와 Flex Item의 관계를 이해한다
  • 2flex-direction으로 주축 방향을 바꾼다
  • 3justify-content / align-items로 두 축 정렬을 한다
  • 4flex-wrap, gap으로 줄바꿈과 간격을 조절한다
  • 5flex: 1, flex: 0 0 200px 같은 단축속성을 사용한다
  • 6grid-template-columns/rows를 정의한다
  • 7fr 단위와 minmax(), auto-fill/auto-fit을 사용한다
  • 8grid-column/row로 아이템 배치를 제어한다
  • 9grid-template-areas로 시각적 레이아웃을 정의한다
  • 10Flexbox와 Grid를 상황에 맞게 선택한다
  • 11viewport 메타 태그의 역할을 안다
  • 12@media (min-width: ...) 쿼리를 작성한다
  • 13Mobile-First 방식으로 스타일을 점진적으로 확장한다
  • 14px·%·em·rem·vw·vh를 적재적소에 쓴다
  • 15clamp()로 부드러운 유동 크기를 만든다

Flexbox

1차원(가로 또는 세로) 레이아웃을 손쉽게 만드는 Flexbox — flex-direction, justify-content, align-items, gap, flex-wrap, flex 단축속성, order, align-self까지.

1. 기본 개념

css
.container {
  display: flex;
}
  • Flex Container: display: flex가 적용된 부모
  • Flex Item: Container의 직계 자식들

2. flex-direction

css
flex-direction: row;            /* 기본: 왼→오 */
flex-direction: row-reverse;
flex-direction: column;         /* 위→아래 */
flex-direction: column-reverse;

3. justify-content (주축)

css
justify-content: flex-start;    /* 기본 */
justify-content: flex-end;
justify-content: center;
justify-content: space-between; /* 첫/끝 고정, 사이 균등 */
justify-content: space-around;  /* 양쪽 균등 */
justify-content: space-evenly;  /* 모든 간격 동일 */

4. align-items (교차축)

css
align-items: stretch;     /* 기본: 꽉 채움 */
align-items: flex-start;
align-items: flex-end;
align-items: center;      /* 수직 중앙 정렬 */
align-items: baseline;

5. flex-wrap & gap

css
.container {
  flex-wrap: nowrap;       /* 기본 */
  flex-wrap: wrap;         /* 넘치면 다음 줄로 */

  gap: 16px;               /* 행/열 동일 */
  gap: 20px 10px;          /* 행 20, 열 10 */
}

6. Flex Item 속성

css
.item {
  flex-grow: 1;       /* 남은 공간 분배 비율 */
  flex-shrink: 1;     /* 부족할 때 줄어드는 비율 */
  flex-basis: auto;   /* 기본 크기 */

  flex: 1;            /* 1 1 0 단축 */
  flex: 0 0 200px;    /* 고정 200px */

  order: 2;           /* 표시 순서 */
  align-self: center; /* 이 아이템만 따로 정렬 */
}

7. 자주 쓰는 패턴

완전 중앙 정렬

css
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

네비게이션 바

css
.navbar {
  display: flex;
  justify-content: space-between;  /* 로고 왼쪽, 메뉴 오른쪽 */
  align-items: center;
  padding: 0 20px;
}

CSS Grid

2차원(가로+세로 동시) 레이아웃을 만드는 CSS Grid — grid-template-columns/rows, fr 단위, grid-column/row, grid-template-areas, auto-fill/fit까지.

1. Grid 기본

css
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;        /* 고정 + 균등 2열 */
  grid-template-columns: repeat(3, 1fr);        /* 3열 균등 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* 반응형 */

  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

2. fr 단위

fr은 남은 공간의 비율입니다.

css
grid-template-columns: 1fr 2fr 1fr;
/* 4등분: 첫 1/4, 둘째 2/4, 셋째 1/4 */

3. 아이템 배치

css
.item {
  grid-column: 1 / 3;    /* 1번 라인~3번 라인 (2열 차지) */
  grid-column: 1 / -1;   /* 전체 너비 */
  grid-column: span 2;   /* 현재 위치에서 2열 차지 */

  grid-row: 1 / 3;       /* 2행 차지 */
  grid-row: span 2;
}

4. grid-template-areas

이름으로 레이아웃을 시각적으로 정의합니다.

css
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

5. auto-fill vs auto-fit

css
/* auto-fill: 가능한 한 많은 열, 빈 열 생길 수 있음 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: 아이템에 맞게 채움, 빈 열은 0으로 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

6. 정렬

css
.container {
  justify-items: start | center | end | stretch;  /* 셀 가로 정렬 */
  align-items:   start | center | end | stretch;  /* 셀 세로 정렬 */
  justify-content: start | center | space-between; /* 그리드 가로 */
  align-content:   start | center | space-between; /* 그리드 세로 */
}

.item {
  justify-self: center;  /* 이 아이템만 가로 중앙 */
  align-self: end;
}

7. Flexbox vs Grid

상황권장
한 방향만 정렬Flexbox
두 방향 동시 제어Grid
아이템 크기가 불규칙Flexbox
정해진 행/열 레이아웃Grid
네비게이션, 버튼 그룹Flexbox
페이지 전체 레이아웃, 대시보드Grid
💡

실무에서는 Grid로 전체 레이아웃을 잡고, 내부 컴포넌트는 Flexbox로 구현하는 패턴이 많습니다.

반응형 웹 디자인

뷰포트 메타 태그, @media 쿼리, Mobile-First 접근, rem/em/vw 단위, 그리고 clamp()로 단계 없이 부드럽게 변하는 유동 크기를 익힙니다.

1. viewport 메타 태그

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 태그 없이는 @media 쿼리가 제대로 동작하지 않습니다.

2. @media 쿼리

css
/* 기본: 모바일 */
.container { padding: 16px; font-size: 14px; }

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
  .container { padding: 24px; font-size: 16px; }
}

/* PC (1024px 이상) */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

3. Mobile-First (권장)

css
/* 기본 = 모바일 */
.cards { display: block; }

/* 태블릿 */
@media (min-width: 768px) {
  .cards { display: flex; flex-wrap: wrap; }
}

/* PC */
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
💡

Mobile-First가 성능과 접근성 면에서 권장됩니다.

4. 주요 Breakpoint

이름너비대상
소형~ 480px작은 스마트폰
모바일480px ~ 768px일반 스마트폰
태블릿768px ~ 1024px태블릿
데스크탑1024px ~PC

5. 반응형 단위

단위설명예시
px고정 픽셀font-size: 16px
%부모 기준 비율width: 50%
em현재 요소 font-size 기준padding: 1.5em
rem루트 font-size 기준font-size: 1rem
vw뷰포트 너비 %width: 100vw
vh뷰포트 높이 %height: 100vh
css
html { font-size: 16px; }
h1 { font-size: 2rem; }   /* 32px */
p  { font-size: 1rem; }   /* 16px */

6. clamp() — 유동 크기

css
h1 {
  /* 최소 1.5rem, 이상적인 5vw, 최대 3rem */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.container {
  width: clamp(300px, 90%, 1200px);
}

clamp(최솟값, 이상적값, 최댓값)으로 단계 없이 부드럽게 변하는 크기를 만들 수 있습니다.

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗

댓글 0

아직 댓글이 없습니다. 첫 댓글을 남겨 주세요.

댓글은 회원만 쓸 수 있습니다.

광고·욕설·비방·개인정보·불법 내용이 담긴 댓글은 숨기거나 지웁니다. 댓글은 닉네임과 함께 공개됩니다. 개인정보처리방침