> 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/scss-project-log/main/untitled/undefined-1.md).

# 비디오 스타일링 방법

페이지를 반응형으로 제작했기 때문에 브라우저의 너비가 변해도 비디오와 이미지의 위치가 변하지 않게 하려했다. 

```markup
<figure class="Section__media">
    <img class="resetImg rwdImg" src="./assets/category=TV.png" alt="" width="640" height="480" />
    <video class="resetImg rwdVideo" src="./assets/video-tv-0819.m4v" autoplay muted loop></video>
</figure>
```

먼저 Section-media에 너비 값 max-width 값으로 설정했다 (설정 값은 시안의 크기에 맞췄다.)

```css
.Section {
  &__media {
    max-width: rem(337);

    @include media('>=lg') {
      max-width: rem(480);
    }
  }
}
```

이미지에는 반응형을 위한 초기 스타일링으로 `rwdImg`를 적용했다.&#x20;

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

비디오는 먼저 초기 스타일링으로 `rwdVedio`를 적용했다.&#x20;

```css
.rwdVideo {
    max-width: 100%;
    height: auto;
}
```

그리고 해당 비디오의 위치를 반응형 웹에서도 위치가 고정될 수 있도록 `100%` 값을 주어 스타일링을 했다.&#x20;

```css
.WatchOnTV {
  video {
    $figureWidth: 339;
    $figureHeight: 255;

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