
위에 리워드 영역을 분석해보겠습니다.
일단 가운데 이미지 파일이 있습니다.
왼쪽은 bg-left영역으로 뻗어나가고, 오른쪽도 마찬가집니다.
그리고 회원가입등 버튼들로 구성했습니다.

html부분은 비교적 쉽습니다.
회원가입 버튼에 btn--reverse를 넣은 이유는 전에 전역 버튼을 다 미리 만들어놨기에,
좀 쉽게 사용할려고 넣었습니다.


위 효과를 그대로 나타낼려고 하는 거라 딱히 설명이 없습니다.
.btn-group는 position이 있는데 부모요소인 .inner에 position속성값이 안 보입니다.
이게 전에 모든 .inner속성에 공통적으로 position속성을 넣어서 별도 추가할 필요가 없습니다.
'배워서 따라하는 포플 > 스타벅스 클론' 카테고리의 다른 글
| 스타벅스 클론(10) - 고정 이미지 배경 (0) | 2023.08.11 |
|---|---|
| 스타벅스 클론(9) - 유튜브 영상배경 (0) | 2023.08.11 |
| 스타벅스 클론(7) - 요소 슬라이드(2) - 프로모션 (0) | 2023.08.10 |
| 스타벅스 클론(6) - 요소 슬라이드(1) - 공지사항 swiper (0) | 2023.08.09 |
| 스타벅스 클론(5) - 순차적 애니메이션 (0) | 2023.08.09 |