랜딩페이지에 들어간 기능,(내가 보기위해..)

들어간 기능?

1. 원하는 요소 (이번 경우에는 서브헤더)가 일정 구간만큼 따라오는 기능

2. 버튼 누르면 해당 요소로 스크롤 조정

3. 캐러셀 (가로 슬라이드)

4. background-image, 이미지 사용하여 반응형 맞추기.

원하는 요소가 일정구간 만큼 따라오는 기능.

제가 원하는 요소가 원하는 구간만큼 위치가 고정되어 따라오는 기능을 구현하고 싶었니다.
그러기 위해선
일정구간 만큼은 position: fixed, 으로 변했다가 그 구간이 지나면 static으로 바뀌어 일반적인 흐름을 따르게 되야만했습니다.

position과 관련되어 속성을 좀 더 찾아보니 position: sticky가 위와 같은 역할을 한다고 발견하게 되어 해당 영역을 설정만 해준다면 해당 영역에서만 fixed로 움직이는 것을 확인했습니다.
fixed로 움직이기때문에 top,right,bottom,left속성을 설정해줘야만 합니다

버튼 누르면 해당 요소로 스크롤이 이동하는 기능

vue같은 경우에는 ref를 사용하여 scroll을 사용하게되면 굉장히 편하게 스크롤링할 수 있다.
내가 스크롤링하고 싶은 요소에 ref값을 주고 scrollIntoView()를 사용하게 되면 코드 한줄로 사용할 수 있게된다.

this.$refs.event1.scrollIntoView({behavior:"smooth"})

위와 같이쓰게 되면,event1에 스크롤링을 하는 코드입니다.
저는 모바일 환경에는 다른 요소로 보냈어야해서, 아래와 같이 코드를 짰습니다.

      if (window.innerWidth <= 800) {
        this.$refs.m_event1.scrollIntoView({behavior:"smooth"})
        this.isOpen = false;
      }else {
        this.$refs.event1.scrollIntoView({behavior:"smooth"})}},

캐러셀

이번 랜딩페이지에서 필요했던 캐러셀의 기능은 자동 넘기기, 드래그, 페이지네이션 점표현,
캐러셀이 포함된 div안에서 각각의 슬라이더가 div의 테두리에 걸려서 다음 슬라이더가 보여서 콘텐츠가 많아보이게 하는 약 4가지의 기능이 필요하여 여러 캐러셀 모듈을 찾아 보던중
vue-slick-carousel을 찾게되었고 참고 블로그쪽에 해당 깃허브 문서를 보면 사용법이 나옵니다.

background-image 이미지 사용하기

backgound-image를 사용하여 흐릿하게 해상도가 깨지지 않으며, 반응형에 맞는 배경을 적용시키려고 여러 노력을 했습니다. vh를 사용하여 첫 시도를 하였지만, 모바일환경에서 url표시줄이나 자판이 나올때 스크롤이 유지가 되지않아서 vh를 포기하고, 결국 높이 고정값을 두고 width값을 대부분의 해상도의 최고값인 1920px을 생각하여 image를 디자이너에게 부탁하였습니다.
저희 콘텐츠들은 가운데에만 몰려있어서 가운데콘텐츠는 그대로 유지하고 콘텐츠의 뒷배경만 1920px으로 맞춰 진행을하여 이미지 원본에맞는 높이값을 적용해 이미지 해상도가 깨지지 않으며 출력되는 것을 확인 할 수 있었습니다.

	background-image: url(주소);
    background-size: cover;
    background-position: center ;

3가지 속성을 지정했을대 image크기에맞게 width값과 height값을 설정해주면 원하는 결과물을 얻을 수 있습니다.

첫번째 해상도는 맞췃지만 vh를 예측에 실패해서 비율을 못맞춘 랜딩페이지느낌

꼭 완벽한 반응형을 만들어보리라..!

참고 블로그

https://tech.lezhin.com/2019/03/20/css-sticky postion:sticky 관련
https://github.com/gs-shop/vue-slick-carousel 캐러셀 관련