Split View: 모던 CSS 완전 정복 2025: Flexbox, Grid, Container Queries, Tailwind CSS까지

/* Native CSS Nesting */
.card {
  background: white;
  border-radius: 8px;

  & .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  & .body {
    padding: 1rem;

    & p {
      line-height: 1.6;
    }
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (width >= 768px) {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* Style cards differently when they contain images */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* Disable submit when form has invalid inputs */
form:has(:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* Style label when checkbox is checked */
input:checked + label {
  color: green;
}

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

/* Declare layer order (later = higher priority) */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.6; }
}

@layer components {
  .btn { padding: 0.5rem 1rem; border-radius: 4px; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }
}

.flex-container {
  display: flex;

  /* Direction */
  flex-direction: row;          /* Default: horizontal */
  flex-direction: column;       /* Vertical */
  flex-direction: row-reverse;  /* Reverse horizontal */

  /* Wrapping */
  flex-wrap: nowrap;    /* Default: single line */
  flex-wrap: wrap;      /* Allow multiple lines */

  /* Shorthand */
  flex-flow: row wrap;
}

.flex-container {
  /* Main axis alignment */
  justify-content: flex-start;    /* Start */
  justify-content: center;        /* Center */
  justify-content: space-between; /* Ends + equal spacing */
  justify-content: space-around;  /* Equal spacing (half at edges) */
  justify-content: space-evenly;  /* Perfectly equal spacing */

  /* Cross axis alignment */
  align-items: stretch;     /* Default: stretch */
  align-items: center;      /* Center */
  align-items: flex-start;  /* Start */
  align-items: baseline;    /* Text baseline */

  /* Multi-line cross axis */
  align-content: center;
  align-content: space-between;

  /* Gaps */
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

.flex-item {
  /* Growth ratio (distributes remaining space) */
  flex-grow: 1;

  /* Shrink ratio */
  flex-shrink: 0;  /* Prevent shrinking */

  /* Base size */
  flex-basis: 200px;

  /* Shorthand: grow shrink basis */
  flex: 1 0 200px;
  flex: 1;         /* = 1 1 0% */
  flex: auto;      /* = 1 1 auto */
  flex: none;      /* = 0 0 auto */

  /* Individual alignment */
  align-self: center;

  /* Order */
  order: -1;  /* Move to front */
}

/* Pattern 1: Perfect centering */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Pattern 2: Sticky Footer */
.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-layout main {
  flex: 1;
}

/* Pattern 3: Equal-height cards */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card-grid .card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}
.card-grid .card .content {
  flex: 1;
}

/* Pattern 4: Navigation bar */
.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar .logo { margin-right: auto; }
.navbar .actions { display: flex; gap: 0.5rem; }

.grid-container {
  display: grid;

  /* Column definitions */
  grid-template-columns: 200px 1fr 200px;       /* Fixed-fluid-fixed */
  grid-template-columns: repeat(3, 1fr);         /* 3 equal parts */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* Responsive */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));   /* Responsive + stretch */

  /* Row definitions */
  grid-template-rows: auto 1fr auto;

  /* Gaps */
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Single column on mobile */
@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

/* auto-fill: Keeps empty tracks (creates empty columns at minimum size) */
.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit: Collapses empty tracks (items stretch to fill space) */
.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child-grid {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;  /* Inherit parent column tracks */
  gap: 1rem;
}

/* Perfect responsive card grid - no media queries */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

/* Grid + Flexbox combination */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}

.dashboard .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.dashboard .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Declare container */
.widget-container {
  container-type: inline-size;  /* Query based on inline axis (usually width) */
  container-name: widget;       /* Optional name */
}

/* Container query */
@container widget (min-width: 500px) {
  .widget {
    flex-direction: row;
  }
}

@container widget (max-width: 499px) {
  .widget {
    flex-direction: column;
  }
}

/* inline-size: Query only inline axis (usually width) */
.container { container-type: inline-size; }

/* size: Query both width and height (more expensive) */
.container { container-type: size; }

/* normal: No query capability, name only (for style queries) */
.container { container-type: normal; }

/* @media: Viewport-based - entire screen width */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

/* @container: Parent container-based - reusable */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

.widget {
  /* cqw: 1% of container width */
  font-size: clamp(0.875rem, 3cqw, 1.25rem);

  /* cqh: 1% of container height */
  padding: 2cqw;

  /* cqi: 1% of container inline size */
  /* cqb: 1% of container block size */
  margin-inline: 5cqi;
}

/* Change form border when text input is focused */
form:has(input[type="text"]:focus) {
  border-color: blue;
}

/* Empty state handling */
.list:has(> :first-child) {
  /* Applied only when list has children */
}
.list:not(:has(> *)) {
  /* When list is empty */
  display: grid;
  place-items: center;
}
.list:not(:has(> *))::after {
  content: "No items found";
}

/* Dark mode toggle with pure CSS */
html:has(#dark-mode:checked) {
  color-scheme: dark;
  --bg: #1a1a1a;
  --text: #e0e0e0;
}

/* :is() - inherits highest specificity from arguments */
:is(h1, h2, h3, h4) {
  line-height: 1.2;
  margin-block: 1em 0.5em;
}

/* :where() - specificity always 0 (easily overridden) */
:where(h1, h2, h3, h4) {
  line-height: 1.2;
}

/* Practical: use :where() for reset styles */
:where(ul, ol) { list-style: none; padding: 0; }
:where(a) { color: inherit; text-decoration: none; }

/* Simplify deeply nested selectors */
:is(.article, .blog-post, .docs) :is(h1, h2, h3) {
  color: var(--heading-color);
}

/* Border on all items except last */
.list-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

