border 안쪽으로 그릴 때
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