# Netflix Intro

## 기록하기

### 비디오 위치가 변하는 이슈

#### 문제 

![비디오의 위치가 바뀌는 모습 ](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MS4kddxebvHvJQjAkFI%2F-MS4lnNeBV9R23n47SpI%2Fimage.png?alt=media\&token=aa2b6bb9-1165-4ab3-8d1e-6e1c5a16c650)

`<figure>` 아래 `padding-bottom` 값을 주었다. margin값은 top방향으로만 적용하는 것으로 정했기 때문에 이전의 스타일링할 때 아래에 공간을 주어야 할 때 `padding-bottom을` 사용했다.

하지만 해당 컨텐츠는 이미지와 비디오가 겹쳐져서 스타일링 한 것이다.

`<figure>`에 `padding-bottom`을 적용했을 때 비디오의 위치가 변한다. 또한&#x20;

`$figureHeight`에 `padding-bottom` 값을 더하는 방법도 적용했지만 브라우저의 너비를 가변 할 때마다 비디오의 위치가 계속 변했다.

```css
.WatchOnTV {
  video {
    $figureWidth: 339;
    /* padding값도 더해봤으나 여전히 비디오 위치가 변함 */
    $figureHeight: 255;

    @include position(
      absolute,
      top 53 / $figureHeight * 100% left 44 / $figureWidth * 100% z-index -10
    );
    width: 248 / $figureWidth * 100%;
  }
}
```

#### 원인&#x20;

`video`의 위치를 잡을 때 `%`를 사용했기 때문에 `figure`의 높이가 변하면 비디오의 위치도 변한다.

`border-box`로 설정되어 있어서 `padding`을 설정하면 `figure`의 크기가 변하기 때문이다.

#### 방법 (1) → 실패 &#x20;

**`<figure>`에 가상 클래스 적용**

하지만 `<figure>`에 `::after`을 적용해도 **똑같이 비디오의 위치가 변했다.**

![](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPQc2wzFS33Cql9hzQD%2F-MPQcFsaRTQdR2ytN2PI%2FnetflixIntro_TIL_attached_file2.jpg?alt=media\&token=2c17a033-18a8-40b9-8858-f85cf437cb37)

**방법 (2) → 성공했으나...**

**`.Section`에 가상클래스 적용**

이번에는 `.Section`에 가상클래스를 사용해서 `padding-bottom`을 주었다. 원하는 대로 잘 구현된다.&#x20;

#### 결론&#x20;

`.Section`에 가상요소를 사용해서 `padding-bottom`을 적용 하는 것과  직접 요소에 적용하는 것에 별다른 차이가 없어서 직접 요소에 값을 적용하는 것으로 결론 내렸다.&#x20;

![.Section 요소에 직접 padding-bottom 값을 적용 했다  ](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPQc2wzFS33Cql9hzQD%2F-MPQcFs_u0JZaWRB-0RT%2FnetflixIntro_TIL_attached_file1.jpg?alt=media\&token=08edf7b4-fc22-405a-910f-f86b82f938fa)

### position 가운데 정렬하기&#x20;

아래의 이미지에서 `.downloadContent`를 가운데 정렬 하려고한다. 부모요소가 `position:relative`라는 전제에서 아래 코드를 참고하자

![](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPQc2wzFS33Cql9hzQD%2F-MPQcFsbF1AWs7glu70L%2FnetflixIntro_TIL_attached_file3.jpg?alt=media\&token=4ff5989f-fd07-417c-b419-04aebbe7bc9b)

#### 방법 1

```css
.downloadContent {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}
```

#### 방법 2

```css
.downloadContent {
  position: absolute;
  bottom: 16px;
  left: 63px;
}
```

### margin 음수 값으로 위치 설정  <a href="#negative-margin-values" id="negative-margin-values"></a>

디자인 시안에서 이미지가 왼쪽으로 `88px` 벗어난 것을 확인 할 수 있다. 이 경우 음수 `margin` 값을 사용해서 위치를 잡아주었다.&#x20;

![컨테이너에서 이미지가 왼쪽으로 벗어난 것을 확인 할 수 있다. (디자인 시안) ](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MT1GSjt_TbSiPaOLyr0%2F-MT1GoBhPGPUfssRd2yT%2Fimage.png?alt=media\&token=9451fb96-8c01-4241-b480-5d46d71f0d55)


---

# 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/scss-project-log/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.