# 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)