# 스타일링 코드 리팩토링

### 기록하기

9일에 스타일링 작업한 `netflixFAQ`의 코드 리뷰 내용을 기록합니다.

#### netflixFAQ

**FaQList를 반응형으로 만들 수 있지 않을까?**

왼쪽의 이미지와 같이 `FaQList`를 반응형으로 만드는 것이 어떤가에 대한 의견이었다. 내가 작업한 결과(오른쪽 이미지)는 좌/우의 여백이 너무 많이 보이기 때문이다.

[![](https://github.com/hanna244/make-better-netflix-website/raw/master/TIL/assets/20201210_TIL_attached_file1.jpg)](https://github.com/hanna244/make-better-netflix-website/blob/master/TIL/assets/20201210_TIL_attached_file1.jpg)

[![](https://github.com/hanna244/make-better-netflix-website/raw/master/TIL/assets/20201210_TIL_attached_file2.jpg)](https://github.com/hanna244/make-better-netflix-website/blob/master/TIL/assets/20201210_TIL_attached_file2.jpg)

**작업한 이유**

위의 컨텐츠들과 흐름을 맞추고 싶었기 때문이다.위의 컨텐츠들은 브라우저의 사이즈가 가변될 때를 생각해서 자연스러운 크기의 변화가 있지 않다고 생각했기 때문이다.(처음엔 이렇게 생각했다.)

**놓친 부분**

**테블릿 또는 브라우저의 크기가 큰 다른 기종은 고려하지 못했다는 점이다.** 또한 위의 컨텐츠 들은 텍스트를 화면에 보이는 그대로 보기만 하면 됐지만 `FaQ`는 사용자가 해당 질문의 답글을 보기 위해 버튼을 클릭하는 인터렉션이 필요한 요소이다. 만약 테블릿 사용자가 작은 크기의 `FaQ button`을 클릭 할 때 좋지 않은 사용자 경험을 제공할 수 있다.

\[코드 수정]

```
 .FaQList {
  min-width: 33.9rem;
  width: 100%;
}
```

**UX를 위한 FAQListItem의 Button 클릭 영역 확장**

`netflixFAQ`의 `Button`에 사용자 경험을 위해 `FAQListItem` 어떤 곳을 클릭하더라도 질문의 답변이 나오도록 한다. `Button`의 크기를 같게하는 것은 어떨까?

**\<video>에 반복 재생 기능 추가하기**

동영상이 반복재생되는 기능

* `<video>` 요소의 `loop` 속성을 사용해서 비디오가 끊임없이 재생되도록 한다.

**\<video> 크기 고정 (% 단위 사용)**

`netflixIntro`의 이미지와 비디오의 위치를 잡기위해 `css`변수와 `calc()`함수를 사용해주었다.

**Divider 설정하기**

1. 구분선을 적용해 주기위해 가상요소(`::before`)를 사용해주었다.

* `position: absolute`를 사용, 음수값을 사용해서 구분선을 왼쪽으로 끌어 당김.
* 자바스크립트를 이용해줘야 하는지 고민했는데 `css`의 `calc()` 함수가 있어서 순수한 `css`로만 구현이 가능했다.

```
Section::before {
  left: calc((100vw - 132rem) / 2 * -1);
  화면의 viewport 100vw - container 132rem /   
}
```

나는 마크업에 `div`를 사용해서 구분선을 이용했는데 UI에는 문제 없이 적용되고 수학식을 사용하지 않고 간결하게 코드를 작업할 수 있다는 점이 있지만 의미없는 `<div>`를 사용했기 때문에 시멘틱 마크업은 이루지(?) 못했다.

**사용하지 않는 클래스명 정리 그리고 클래스로 요소 제어**

`netflixFAQ__FAQListItem-6` 아이템의 넘버링 클래스명은 사용하지 않는데 없애는 것이 어떨까?

* 사용하지 않는 클래스명은 정하는 것이 코드의 최적화에 좋다
* 위와 같은 클래스명을 지우고 `dt`, `dd`에 각각 `FaQListHead`와 `FaQListItem` 클래스만 주었다.

**JavaScript를 고려한 아코디언 메뉴 상태 클래스**

아코디언 메뉴에 `--open`이라는 상태 클래스를 사용하여 `js`로 제어하는 것은 어떨까? (상태클래스의 중요성)

**selection 스타일링**

텍스트를 선택했을 때 보여지는 색상 : `selection`

* 명도 대비를 명확하게
* 이미지나 링크 컴포넌트에는 select가 가지 않도록 한다.
* `selection`는 일반사용자 뿐만아니라 저시력 사용자에게도 많은 도움이 된다. 저시력 사용자가 명도대비가 확실하지 않은 글자를 드래그 했을 때 보다 나은 사용자 경험을 제공할 수 있다.

**scrollbar 스타일링**

* 크로스 브라우징을 고려해서 사용한다.
* `cuser` 속성 적용 안된다.
* 접근성을 위해 `10px`로 두께를 설정 (마우스를 이용하는 사용자에게 스크롤 바를 `cuser`로 보다 쉽게 선택할 수 있는 사용자 경험 제공)

**우아한 기능저하**

[우아한 기능저하 내용 보러 바로가기](https://a-tothe-z.tistory.com/8)

**px을 소수점 단위로 표현하고 싶을 때 rem 단위를 사용하면 가능할까?**

예를 들어 `4.5rem`을 적용했을 때, 어떤 브라우저에서는 `5rem`으로, 다른 브라우저에서는 `4.5rem`으로 다 다르게 적용될 수 있다.

`px`에 소수점 단위를 사용할 수 없을 뿐더러 `rem`단위를 사용하더라도 브라우저마다 보여지는 값이 다를 수 있다는 것을 염두해 두어야 한다.

**flex 속기형을 사용하려고 노력하기**

flex-grow 속성보다 flex 속기형을 사용하려고 연습하자!

### 고민하기

1. 브라우저의 너비가 `350px`보다 작아지면 화면의 오른편에 공백이 생겨버리는 이슈
2. 로고의 뒤에 `text`가 있을 경우 로고가 선명하게 보이지 않는 이슈
   * 헤더의 배경에 톤 다운 효과를 주어 홈링크가 선명하게 보이게 한다(`js`사용)
3. `FAQListItem`의 `Button`에 `focus-visible` 상태일 때 `Button`의 레이아웃이 무너지는 이슈 [![](https://github.com/hanna244/make-better-netflix-website/raw/master/TIL/assets/20201210_TIL_attached_file3.jpg)](https://github.com/hanna244/make-better-netflix-website/blob/master/TIL/assets/20201210_TIL_attached_file3.jpg)

   원인은 미리 적용해둔 `button:focus-visible`의 `p:r`가 실행됐기 떄문이다.

   `Button`의 `p:a`가 우선적으로 적용될 수 있도록 `!important`사용

   `!important`는 무분별하게 사용해서 문제이지 꼭 필요한 상황해서는 사용해 줘도 괜찮다.
4. 넷플릭스 `width`, `max-width`값을 왜 해당 방식으로 사용했는지 분석해보기


---

# 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/undefined.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.