[css] js없이 아코디언 쉽게 구현하기

학습자료 : https://youtu.be/B_n4YONte5A?si=4yAlNs_HN0EKuf87

CSS에서 height: auto로의 트랜지션은 오랫동안 골칫거리였다.

드롭다운이나 아코디언 UI를 만들 때 애니메이션 없이 갑자기 나타나거나 사라지는Element 때문에 JavaScript를 동원해야 했음

하지만 이제 JavaScript 없이도 height: auto 트랜지션을 구현할 수 있는 두 가지 놀라운 방법이 등장!

1. Flexbox 활용

이 방법은 트랜지션할 Element를 두 개의 div로 감싸는 방식.

• outer
  • div: display: flex를 적용하여 Flex 컨테이너로 만듬.
• inner
  • div: max-height: 0으로 초기화하고 overflow: hidden을 설정한 후,
  • max-height를 0에서 100%로 트랜지션.

CSS
.wrapper {
  display: flex;
}

.inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.wrapper.is-open .inner {
  max-height: 100%;
}`

<div class="wrapper">
  <div>
    <div class="inner">Expandable content</div>
  </div>
</div>`

장점: 내부 Element는 부드럽게 애니메이션됨

단점:

• 외부 컨테이너는 즉시 확장/축소되어 부드러운 애니메이션 효과는 없음.
  • 하지만 페이지 리플로우를 줄일 수 있다는 장점.

2. Grid 활용

이 방법은 훨씬 간단하고 직관적.

Element를 단일 Grid 아이템으로 만들고, grid-template-rows 속성을 트랜지션하는 방식.

• wrapper
  • div: display: grid를 적용하고 grid-template-rows: 0fr로 초기화.
  • grid-template-rows를 0fr에서 1fr로 트랜지션.
• inner
  • div: overflow: hidden을 설정.

CSS
.wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out;
}

.wrapper.is-open {
  grid-template-rows: 1fr;
}

.inner {
  overflow: hidden;
}

<div class="wrapper">
  <div class="inner">Expandable content</div>
</div>

장점:

• 훨씬 깔끔한 구조로 단 두 개의 DOM 노드만 필요
• 페이지 콘텐츠가 부드럽게 움직여 자연스러운 애니메이션 효과를 제공

단점:

• 내부 Element에 직접적인 padding을 적용할 수 없음.
• 만약 padding이 필요하다면 내부 Element를 하나 더 감싸서 해당 Element에 padding을 적용해야함

주의사항:

• 두 방법 모두 내부 Element에 직접적인 padding을 적용할 수 없다는 점을 기억해야!
• padding이 필요하다면 추가적인 Element 래핑이 필요합니다.