(HTML CSS) 동영상 전체화면 구성하기, 스크롤 시 다음 section 보이게 하기 /

웹을 제작하다가 모니터 내에 헤더를 포함하고, 딱 맞게 화면 구성을 하고 싶었습니다.

스크롤 시 다음 section으로 보이게 하는것이 요구사항이었습니다.

 

section_1

여기서 스크롤 한 번만 하면

section_2

아래 footer가 보이게 하는 것이죠

 

 

---

 

 

다시 본론으로 와서 모니터에 화면이 꽉 차게 구성하는 방법은

1. header의 height를 알아낸다

2. main화면에 넣을 이미지든 동영상이든 이를 묶고 있는 상위의 root태그를 찾는다.

4. calc ☆를 이용하여 계산해 준다. (calc는 계산기로 이용하는 CSS function입니다.)

5. 부모태그에 중괄호를 열고 넓이는 %, 높이는 100vh(모든 모니터에 100%로 보여주겠다)

 calc를 이용하여 header의 height를 빼준다. (보통 다른 웹사이트는 80px, 100px이렇게 많이 주더라고요) 

6. CSS에서 아래처럼 입력한다.

 

CSS EX)

 .section{ width: 100% 

height: calc(100vh - header의 height)

}; 

 

 

 

해석

calc는 계산기 역할을 해주는 CSS function이며,

vh는 어떤 모니터든 사용자에게 전체 높이를 보이게 하는 요소고 이를 100으로 둡니다.

그러면. section은 100vh를 보여줍니다.

100vh에 잡아먹고 있는 header의 높이를 빼주면 됩니다.

 

사용처

이렇게 하면 웹 사이트 제작 시 동영상으로 풀 화면을 채울 때 자주 이용되곤 합니다!

 

 

간단하게 정리를 해보았는데 설명이 부족하면 댓글 달아주세요~