대부분의 쇼핑몰의 경우 오른쪽에 판매하는 물품, 서비스에대한 정보가 스크롤을 해도 따라다닌다. 이 경우 어떻게 레이아웃과 css를 구현해야할까?
언뜻 생각해보면 왼쪽, 오른쪽 엘리먼트 모두 css 속성에 display:inline-block 만 하면 될거 같은데 나는 저 친구가 스크롤시 밑으로 따라오길 바란다.
오른쪽 엘리먼트의 display:inline-block 속성은 지우고 position:sticky를 사용한다. 그러면 해결 된다. 그러면 해당 엘리먼트는 스크롤에 따라 따라온다.
참조 : https://tech.lezhin.com/2019/03/20/css-sticky
트레바리의 css를 콘솔로 확인해보면 position: fixed으로 작업이 되어있다. position: fixed와 sticky의 차이점은 스크롤시 해당 element가 따라오는 시점이다. fixed 는 처음부터 끝까지 부모 element의 특정 위치에서 그대로 있는다. 하지만 sticky의 element는 일반 element처럼 가만 있다가 해당 element의 상단 위치가 화면 끝이 되면 fixed 처럼 행동한다. 차별점은 고객의 UX가 다르다.
문제는 이 position:sticky는 한가지 장소에 고정 되어있는데 이렇게 되서는 해당 element와 같은 수평 선상에 element를 사용하지 못하는 것 이었다. 왜냐하면 element가 block 형태로 자리를 차지해버리기 때문이다. 이상하게도 sticky만 이렇게 반응했다. fixed의 경우는 이런 문제를 일으키지 않는다.
그렇다고 display:inline-block 을 사용하고 position:sticky나 fixed를 사용할 수는 없다. inline-block은 다른 블록에 영향을 받아서 element를 배치하는데, position은 부모 엘리먼트에서 부터의 절대적 위치를 기준으로 element를 배치하기 때문에 서로 상충되기 때문이다. 그렇다면 어떻게 해야 원하는 대로 구현이 될까? 고민해보았다.
다른 배치를 하는 css 를 찾아보던중 float 을 떠올렸다. float은 해당 element를 다른 element에 영향 받지도 주지도 않으며 부모 element를 기준으로 특정 위치에서 ‘부유'한다. 딱 내가 원하는 성질의 css였다.
그래서 내가 원하는대로 저 오른쪽 element는 sticky 하면서도 다른 element에 영향을 주지 않는다.
남은 문제는 반응성이었다. 화면이 작아지면 오른쪽 element가 왼쪽 element를 침범한다. 트레바리의 경우엔 media-query를 이용해서 반응성 구현이 잘 되어서 침범하지 못하도록 해놓았다.
이러한 문제는 추후에 기능 구현을 모두 진행한 후 진행 해볼 예정이다.