# NetflixIntro

### 기록하기

#### netflixIntro

1. 작업 중 브라우저 전체 화면에서 원인을 알 수 없는 `margin-right` 공간이 생겼다. 내가 잘못 한 건 줄 알고 원인을 찾으려 시간을 꽤 소비했는데 화면을 새로 고침하니까 없어졌다. 가끔 이런 오류가 발생할 수 있으니 먼저 새로 고침 해보기\![![](https://github.com/hanna244/make-better-netflix-website/raw/master/TIL/assets/20201206_TIL_attached_file1.jpg)](https://github.com/hanna244/make-better-netflix-website/blob/master/TIL/assets/20201206_TIL_attached_file1.jpg)
2. `netflixIntro`에는 따로 `div`으로 `Container`를 만들어주지 않았기 때문에 `netflixIntro`에 `Container` 컴포넌트 적용
   * 현재의 작업이 컴포넌트를 사용하는 작업이다.
3. `netflixIntro__figure`의 `<img>`에 `class="resetImg"` 적용
4. `figure`에 기본으로 적용되어 있던 `margin`값 제거
5. `img`가 `video`를 덮는 디자인을 구현하기 위해 `z-index`를 사용하려 했으나 `z-index`는 `position` 속성(`static` 외 다른 요소)을 적용하지 않으면 적용이 힘들었다. 그래서 `position: relative;` 속성 적용했다. `absolute`는 부유해 버리는 특징 때문에 레이아웃이 무너져 버린다.
6. `netflixIntro__downloadContent`에 `position: absolute;`을 적용한 다음 `margin-bottom` 값으로 `img`위에서 위치를 조정하려고 했으나 `img`가 형제 요소이기 때문에 컨텐츠가 `img` 올라가지 않았다. 결국 `bottom`값으로 위치를 잡았다.
7. `netflixIntro`에 `<br />`가 적용된 요소에 `role="text"`적용
   * `netflixIntro__downloadContent`의 `<p>`요소에는 적용안함. 왜냐하면 내가 봤을 때는 "기묘한 이야기, 저장중"이라는 문장이 이어지는 문장이 아니라고 생각했기 때문이다.
8. [`role="group"`](https://www.w3.org/TR/wai-aria-1.1/#group)
   * 그리고 role="group"은 트리 구조를 구현하거나, 드롭다운 메뉴를 만들 때 사용한다.
   * treeitem 역할 또는 menuitem 역할을 가진 요소를 묶을 때 사용한다.
   * 트리구조를 웹에서 구현할 때, 그룹이 필요한 경우 `role="group"`을 사용할 수 있다.
9. `downloadIcon`의 수직 위치를 가운데 정렬하기 위해서 `<img>`에 `margin-top: auto; margin-bottom: auto;` 적용
10. `netflixIntro`의 컨텐츠가 `header`의 컨텐츠를 덮어버리는 현상을 해결하기 위해 `header`에 `z-index: 10000;` 적용[![](https://github.com/hanna244/make-better-netflix-website/raw/master/TIL/assets/20201206_TIL_attached_file3.jpg)](https://github.com/hanna244/make-better-netflix-website/blob/master/TIL/assets/20201206_TIL_attached_file3.jpg)

![1번 관련 이미지 ](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MS5BxF_xPqY4Jk1JzLA%2F-MS5DH4fOGhlrXW5pS1V%2Fimage.png?alt=media\&token=34c69116-8c83-4a6c-aac9-a3c2bd50480e)

![10번 관련 이미지](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MS5BxF_xPqY4Jk1JzLA%2F-MS5DPnRo98OXn5dU0IW%2Fimage.png?alt=media\&token=1113781f-2515-4919-831e-fa6cbc740b22)

### 고민하기

1. `netflixIntro__downloadContent`에서 `text`의 위치를 잡을 때
   * `text-align: left;`\
     부모요소가 `downloadContent`이다 보니 `text-align: left;` 했을 떄 박스의 왼쪽 끝으로 위치해버린다.
   * `position: absolute;`\
     앞서 `position` 속성을 많이 사용했기 때문에 브라우저의 성능 면으로 봤을 때 좋지 않겠지만 마크업을 수정하지 않고 진행한다는 장점이 있다. 하지만 데스크탑 버전을 생각했을 때 또다시 위치를 고려해야 한다는 단점이 너무 크다
   * 🎯 선택! `display: flex;`\
     `flex`를 사용해 위치를 잡기 위해서는 `text`를 묶어줄 컨테이너가 필요하다. ~~`text`를 `div`으로 랩핑한다.~~ 단점은 마크업에 `<div>`요소가 이미 너무 많고 마크업을 수정하지 않는 쪽으로 진행하고 싶다. ~~하지만 데스크탑 버전까지 고려했을 때 위치를 조정하거나 수정하는 부분에서는 최선의 방법이다.~~

     🌿 이미 `p`태그가 `text`를 묶는 컨테이너 역할을 하고 있다. 또 다른 컨테이너를 `<div>`을 사용해 묶는다면 이미 `p`태그가 같은 역할하므로 의미 없는 `<div>`태그가 되어 버린다.

     결론, `netflixIntro__downloadContent`에서 text의 위치를 잡을 때는 `flex` 또는 `grid`를 사용하는 것이 최선이라고 생각하며 이를 사용하기 위해 `text`를 묶어줄 컨테이너를 사용할 필요는 없다.


---

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