Accordion

구조

<dl class="NetflixFAQ__contianer resetDl Accordion">
  <!-- AccordionItem--open 본문 펼침 상태 클래스 -->
  <div class="AccordionItem">
    <dt class="AccordionHead">넷플릭스란 무엇인가요? 
      <button type="button" class="resetButton AccordionButton"></button>
    </dt>
    <dd class="AccordionBody">
    </dd>
  </div>
</dl>

(깃북 수정 사항) 스타일링 코드 넣기

문제

처음에 설계를 할 때 <dd>에다 .AccordionItem을 클래스로 주고 스타일링을 하려고 했다. 하지만 구현을 되지만 transition 속성을 주어 아코디언이 열리고 닫힐 때, 자연스러운 애니메이션 구현이 쉽지 않았다. 결국 애니메이션을 주지 못하고 구현을 하는 편이 더 자연스러울 정도 였다.

<dd>에 아코디언 아이템을 주면 JS로 인터랙션 설계가 복잡해 진다. 버튼을 클릭하면 <dd>가 펼쳐지는 기능을 붙여야 하는데 이럴 경우 각 요소에 마다 인터랙션을 걸어야하기 때문이다.

해결

<dt>, <dd>를 묶어주는 <div>에 아코디언 아이템을 클래스로 두고 스타일링과 인터랙션을 적용한다. 이렇게 되면 아이템을 클릭하면 <dt>, <dd>가 같이 이벤트가 적용되기 때문이다. 하나의 클릭으로 두 가지 기능을 구현할 수 있다.

<div>는 오직 표현을 위해 마크업 한 것이 아닌 기능과 표현을 둘 다 고려한 마크업이다.

결론

마크업을 할 때 기능을 고려하기 각 부분에 인터랙션을 붙이려고 하지 말고 한 동작으로 두 요소를 제어할 수 있는 설계를 하기.

구조, 표현, 기능을 전부 고려 하여 마크업하자! HTML은 하면 할 수록 어렵다! 코드 한 줄 한 줄이 정말 많은 고민을 하게 만든다. 큰그림을 그려 설계하는 계발자가 되기를!