/* Combine multiple conditions */
input:not([type="submit"]):not([type="button"]) {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

/* Exclude disabled items */
.nav-link:not(.disabled):hover {
  background: #f0f0f0;
}

.card {
  background: white;
  border-radius: 8px;

  /* Child selection */
  & .title { font-weight: bold; }

  /* Modifiers */
  &.featured { border: 2px solid gold; }
  &:hover { transform: translateY(-2px); }
  &::before { content: ""; }

  /* Nested media queries */
  @media (prefers-color-scheme: dark) {
    background: #2a2a2a;
    color: white;
  }

  /* Nested container queries */
  @container card (min-width: 400px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Default View Transition styles */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* Assign names to individual elements */
.hero-image {
  view-transition-name: hero;
}

/* Customize transition for that element */
::view-transition-old(hero) {
  animation: scale-down 0.4s ease-out;
}
::view-transition-new(hero) {
  animation: scale-up 0.4s ease-in;
}

@keyframes scale-down {
  from { transform: scale(1); }
  to { transform: scale(0.8); opacity: 0; }
}
@keyframes scale-up {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); }
}

// Trigger View Transition from JavaScript
document.startViewTransition(() => {
  updateDOM(); // Perform DOM changes
});

/* Scroll progress indicator */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  transform-origin: left;
  animation: grow-width linear;
  animation-timeline: scroll();
}

@keyframes grow-width {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Fade in when element enters viewport */
.fade-in-section {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

/* transition: Best for state changes (A to B) */
.button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

/* @keyframes: For complex multi-step animations */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-20px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-10px); }
}

.bounce-element {
  animation: bounce 1s ease-in-out infinite;
}

/* Properties using GPU compositing: transform, opacity */
.good-animation {
  /* Uses GPU composite layer - fast */
  transition: transform 0.3s, opacity 0.3s;
}

.bad-animation {
  /* Triggers reflow/repaint - slow */
  transition: width 0.3s, height 0.3s, top 0.3s;
}

/* Hint to browser with will-change */
.will-animate {
  will-change: transform;
}
/* Warning: overuse wastes memory. Use only right before animation */

/* app.css - Configure with CSS instead of tailwind.config.js */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-family-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

<!-- Declare container -->
<div class="@container">
  <!-- Container size-based responsive -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div class="p-4">Item 1</div>
    <div class="p-4">Item 2</div>
    <div class="p-4">Item 3</div>
  </div>
</div>

<!-- New gradients -->
<div class="bg-linear-to-r from-blue-500 to-purple-500">
  Gradient background
</div>

<!-- 3D transforms -->
<div class="rotate-x-12 rotate-y-6 perspective-800">
  3D effect
</div>

<!-- New variant combinations -->
<button class="hover:not-disabled:bg-blue-600 disabled:opacity-50">
  Smart button
</button>

<!-- Improved group variants -->
<div class="group">
  <p class="group-has-[img]:text-sm">
    Smaller text when group has image
  </p>
</div>

# Auto-migrate from v3 to v4
npx @tailwindcss/upgrade

// Panda CSS - Zero-runtime
import { css } from '../styled-system/css'

function Button() {
  return (
    <button className={css({
      bg: 'blue.500',
      color: 'white',
      padding: '8px 16px',
      borderRadius: 'md',
      _hover: { bg: 'blue.600' }
    })}>
      Click
    </button>
  )
}

// vanilla-extract - Build-time CSS
// styles.css.ts
import { style } from '@vanilla-extract/css'

export const button = style({
  background: 'blue',
  color: 'white',
  padding: '8px 16px',
  borderRadius: '4px',
  ':hover': {
    background: 'darkblue',
  },
})

/* Fluid font sizes with clamp() */
h1 {
  /* Min 2rem, max 4rem, fluid in between */
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
  line-height: clamp(1.5, 1.2 + 0.5vw, 1.8);
}

/* Fluid spacing */
.section {
  padding: clamp(1rem, 3vw, 3rem);
  gap: clamp(0.5rem, 2vw, 2rem);
}

/* Responsive images/videos that maintain aspect ratio */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square-avatar {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.card-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Physical properties (fixed direction) */
.old-way {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-left: 3px solid blue;
  width: 200px;
  height: 100px;
}

/* Logical properties (direction-adaptive) */
.new-way {
  margin-inline: 1rem;       /* Left+right (or right+left in RTL) */
  padding-block: 2rem;       /* Top+bottom */
  border-inline-start: 3px solid blue;  /* Start direction */
  inline-size: 200px;        /* Width */
  block-size: 100px;         /* Height */
}

<!-- Serve optimal images with srcset and sizes -->
<img
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  src="image-800.webp"
  alt="Responsive image"
  loading="lazy"
  decoding="async"
/>

/* Block */
.card {}

/* Element (part of block) */
.card__title {}
.card__body {}
.card__footer {}

/* Modifier (variation) */
.card--featured {}
.card--compact {}
.card__title--large {}

<!-- Tailwind style: compose utility classes -->
<div class="flex items-center gap-4 p-4 rounded-lg bg-white shadow-md
            hover:shadow-lg transition-shadow">
  <img class="w-12 h-12 rounded-full object-cover" src="..." alt="..." />
  <div>
    <h3 class="text-lg font-semibold text-gray-900">Username</h3>
    <p class="text-sm text-gray-500">Description text</p>
  </div>
</div>

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
}

.primary {
  background: #3b82f6;
  color: white;
}

.secondary {
  background: #e5e7eb;
  color: #374151;
}

// Automatically generates unique class names
import styles from './Button.module.css'

function Button({ variant = 'primary', children }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  )
}