[CSS] Styled-components + 동영상으로 화면 전체 채우기

인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동영상으로 화면 전체를 채운 예시이다~!

 

728x90

 

---

 

동영상으로 화면 전체 채우기

1. 부모에 width 100%, height 100vh 주기
2. 자식에 position: absolute, top/left: 50%, transform: translate(-50%, -50%) 주기
3. <video> 태그에 object-fit: cover 주기 

 

전체 코드

import React from "react";
import styled from "styled-components";

const Intro = () => {
    return (
        <Wrapper>
            <IntroVideo>
                <Video muted autoPlay loop>
                    <source src="/videos/Preview.mp4" type="video/mp4" />
                </Video>
            </IntroVideo>
        </Wrapper>
    )
}

export default Intro;

const Wrapper = styled.div`
    width: 100%;
    height: 100vh;
    position: relative;
`;

const IntroVideo = styled.div`
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
`;

const Video = styled.video`
    width: 100%;
    height: 100%;
    object-fit: cover;
`;