← 가이드 목록으로 ← Back to guides
🌐 HTML/CSS #2

CSS 고급 레이아웃과 애니메이션 완벽 가이드 Advanced CSS Layout & Animation Complete Guide

📖 약 15분 읽기 📖 15 min read 🏷️ Grid, Flexbox, Animation, Variables

기본 CSS를 넘어 현대 웹 레이아웃의 핵심인 Grid와 Flexbox 심화를 다룹니다. CSS 변수를 활용한 테마 시스템, 부드러운 애니메이션과 트랜지션, 그리고 반응형 디자인 패턴까지 배웁니다.

Beyond basic CSS, this covers Grid and Flexbox deep dive, the core of modern web layouts. Learn theme systems with CSS variables, smooth animations and transitions, and responsive design patterns.

CSS Grid 심화 CSS Grid Deep Dive

Grid는 2차원 레이아웃 시스템입니다. 복잡한 레이아웃도 직관적으로 구현할 수 있습니다.

Grid is a 2D layout system. Even complex layouts can be implemented intuitively.

/* 기본 Grid 컨테이너 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

/* 영역 이름으로 레이아웃 */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
/* Basic Grid container */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

/* Layout with area names */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

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

CSS 변수 (커스텀 속성) CSS Variables (Custom Properties)

CSS 변수로 일관된 디자인 시스템을 구축하고, 다크 모드 같은 테마 변경을 쉽게 구현할 수 있습니다.

Build consistent design systems with CSS variables and easily implement theme changes like dark mode.

/* 루트에 변수 정의 */
:root {
  --primary-color: #3b82f6;
  --bg-color: #ffffff;
  --text-color: #1f2937;
  --spacing-unit: 8px;
  --radius: 12px;
}

/* 다크 모드 */
[data-theme="dark"] {
  --bg-color: #0f172a;
  --text-color: #f1f5f9;
}

/* 변수 사용 */
.card {
  background: var(--bg-color);
  color: var(--text-color);
  padding: calc(var(--spacing-unit) * 3);
  border-radius: var(--radius);
}
/* Define variables at root */
:root {
  --primary-color: #3b82f6;
  --bg-color: #ffffff;
  --text-color: #1f2937;
  --spacing-unit: 8px;
  --radius: 12px;
}

/* Dark mode */
[data-theme="dark"] {
  --bg-color: #0f172a;
  --text-color: #f1f5f9;
}

/* Using variables */
.card {
  background: var(--bg-color);
  color: var(--text-color);
  padding: calc(var(--spacing-unit) * 3);
  border-radius: var(--radius);
}

CSS 애니메이션과 트랜지션 CSS Animations and Transitions

/* 트랜지션: 상태 변화에 반응 */
.button {
  background: var(--primary-color);
  transform: scale(1);
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 키프레임 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeIn 0.5s ease-out forwards;
}
/* Transition: React to state changes */
.button {
  background: var(--primary-color);
  transform: scale(1);
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Keyframe animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeIn 0.5s ease-out forwards;
}

반응형 디자인 패턴 Responsive Design Patterns

/* 컨테이너 쿼리 (최신 CSS) */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 20px;
  }
}

/* clamp()로 유동적 크기 */
.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* 미디어 쿼리 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
/* Container queries (modern CSS) */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 20px;
  }
}

/* Fluid sizing with clamp() */
.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Media queries */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

💡 CSS 타자 연습 팁 💡 CSS Typing Tips

display: grid, grid-template-columns, var(--), @keyframes 패턴을 자주 타이핑해보세요. 현대 CSS는 속성 이름이 길지만, 익숙해지면 빠르게 레이아웃을 구현할 수 있습니다.

Practice typing display: grid, grid-template-columns, var(--), @keyframes patterns often. Modern CSS has long property names, but once familiar, you can implement layouts quickly.

📊 Grid vs Flexbox 선택 기준 📊 When to Use Grid vs Flexbox

  • Grid: 2차원 레이아웃, 페이지 전체 구조, 명확한 행/열 필요 시
  • Grid: 2D layouts, page structure, when clear rows/columns needed
  • Flexbox: 1차원 정렬, 네비게이션, 카드 리스트, 동적 콘텐츠
  • Flexbox: 1D alignment, navigation, card lists, dynamic content
  • 둘을 조합해서 사용하면 가장 효과적!
  • Combining both is most effective!