728x90
outer div는 modal의 background layer다.
jsfiddle에서 잘 보이도록 1000px로 고정시켜놨고 실제로는 100%를 사용한다.
inner div에는 modal의 내용이 들어간다.
요즘 잘 듣고있는 악뮤의 낙하 뮤직비디오를 넣었다.
아래 fiddle에서 직접 확인할 수 있다.
HTML
<div class="outer">
<div class="inner">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/EtiPbWzUY9o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
CSS
.outer {
position: absolute;
top: 0;
left: 0;
height: 1000px; /*100%*/
width: 1000px; /*100%*/
background-color: gray;
}
.inner {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 300px;
}
스크롤를 어떻게 움직이든 악뮤는 가운데 고정이 된다.
728x90
'Programming > Frontend' 카테고리의 다른 글
[React] useEffect에서 async 사용하기(typescript 예시) (0) | 2024.05.08 |
---|---|
[pnpm] windows pnpm 업데이트 (0) | 2024.04.11 |
[npm] windows npm 업데이트 하기 (0) | 2024.04.11 |
offsetWidth, scrollWidth, clientWidth 차이 (0) | 2021.06.08 |
[css] 티스토리 스킨 적용 시 소스코드 가운데 정렬되는 문제 (2) | 2020.08.03 |
댓글