Netflix FAQ

Netflix FAQ 부분의 작업 과정을 기록합니다.

기록하기

Accordion 각 Item 사이 공간

아래의 사진과 같이 각각 Item 사이 공간이 있다. 처음 CSS로 작업을 했을 때는 margin 속성 값으로만 공간을 주려고 했으나 border 속성으로도 충분히 구현이 가능하다. 방법 1, AccordionBody에 margin-top 값을 주어 구분한다. 방법 2 ,border-bottom을 주어 구분한다.

 .AccordionHead {
    border-bottom: 2px solid #010101;
  }

  .AccordionBody {
    border-top: 2px solid #010101;
    border-bottom: 5px solid #010101;
  }

pointer-events 사용하기

.AccordionItem 전체 부분에 click이 가능하도록 만들야 하기 때문에 pointer-events: none 속성을 사용해서 버튼 이미지요소가 포인터 이벤트의 대상이 되지 않도록 한다.

Accordion 버튼 모양 바꾸기

--open 상태일 때 버튼 이미지의 모양이 변한다. 나는 처음에 JavaScript로 구현해야 한다고 생각했으나 CSS로도 충분히 구현 가능하다. transform 속성의 rotate()를 적용하면 된다. 자연스럽게 모양이 변하게 하기위해 transition 속성을 적용한다.

.AccordionItem{
  img {
    transition: all 0.3s ease;
  }
}

.AccordionItem--open {
  img {
    transform: rotate(45deg);
  }
}

왜 --open 상태의 <img>에 transition을 주지 않고 기본 상태의 <img>에 transition을 주는가?

--open 상태 클래스를 추가/해지 하며 실습해보았다.

--open 상태의 <img>에 transition을 적용하게 되면 상태 클래스가 해지 되었을 때 애니메이션이 적용되지 않아서 부자연스럽게 모양이 변하게 된다.

기본 상태의 <img>에 transition을 적용하면 --open 상태 클래스를 추가/해지에 관계없이 애니메이션이 적용되어 자연스럽게 모양이 변하는 것을 볼 수 있었다.