CSS에서 비디오를 스타일링하는 방법은 무엇인가요?

CSS에서 비디오를 스타일링하는 방법 FAQ

Q1: CSS로 비디오 크기를 조절할 수 있나요?
네, 비디오 요소(`video`)에 `width`와 `height` 속성을 사용해 크기를 조절할 수 있습니다. 예:
```css
video {
width: 640px;
height: 360px;
}
```

Q2: 비디오를 반응형으로 만들려면 어떻게 하나요?
`width: 100%; height: auto;`를 사용해 부모 컨테이너 크기에 맞춰 비디오가 조절되도록 만듭니다.
```css
video {
width: 100%;
height: auto;
}
```

Q3: CSS로 비디오에 테두리를 추가할 수 있나요?
네, `border` 속성을 이용해 테두리를 추가할 수 있습니다.
```css
video {
border: 2px solid 000;
border-radius: 8px; /* 둥근 테두리 */
}
```

Q4: 비디오에 그림자 효과를 줄 수 있나요?
`box-shadow` 속성을 사용하면 비디오에 그림자를 줄 수 있습니다.
```css
video {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
```

Q5: 비디오에 둥근 모서리를 만들려면?
`border-radius` 속성으로 모서리를 둥글게 할 수 있습니다.
```css
video {
border-radius: 12px;
}
```

Q6: 비디오 위에 텍스트나 다른 요소를 오버레이하고 싶어요.
비디오를 포함하는 부모 요소를 `position: relative;`로 설정하고, 오버레이 요소를 `position: absolute;`로 배치합니다.
```css
.video-container {
position: relative;
display: inline-block; }

.video-container video {
display: block;
}

.overlay {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 20px;
pointer-events: none; /* 클릭이 덮어쓰이지 않도록 */
}
```

Q7: 비디오의 재생 컨트롤 UI를 CSS로 커스터마이징 할 수 있나요?
기본 `

CSS를 사용하여 비디오를 스타일링하는 방법은 다양합니다.

HTML5 비디오 요소는 웹 페이지에서 비디오 콘텐츠를 쉽게 삽입할 수 있게 해주며, CSS를 통해 비디오의 외관과 레이아웃을 조정할 수 있습니다.

아래에서는 비디오를 스타일링하는 여러 가지 방법을 자세히 설명하겠습니다.

1. 기본 비디오 요소 HTML5에서 비디오를 삽입하기 위해 `