스타벅스 클론(10) - 고정 이미지 배경

이번에 작업할 것은 위와 같은 효과를 나타날려고 합니다.

1. 각 요소 배치

2. 기존에 유튜브 영상 구역에 있는 짤린 icon요소를 위로 꺼내주기

3. 컵 배경 이미지는 그 위치로 고정

 

고정 이미지 배경

위에 gif를 보셔도 알겠지만 크게 3개 덩어리로 나눠져 있습니다.

 

이중 지난번 유튜브 영역때문에 짤린 icon을 바로 하단에 있는 season-product 영역 안에 넣으면

더 이상 가려지지 않습니다.

 

이 두 파트는 설명해야할 것 따로 없을 것 같습니다.

 

컵 배경이미지 고정을 중점적으로 보겠습니다.

background-attachment속성을 이용해서 fixed을 했습니다.

즉, 스크롤하더라도 요소는 뷰포트 상대로 고정되어 있다는 겁니다.

background-size속성에 cover값을 부였했습니다.

이 것은 배경의 이미지를 요소의 더 넓은 너비에 맞춰서 출력하는 것입니다.

뷰포트에 맞게 출력할 겁니다.