CSS가 프로그래밍 언어 수준의 표현력을 갖추기 시작했습니다. 2026년에 브라우저에 탑재된 CSS if() 조건 함수는 속성 값 내에서 직접 조건 분기를 수행할 수 있게 해주며, CSS Masonry Layout은 Pinterest 스타일의 벽돌 배치를 네이티브로 지원합니다. JavaScript 의존도를 대폭 줄이는 이 두 기능의 실전 사용법을 자세히 알아봅니다.

CSS if() 조건 함수

CSS if()는 속성 값 레벨에서 조건 분기를 수행하는 함수입니다. CSS 커스텀 프로퍼티(변수)와 결합하면 JavaScript 없이도 동적인 스타일 전환이 가능합니다.

기본 문법

/* if(조건: 참일 때 값; else: 거짓일 때 값) */

/* 커스텀 프로퍼티 기반 조건 */
:root {
  --theme: dark;
}

.card {
  background: if(
    style(--theme: dark): #1a1a2e;
    else: #ffffff
  );
  color: if(
    style(--theme: dark): #e0e0e0;
    else: #1a1a2e
  );
  border: 1px solid if(
    style(--theme: dark): #333;
    else: #e2e8f0
  );
}

미디어 쿼리 조건

/* 미디어 쿼리를 if() 안에서 직접 사용 */
.container {
  padding: if(
    media(width >= 768px): 2rem;
    else: 1rem
  );

  display: if(
    media(width >= 1024px): grid;
    else: flex
  );

  grid-template-columns: if(
    media(width >= 1024px): repeat(3, 1fr);
    else: 1fr
  );
}

supports 조건

/* 기능 지원 여부에 따른 분기 */
.layout {
  display: if(
    supports(display: grid): grid;
    else: flex
  );

  gap: if(
    supports(gap: 1rem): 1rem;
    else: 0  /* gap 미지원 시 margin으로 대체 필요 */
  );
}

다중 조건 (체이닝)

/* 여러 조건 순차 평가 */
:root {
  --density: compact;
}

.list-item {
  padding: if(
    style(--density: compact): 4px 8px;
    style(--density: comfortable): 12px 16px;
    style(--density: spacious): 20px 24px;
    else: 8px 12px
  );

  font-size: if(
    style(--density: compact): 13px;
    style(--density: comfortable): 15px;
    else: 16px
  );
}

실전: 다크모드 컴포넌트

/* JavaScript 없이 다크모드 토글 */
.theme-toggle {
  /* 체크박스로 테마 전환 */
  &:has(input:checked) {
    --theme: dark;
  }
}

.card {
  --bg: if(
    style(--theme: dark): #1e293b;
    else: #ffffff
  );
  --text: if(
    style(--theme: dark): #f1f5f9;
    else: #0f172a
  );
  --shadow: if(
    style(--theme: dark): 0 4px 20px rgba(0, 0, 0, 0.4);
    else: 0 4px 20px rgba(0, 0, 0, 0.08)
  );

  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

CSS Masonry Layout

Pinterest 스타일의 벽돌형 레이아웃을 CSS Grid의 확장으로 네이티브 지원합니다. 기존에는 Masonry.js 같은 라이브러리가 필수였습니다.

기본 사용법

/* 세로 방향 Masonry */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry; /* 핵심! */
  gap: 16px;
}

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

가로 방향 Masonry

/* 가로 방향 Masonry (행이 고정, 열이 가변) */
.horizontal-masonry {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: masonry;
  gap: 12px;
}

반응형 Masonry 갤러리

<!-- HTML -->
<div class="photo-grid">
  <div class="photo" style="--h: 300px"><img src="photo1.jpg" alt=""></div>
  <div class="photo" style="--h: 200px"><img src="photo2.jpg" alt=""></div>
  <div class="photo" style="--h: 400px"><img src="photo3.jpg" alt=""></div>
  <div class="photo" style="--h: 250px"><img src="photo4.jpg" alt=""></div>
  <!-- ... -->
</div>

.photo-grid {
  display: grid;
  grid-template-rows: masonry;
  gap: 16px;

  /* 반응형 컬럼 */
  grid-template-columns: repeat(
    auto-fill, minmax(250px, 1fr)
  );
}

.photo {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

Masonry 정렬 제어

/* masonry-auto-flow: 아이템 배치 순서 제어 */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  gap: 16px;

  /* next: 순서대로 배치 (기본) */
  masonry-auto-flow: next;

  /* definite-first: grid-row/column 지정된 아이템 우선 */
  masonry-auto-flow: definite-first;

  /* ordered: DOM 순서 유지 */
  masonry-auto-flow: ordered;
}

/* 특정 아이템 2열 차지 */
.gallery-item.featured {
  grid-column: span 2;
}

/* 특정 위치에 고정 */
.gallery-item.pinned {
  grid-column: 1;
}

두 기능 결합: 적응형 갤러리

:root {
  --layout: masonry;
}

.adaptive-gallery {
  display: grid;
  gap: if(
    media(width >= 768px): 20px;
    else: 10px
  );

  grid-template-columns: if(
    media(width >= 1200px): repeat(4, 1fr);
    media(width >= 768px): repeat(3, 1fr);
    media(width >= 480px): repeat(2, 1fr);
    else: 1fr
  );

  /* 레이아웃 모드 전환 */
  grid-template-rows: if(
    style(--layout: masonry): masonry;
    else: auto
  );
}

/* 폴백 */
@supports not (grid-template-rows: masonry) {
  .adaptive-gallery {
    grid-auto-rows: 200px;
  }
  .adaptive-gallery img {
    height: 100%;
    object-fit: cover;
  }
}

CSS if() 함수와 Masonry Layout은 2026년 CSS가 얼마나 강력해졌는지를 보여주는 대표적인 기능입니다. if()는 JavaScript에 의존하던 조건부 스타일링을 CSS 네이티브로 가져왔고, Masonry는 가장 많이 사용되던 레이아웃 라이브러리를 대체합니다. 두 기능을 적극 활용하면 코드량을 줄이면서도 더 나은 성능과 접근성을 확보할 수 있습니다.