css에서 border를 사용하면 div 밖으로 그려진다. 그래서 크기가 커지기 때문에 box-sizing:border-box를 함께 하용하곤 하는데, 그래도 결국은 밖으로 그려진다.
구글링해보니 border를 보통 안쪽으로 그려야 할 때는 box-shadow를 사용한다고 한다.
box-shadow: 0 0 0 20px #ff0000 inset;
일반적인 상황에서는 써먹을 수 있겠으나... video 태그에 써야했던 나는 이게 안먹히는 것을 알게됐다. 스택 오버플로우에서 관련 내용을 찾을 수 잇었다. box-shadow가 그림자이므로 video 아래로 내려간다는 내용이었다.
내가 의도했던 바는... video 태그에서 border에 애니메이션을 줄 예정이었으므로.. 어떻게 할까 하다가 결국 그냥 border를 사용했다. 아래 codepen에 예제를 넣어놨다.
See the Pen border가 video에 가릴 때 by keepgoing-Noah (@keepgoing-noah) on CodePen.
video 태그에서는 bax-shadow가 안쪽 border처럼 사용 할 수 없음을 알게된 오늘...!! 까먹지 않게 기록해둔다!
참고 블로그와 스택오버플로우!
https://jintrue.tistory.com/entry/publishing-css-inner-border-%EB%A7%8C%EB%93%A4%EA%B8%B0
https://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site
https://stackoverflow.com/questions/26786940/can-you-have-css-box-shadow-inset-show-on-video-element
[publishing] css inner border 만들기
기본 css로 border값을 넣을 경우 outline으로 잡힌다. 인라인 스타일의 보더 값을 넣고 싶을 경우 box-shadow 스타일을 사용하면된다. css div { width: 150px; height: 50px; background-color: green; box-shadow: 0 0 0 3px #00
jintrue.tistory.com
scale HTML5 Video and break aspect ratio to fill whole site
I want to use a 4:3 video as a background on a site. However, setting the width and height to 100% doesn't work since the aspect ratio is kept intact, so the video doesn't fill the whole width of the
stackoverflow.com
Can you have CSS box shadow (inset) show on video element
I added a box shadow to a <div> and added a <video> element to the div. The box shadow shows up on the div, however it doesn't affect the video element. Is this the expected behaviour, ...
stackoverflow.com
