CSS를 사용하여 비디오 중앙에 배치

1. margin-left 및 transform CSS 속성을 사용하여 비디오 요소를 중앙에 배치
2. 디스플레이 및 여백 CSS 속성을 사용하여 비디오 요소를 중앙에 배치
3. width, justify-content 및 display CSS 속성을 사용하여 비디오 요소를 중앙에 배치

이 문서에서 사용자는 CSS만 사용하여 <video> 요소를 중앙에 배치하는 방법을 배웁니다. CSS를 사용하여 동영상을 중앙에 배치하는 여러 가지 방법을 아래에 설명했습니다.

그러나 사용자는 <video> 요소를 <center> 태그 안에 넣을 수 있으며 비디오 요소를 쉽게 중앙에 배치할 수 있습니다. 그러나 이 경우에는 CSS 속성만 사용해야 하므로 <center> 태그를 사용하지 않습니다.

margin-left 및 transform CSS 속성을 사용하여 비디오 요소를 중앙에 배치

CSS의 margin-left 및 transform 속성을 사용하여 HTML <center> 태그를 사용하지 않고 비디오 요소를 중앙에 배치할 수 있습니다.

margin-left 속성을 사용하면 요소의 왼쪽에 공간을 남겨둘 수 있습니다. margin-left 속성의 50vw 값을 사용하면 화면 너비의 절반이 요소 왼쪽에 남습니다.

여기에서 값의 vw는 화면의 창 크기를 나타냅니다.

transform 속성은 CSS를 사용하여 요소의 위치를 변경하는 데 사용됩니다. transform(-50%)을 transform 속성 값으로 사용하면 비디오를 음의 x 방향으로 이동합니다. 즉, 비디오 요소 너비의 50%를 왼쪽으로 이동합니다.

예를 들어 HTML에 동영상을 삽입하기 위해 그 안에 <video> 및 <source> 태그를 만들었습니다. 그런 다음 <video> 태그에 일부 CSS 속성을 적용했습니다.

transform: translate(-50%) 속성을 적용하여 동영상의 중심선이 화면의 중심선보다 우선하도록 합니다.

HTML 코드:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS 코드:

video {
    margin-left: 50vw;
    transform: translate(-50%);
}

디스플레이 및 여백 CSS 속성을 사용하여 비디오 요소를 중앙에 배치

display 및 margin CSS 속성을 사용하여 이 부분의 비디오 요소를 중앙에 배치합니다.

사용자는 display 속성 값을 설정하여 요구 사항에 따라 웹 페이지의 요소를 렌더링할 수 있습니다. 이 경우 블록의 요소를 표시하도록 display: block을 설정합니다.

위의 예에서 설명한 것처럼 margin 속성을 사용하면 요소 주변의 공간을 설정할 수 있습니다. margin: 0 auto 값을 margin 속성으로 설정합니다.

여기서 0은 요소의 상단과 하단에 0 공백을 설정해야 함을 나타냅니다. auto 값은 요소의 왼쪽과 오른쪽에 동일한 간격을 설정해야 함을 나타냅니다.

이와 같이 요소의 왼쪽과 오른쪽에 동일한 간격을 설정하여 CSS만 사용하여 비디오를 중앙에 배치할 수 있습니다.

아래 예제에서 HTML <video> 요소를 생성하고 위의 CSS 속성을 적용했습니다.

HTML 코드:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS 코드:

video {
    display: block;
    margin: 0 auto;
}

width, justify-content 및 display CSS 속성을 사용하여 비디오 요소를 중앙에 배치

이 예에서는 HTML <div> 요소를 만들고 container 클래스 이름을 할당합니다. <div> 요소 안에 두 개의 <video> 요소를 추가합니다.

여기서 클래스 이름을 사용하여 <div> 요소에 액세스하여 전체 <div> 요소에 CSS 속성을 적용합니다.

CSS에서는 container 클래스가 있는 <div> 요소의 너비가 화면 너비와 동일해야 함을 지정하는 width:100% 속성을 사용합니다. 그런 다음 justify-content: center CSS 속성을 사용하여 <div> 요소의 콘텐츠를 중앙에 배치할 수 있습니다.

display: flex 및 flex-direction: Row 속성은 두 <video> 요소를 단일 행에 표시합니다. 여기에서 justify-content 속성은 <div>의 요소를 중앙에 배치하는 주요 역할을 합니다.

이 세 가지 속성을 사용하여 <div> 요소의 콘텐츠를 중앙에 배치할 수 있습니다.

HTML 코드:

<div class="container">
    <video width="300" height="200" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
    <video width="320" height="240" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
</div>

CSS 코드:

.container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

위의 출력 이미지에서 사용자는 두 비디오가 한 행에 있고 화면 중앙에 있는 것을 볼 수 있습니다.

이 기사에서는 CSS를 사용하여 <video> 요소를 중앙에 배치하는 세 가지 방법을 설명했습니다. 세 가지 방법 모두 요소에 따라 다르므로 다른 HTML 요소와 함께 사용하여 중앙에 배치할 수 있습니다.