HTML에서 비디오 중앙에 맞추기

1. margin, width 및 display CSS 속성을 사용하여 HTML의 중앙 비디오에
2. center 태그를 사용하여 HTML에서 비디오 중앙에 배치
3. text-align CSS 속성을 사용하여 HTML에서 비디오 중앙에 배치

이 튜토리얼에서는 HTML에서 비디오를 중앙에 배치하는 몇 가지 방법에 대해 설명합니다.

margin, width 및 display CSS 속성을 사용하여 HTML의 중앙 비디오에

margin, width 및 display CSS 속성의 조합을 사용하여 HTML에서 비디오를 중앙에 배치할 수 있습니다. margin 속성을 사용하여 네 방향 모두에서 요소의 여백을 설정합니다.

이 메서드에서 video 태그에 여백을 적용하기 위해 속성을 사용할 것입니다. width 속성을 사용하여 요소에 특정 너비를 지정할 수 있습니다.

px, em 및 백분율과 같은 다양한 단위로 너비를 설정할 수 있습니다. 아래 예에서 이러한 단위 사용의 차이점을 볼 수 있습니다.

display 속성은 선택한 요소의 동작 표시를 설정하는 데 필수적입니다. block, inline-block 및 inline과 같은 값을 사용합니다.

마지막으로 video 태그를 사용하여 HTML에 비디오를 삽입합니다.

예를 들어, center 클래스를 사용하여 HTML에 video 태그를 작성합니다. 먼저 src 속성에 비디오 파일의 올바른 URL을 지정합니다.

다음으로 controls 속성을 작성하고 video 태그를 닫습니다. CSS에서 center 태그를 선택하고 margin 속성을 적용합니다.

속성 값을 0 auto로 설정하고 비디오 너비를 300px로 지정합니다. 마지막으로 display 속성을 block으로 설정합니다.

이제 위의 단계에서 수행한 작업을 설명합니다. video 태그의 controls 속성은 일시 중지, 재생, 슬라이드, 볼륨 증가 및 감소 및 전체 화면 전환을 위한 컨트롤을 표시합니다.

태그에서 controls 속성을 제거하면 컨트롤 막대가 비디오에서 사라집니다.

CSS의 margin 속성은 상단 및 하단 여백을 0으로 설정합니다. left 및 right 여백은 auto로 설정됩니다.

즉, 비디오는 300px의 지정된 너비를 사용하고 나머지 공간은 균등하게 분할되어 왼쪽 및 오른쪽 여백으로 설정됩니다.

비디오 요소는 비디오가 전체 블록의 공간을 차지하도록 블록 수준 요소로 설정됩니다. 이를 통해 미리 속성을 적용할 수 있습니다.

따라서 margin, width 및 display 속성과 같은 CSS 속성을 사용하여 HTML에서 비디오를 중앙에 배치할 수 있습니다.

예제 코드:

<video class="center" src="pointing_pink.mp4" controls></video>

.center{
 margin: 0 auto;
 width: 300px;
 display: block;
}

그러나 이 방법에는 단점이 있습니다. 위의 예에서는 width에 px 단위를 사용했습니다.

브라우저 창의 크기를 조정하거나 모바일 보기에서 웹사이트를 탐색할 때 비디오가 반응하지 않습니다.

이 문제를 해결하기 위해 width 속성에서 % 또는 vw를 사용할 수 있습니다. 이러한 단위를 사용할 때 비디오 요소는 반응합니다.

아래의 예를 보자.

.center{
 margin: 0 auto;
 width: 40%;
 /* widht:40vw */
 display: block;
}

center 태그를 사용하여 HTML에서 비디오 중앙에 배치

center HTML 태그를 사용하여 HTML의 요소를 가운데에 맞출 수도 있습니다.

태그는 HTML4까지 사용되었습니다. 최신 브라우저는 태그를 지원하지 않습니다.

그러나 일부 구형 브라우저는 여전히 이를 지원합니다. 따라서 HTML에서 요소를 가운데에 맞추기 위해 center 태그를 사용하지 않는 것이 좋습니다.

어쨌든 이 섹션에서는 태그를 사용하여 비디오를 중앙에 배치하는 방법을 살펴보겠습니다.

예를 들어 video 태그를 만들고 비디오를 삽입합니다. width 속성을 사용하여 비디오에 특정 너비를 지정합니다.

다음으로 video 태그를 center 태그로 감쌉니다. 따라서 비디오가 중앙에 표시됩니다.

<center>
 <video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>

text-align CSS 속성을 사용하여 HTML에서 비디오 중앙에 배치

앞서 언급했듯이 center 태그는 사용하지 않는 것이 좋습니다. center 태그의 대안은 text-align CSS 속성을 사용하는 것입니다.

text-align 속성을 center 요소를 가운데로 설정할 수 있습니다. 이 기술을 구현하여 비디오를 중앙에 배치할 수 있습니다.

그런 다음 컨테이너에 비디오를 래핑하고 스타일을 적용할 수 있습니다.

예를 들어 center 클래스로 div를 생성합니다. div 안에 video 태그를 만들어 비디오를 삽입합니다.

HTML에서 비디오의 너비를 설정하거나 CSS의 width 속성을 사용할 수 있습니다. CSS에서 center 클래스를 선택하고 text-align 속성을 center로 설정합니다.

따라서 비디오가 중앙에 배치됩니다.

예제 코드:

 <div class="center">
 <video src="pointing_pink.mp4" controls width="400"></video>
 </div>

.center{
 text-align: center;
}

이 기사에서는 HTML에서 비디오를 중앙에 배치하는 세 가지 방법을 배웠습니다. margin 속성, center 태그 및 text-align 속성을 사용하여 HTML에서 비디오를 중앙에 배치했습니다.