스태킹 요소

최신 CSS를 사용하면 많은 코드 없이 요소를 서로 위에 쌓기가 매우 쉽고 더 많은 기능으로 쉽게 확장할 수 있습니다.

CSS 그리드

CSS Grid를 사용하면 사용자 정의 가능한 그리드를 만들고 해당 항목을 특정 행과 열에 할당할 수 있습니다. 이것을 활용하여 요소를 쌓을 것입니다.

다음 카드를 예로 들어 보겠습니다.



먼저 카드의 컨테이너를 그리드 컨테이너로 만듭니다.

.cards {
    display: grid;
}

다음으로 모든 카드를 동일한 열과 행에 명시적으로 설정합니다.

.card {
    grid-row: 1;
    grid-column: 1;
}

그리고 그것이 무엇인지 맞춰보세요!

부우우우우우! 스타일을 추가하는 것이 얼마나 쉬운지 정말 간단하게 보여드리겠습니다.

약간의 오프셋

사용자가 카드가 쌓인 것을 볼 수 있도록 약간의 오프셋을 추가해 보겠습니다. 이 예에서 우리는 어려운 길을 갈 것입니다. 우리는 얼마나 많은 요소(카드)를 쌓아야 할지 모릅니다. 따라서 CSS를 사용할 수 없으며 오프셋을 동적으로 추가하기 위해 약간의 JavaScript를 추가해야 합니다.

카드의 CSS를 업데이트합시다

.card {
    grid-row: 1;
    grid-column: 1;

    // new lines
  position: relative;
  top:  var(--_card-offset);
}

그리고 JavaScript를 사용하여 CSS var를 업데이트합니다.

const cards = document.querySelectorAll(".card");
const OFFSET_VALUE: 30;

cards.forEach((card, i) => {
  card.style.setProperty(`--_card-offset`, `${OFFSET_VALUE * i}px`);
})

간단히 말해서 각 카드는 이전 카드보다 30px 낮습니다.

이제 예를 들어 카드가 호버링될 때마다 카드의 Z-인덱스를 더 높은 값으로 설정하여 맨 앞에 오도록 할 수 있습니다.

.card:hover {
    z-index: 2;
}

이와 동일한 패턴을 따르면 스태킹 요소의 스타일과 기능을 매우 쉽게 확장할 수 있습니다.

고맙습니다!

Demo

Checkout my blog