> 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/css-main/netflixintro/undefined.md).

# 스타일링 코드 리팩토링

### 기록하기

6일에 스타일링 작업한 `netflixIntro`의 피드백 위주로 기록합니다.

#### common

1. 반응형 이미지 설정을 위한 공용 속성을 추가했다.

   * 처음에는 `resetImg`에 추가하려 했으나 해당 클래스는 이미지를 초기화 하는 역할을 하는 것이기 때문이다. 내가 추가하려는 속성은 반응형에서의 이미지를 설정하는데 필요한 속성이기 때문에 따로 클래스를 추가했다.

   ```
   .rwdImg {
     width: 100%;
     height: auto;
   }
   ```

#### netflixIntro

1. `netflixIntro__downloadContent`의 `<p>`요소에 `role="text"`속성 추가 하기
   * 처음에 속성을 적용했다가 뺀 이유는 한 문장으로 이어지는 흐름이 아니라고 생각했기 때문이다. (스크린 리더기가 정확하게 어떻게 읽어줄 지는 모르겠지만) `<br />` 요소가 포함되어 있기 때문에 문장이 끊어져서 읽어 주는 것은 분명하다. 심지어 나중에 자동으로 읽어주는 것이 아니라 사용자가 어떤 인터랙션을 해야 아래의 "저장 중..."을 읽어주게 된다.

     "기묘한 이야기 저장 중"이라는 문장을 잘 모면 한 문맥에서 이어지는 내용이기 때문에 사용자의 편의를 위해 속성을 추가해주는 것이 좋을 것 같다는 결론을 내림!
2. `netflixIntro__downLoadAndWatch`의 이미지에 `girlImage`라는 클래스가 설정되어 있었다. 해당 클래스를 지정해준 이유는 이미지의 위치를 조정하려는 목적이었으나 스타일링을 진행 해본 결과 필요없는 클래스 명이라 삭제해 주었다.
3. `netflixIntro`의 `p` 선택자에 `:not()` 함수 사용해보기
   * 공부한 내용을 사용해보기 위해 `:not()`함수를 사용했다. 내가 하려는 목적은 나머지 `netflixIntro`의 `<p>` 중에서 `<div class="netflixIntro__downloadContent">` 안에 있는 `<p>`만 제외하고 싶었다.

     하지만 아래의 방법이 내가 원하는 방식으로 적용되지 않은 이유는 `netflixIntro__downloadContent`라는 클래스는 `<p>`에 설정된 것이 아니기 때문이다.

     ```
     .netflixIntro p {
       font-size: 2rem;
     }

     .netflixIntro p:not(.netflixIntro__downloadContent) {
       font-size: 1rem;
     }
     ```

     위와 같은 형태로 한다면 `netflixIntro__downloadContent`에는 `font-size: 2rem;`이 적용되고 나머지 `p`요소에는 `font-size: 1rem;`이 적용된다.\
     왜? 뒤에 나오는 `CSS`의 속성의 우선순위가 더 높기 때문이다.

     위의 코드는 현재 넷플릭스에서 사용하기엔 최선의 방법은 아니다. 해당 요소에 직접적으로 스타일을 적용할 수 있는 구조이기 때문에 해당 요소를 직접 선택하여 스타일을 주는 방식을 사용하는 것이 좋겠다.
4. 컴포넌트 이해하기

   * 상태 클래스를 컴포넌트로 사용하기\
     `<article>`의 클래스로 각 부분을 제어하며 스타일링을 적용했는데 이는 재사용을 고려하지 않은 스타일링이다. 예를 들어 새로운 `<article>`이 추가 된다면 또 다시 그 `<article>`의 클래스로 스타일을 다시 적용해야 한다.

   재사용을 고려하지 않은 예시

   ```
   .netflixIntro__watchOnTV,
   .netflixIntro__watchOnDevice {
     flex-direction: row;
   }

   .netflixIntro__downLoadAndWatch--reverse {
     flex-direction: row-reverse;
   }
   ```

   재사용을 고려한 예시

   ```
   .netflixIntro {
     flex-direction: row;
   }

   .netflixIntro--reverse {
     flex-direction: row-reverse;
   }
   ```

   컴포넌트를 만드는 스타일링을 매번 수업 시간에 따라하기만 했지 직접 해본 경험은 처음이라 아직 상태 클래스나 컴포넌트를 완전히 이해하지 못한 것 같다.(사실 머리로 이해했기 때문에 다 알고 있는 줄 알았다 ㅎㅎ) 오늘도 하나를 더 배웠고 몸에 익혔다는 마음으로 다음 작업에서는 잘 적용해보자.
5. `netflixIntro__description`의 단락을 가운데 정렬하기\
   단락을 가운데 정렬하기 위해 아래의 요소를 적용했다. 사실 왜 해당 속성을 적용했는지 설명하라고 하면 이유는 없다. 가운데 정렬이 안되니까 막 갖다 붙이다가 해결된 것이다. 즉, 내가 쓴 코드를 설명을 하지 못한다. 그냥 썼으니까. 이런 일이 일어나지 않도록 원인을 정확하게 알고 꼭 필요한 속성을 사용할 수 있도록 노력하자!

   ```
   .netflixIntro__description {
     display: inline-block;
   }
   ```

   아래의 코드를 통해 단락을 가운데 정렬해주었다.

   ```
   .netflixIntro__description p {
     margin: 3rem auto 0;
   }
   ```
6. `inline`이 아니라면 `block`요소에서는 `height: auto`의 의미가 없다.왜냐하면 `block`요소는 가로세로비율에 맞춰서 이미지가 커지는 것이 아니라 요소 안의 컨텐츠의 크기만큼 커지고 작아지기 때문이다.(아무것도 없다면 높이는 0이다.)
7. 나중에 마크업을 수정하는 바람에 생긴 문제

`<div>`로 단락요소를 랩핑하기 전에 `h4`에 `margin-top` 공간을 주었다. 마크업을 수정하고 나서 그 부분을 미처 생각하지 못하고 넘어갔더니 `h4`에 적용된 `margin-top` 공간이 `<div>`를 넘어가는 형태가 되어 버렸다. 마크업을 나중에 수정하다 보니 생기는 문제다. 이런 상황이 `DDD`방법의 단점이다.

```
  <div class="netflixIntro__description">
    <h4 role="text">즐겨 보는 콘텐츠를 저장해 <br /> 오프라인으로 시청하세요.</h4>
    <p>간편하게 저장하고 빈틈없이 즐겨보세요.</p>
  </div>
```

```
  .netflixIntro h4 {
    margin-top: 6rem;
    margin-bottom: 0;
  }
```