# NetflixFAQ

### 기록하기

#### netflixFAQ

1. `ourStory__emailRegistration`에 `text-align: center;` 추가

   ~~`ourStory`의 `Container`에는 `text-align: center;`가 적용되어 있었기 때문에 `ourStory__emailRegistration`가 해당 속성을 상속 받을 수 있었다. 하지만 `netflixFAQ`의 `Container`에는 해당 속성이 적용되어 있지 않기 때문에 `ourStory__emailRegistration` 선택자에 `text-align: center;`를 중복해서 적용한다.~~

   ```
   .ourStory__emailRegistration {
     margin-top: 1rem;
     margin-bottom: 0;
     text-align: center;
   }
   ```

   **𝗫 위의 방법 사용 안함! 𝗫**

   `FaQ`의 `promotion`는 단락 `text`가 데스크탑 버전에서는 줄바뀜되지 않는다.(`ourStory`와는 디자인이 다름) 그래서 `--nobr` "no line break"라는 상태 매세지를 추가 해주어 다시 속성을 적용했다. 줄바꿈을 위해 너비값을 임의로 주었다.

   ```
   .ourStory__emailRegistration--nobr {
     width: 29rem;
     text-align: center;
   }
   ```
2. `padding`은 `auto`값을 사용할 수 없다.
3. `.FAQListItem dt`에는 `width: 100%`를 적용할 필요 없다. `dt`는 `block`요소이다.
4. `.Button`의 이미지 위치 맞추기

   지난 번 `homeLink`와 같은 문제가 발생했다. 버튼과 이미지 크기가 딱 맞지 않고 이지기가 계속 버튼의 공간 밖으로 나가버리는 현상이다. 처음엔 왜 그럴까 계속 고민했는데 보다보니 홈 링크의 문제와 같은 문제였다는 것을 발견했다. 이미 상속된 폰트 사이즈의 값인 `1.5rem`에 행간 `1.5`의 공간 때문에 이미지가 밀려난 것이다. `font-size: 1rem;`을 적용하면서 해결!

   * 버튼 같은 경우엔 너비, 높이 값을 지정해 주어야 한다.
   * `bottom`값을 지정하지 않아도 위치가 변화하지 않기 때문에 삭제!

   ```
   .Button {
     position: absolute;
     padding: 0.205em;
     width: 1.5rem;
     height: 1.5rem;
     font-size: 1rem;
     top: 12px;
     right: 12px;
     /*bottom: 12px;*/
   }
   ```

   `position`으로 위치를 잡으니 또 버튼 밖으로 도망을 가버린다. 아래의 코드로 해결!

   ```
   .netflixFAQ img {
     width: 100%;
   }
   ```
5. `FAQListItem`의 `dt`의 첫번째 요소에 `margin-top`을 제거

   위의 공간의 값만 주는 것으로 스타일링 규칙을 세웠다. 시안에 보면 첫번째 요소에 `margin-top`값이 없기 때문에 값을 제거했다.

   ```
   .netflixFAQ__FAQListItem-1 dt {
     margin-top: 0;
   }
   ```
6. `dt`와 `dd`의 사이 공백을 어떻게 제거할까?

   결론부터 말하자면 `dd`에 `padding` 값을 주는 것으로 해결되었다.

   `padding`값을 주는 것을 생각하지 못하고 구글링하며 찾아보았다. 대부분 하는 말이 `dt`와 `dd`에 `clear: both;`와 `float`를 사용해서 해결하라고 하는데... 왜 사용하는지도 모르겠고.

   일시적으로 `float: revert`를 적용하니 사이의 공백이 사라지는 듯 했으나 `FAQListItem`이 첫번째 `dt`와 `dd`를 자식으로 생각하는 것이 아닌 첫번째 `dd`와 두번째 `dt`를 자식으로 생각하는 이슈가 발생했다.

   결국 자포자기 심정으로 `dd`에 `padding`값을 주었더니 허무하지만 다행스럽게도 해결...!
7. `netflixFAQ`의 아래의 공간을 어떻게 설정하는 것이 좋을까?

   공간의 방향성을 일관적으로(`top`) 주기 위해 `::after`을 사용해보았다. 모바일 버전에서는 가능했다. 하지만 데스크탑 버전에서는 전혀 아래의 속성이 먹히질 않았다. `promotion`에 `flex`가 적용되어 있었는데 데스크탑 버전에서는 `flex-direction: row;`가 설정되어 있어서 모바일에서 보았던 `margin-bottom` 공간이 보이지 않았다.

   ```
   .netflixFAQ .promotion::after {
     content: ' ';
     margin-bottom: 6rem;
   }
   ```

   결국, 아래와 같이 해당 요소에 `padding-bottom` 값을 주어 해결했다.

   ```
   .netflixFAQ .promotion {
     margin-top: 2.6rem;
     padding-bottom: 6rem;
   }
   ```

### Netflix 원본 페이지와 비교하기

1. 원본 페이지에서는 `netflixIntro`의 이미지나 동영상의 위치를 잡을 때 `%` 단위를 사용하였다. `%`라면 반응형을 구현하기 위해서 자주 사용하기 때문에 당연히 이미지나 동영상이 위치가 이동하는 문제(내가 스타일링한 페이지에서)를 해결해줄 방법이라고 생각하지 않았다.

   하지만 스타일링한 방법을 적용해보니 페이지의 크기를 조정할 때마다 이미지와 동영상이 움직이지 않고 딱 위치에 머물러 있었다.

   의논할 때는 자바스크립트의 힘을 빌리는 방법을 생각했었는데 순수하게 css로도 구현이 가능했다. 아래는 `%` 단위를 사용해서 코드를 수정한 것이다.

   **아직 내가 적용한 코드가 완벽히 이해된 것은 아니니 다시 보기**

   ```
    @media (min-width: 60em) {
     .netflixIntro__watchOnTV video {
       /* top: 75px;
       left: 63px;
       width: 35rem; */
       top: 21%;
       left: 13%;
       width: 100%;
       max-width: 73%;
     }

     .netflixIntro__downloadContent {
       padding: 1em 0.75em; /* /16px */
       /* width: 30.2rem;
       margin-right: 8.9rem;
       margin-left: 8.9rem; */
       width: 100%;
       max-width: 65.2%;
       margin: 0 18%;
     }

     .netflixIntro__watchOnDevice video {
       /* top: 39px;
       left: 90px;
       width: 29.5rem; */
       top: 11%;
       left: 19%;
       width: 100%;
       max-width: 61%;
     }
   }
   ```

###

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/make-better-netflix-website/styling/css-main/untitled.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.