현대 CSS의 스택 레이아웃 | Chris Ferdinandi

분야 HTML & CSS
1

Kelp UI의 Stack 레이아웃 패턴

Kelp UI에서는 대부분의 요소에 기본적으로 여백이 적용되어 있어, 마진이나 패딩을 걱정하지 않고 콘텐츠를 작성할 수 있습니다. 하지만 때로는 요소 간 간격을 더 정밀하게 제어해야 할 때가 있는데, 특히 폼 필드 사이의 간격을 일정하게 유지하고 싶을 때가 그렇습니다.

Stack 레이아웃 구현:

<form class="stack">
  <div>
    <label for="username">Username</label>
    <input type="text" id="username">
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" id="password">
  </div>
  <button>Login</button>
</form>

CSS 구현:

  1. 자식 요소의 마진을 제거하여 직접 제어
  2. Flexbox의 flex-direction: column으로 수직 레이아웃 생성
  3. --gap CSS 변수로 간격 조정 가능
.stack > * {
  margin: 0;
}

.stack {
  --gap: 1em;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

이 패턴은 일관된 수직 간격이 필요한 UI 요소들을 배치할 때 매우 유용합니다. gap 속성과 CSS 변수를 활용하여 간격을 쉽게 조정할 수 있다는 것이 특징입니다.