기기에 따른 페이지의 높이 조절

https://www.joonganggroup.com/

중앙그룹

 

위 사이트와 같이 인터렉티브 한 웹사이트를 만들어본 경험이 적었기에 나는 해당 사이트에 적용되는 개념을 몰랐기 때문에 해당 기술을 공부해보고 싶었다. 

 

스크롤과 포지션

위 페이지에 가서 개발자 창을 열어 코드 구조를 보면 스크롤 위치에 따라 포지션이 바뀌는 것을 볼 수 있었다. 

또한 스크롤을 많이 내리면서 화면에서 인터렉션이 발생하는데 나는 이를 위해 각각의 콘텐츠에 고정 픽셀로 높이를 주었는데 이로 인해서 화면을 줄이면 스크롤이 너무 많아지고, 반대로 픽셀 값을 줄이니 웹화 면상에서 스크롤이 제한적이었다. 

또한 스크롤에 따라 포지션이 바뀌는 것을 보며, fixed와 absolute에서 혼돈이 생기기 시작했다. 

일반적인 웹페이지를 제작할 때에는 상황에 맞게 떠오르던것이 스크롤 이벤트와 함께 적용하려고 하니 해당 콘텐츠가 왜 fixed이고 왜 absolute인지 등 헷갈렸다.

그렇기 때문에 여러가지 강의를 통해 앞으로 배울 내용을 작성해보고자 한다.

공부 내용

인터렉티브한 웹사이트는 해당 스크롤 구간이 나오기 전까지 애니메이션 같은 기능들을 모두 정지해놔야 웹의 성능에 무리가 가지가 않는다. 

그렇기에 스크롤에 해당하는 부분외에는 모두 display:none을 해줌으로써 애니메이션 등이 일어나지 않게 하고, 해당하는 부분만 display:block를 해줘야 한다. 

근데 display:none을 해준다면 페이지의 높이 자체가 낮아지게 되기 때문에 콘텐츠의 높이를 지정해줘야 했다.

나는 여기서 고정픽셀을 줬는데 그렇게 되면 같은 높이지만 웹에서는 보기 편할지 몰라도 모바일에서는 스크롤의 높이가 엄청 높아지게 되었다. 

그래서 선택한 방법은 콘텐츠마다 특정 수를 넣어 해당 기기의 높이 x 특정 수를 곱하는 방법이다. 이렇게 하면 모든 기기에서 보기 좋은 높이로 설정이 된다.

스크롤을 할 때 뒤에 배경은 계속 움직이지만 중앙의 텍스트는 계속 고정되어 있는데 이는 fixed 또는 sticky를 이용한 것이다. 보통 fixed를 많이 사용하는데 둘의 기능에 차이가 있기는 하지만 지원되는 브라우저도 fixed가 더 많기 때문에 fixed에다가 js를 사용하여 sticky와 같은 기능을 구현하는 것이 가능하다.