> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/styling/scss-project-log/main/netflix-faq.md).

# Netflix FAQ

## 기록하기 <a href="#record" id="record"></a>

### Accordion 각 Item 사이 공간  <a href="#accordion-dividing-line" id="accordion-dividing-line"></a>

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

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

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

![](/files/-MPN560cznEDiDoyBacJ)

### pointer-events 사용하기

`.AccordionItem` 전체 부분에 click이 가능하도록 만들야 하기 때문에 [`pointer-events: none`](https://developer.mozilla.org/ko/docs/Web/CSS/pointer-events) 속성을 사용해서 버튼 이미지요소가 포인터 이벤트의 대상이 되지 않도록 한다.&#x20;

### Accordion 버튼 모양 바꾸기  <a href="#accordion-dividing-line" id="accordion-dividing-line"></a>

![](/files/-MPNQKEazZdpDmZ4rf2X)

`--open` 상태일 때 버튼 이미지의 모양이 변한다. 나는 처음에 JavaScript로 구현해야 한다고 생각했으나 CSS로도 충분히 구현 가능하다. \
\
[`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) 속성의 `rotate()`를 적용하면 된다. 자연스럽게 모양이 변하게 하기위해 `transition` 속성을 적용한다.&#x20;

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

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

{% hint style="info" %}
왜 `--open` 상태의 `<img>`에 `transition`을 주지 않고 기본 상태의 `<img>`에 `transition`을 주는가?

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

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

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