Netflix Intro

Netflix Intro 부분의 작업 과정을 기록합니다.

기록하기

비디오 위치가 변하는 이슈

문제

비디오의 위치가 바뀌는 모습

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

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

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

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

.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%;
  }
}

원인

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

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

방법 (1) → 실패

<figure>에 가상 클래스 적용

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

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

.Section에 가상클래스 적용

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

결론

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

.Section 요소에 직접 padding-bottom 값을 적용 했다

position 가운데 정렬하기

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

방법 1

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

방법 2

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

margin 음수 값으로 위치 설정

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

컨테이너에서 이미지가 왼쪽으로 벗어난 것을 확인 할 수 있다. (디자인 시안)