본문 바로가기

배워서 따라하는 포플/스타벅스 클론

스타벅스 클론(8) - 리워드

위에 리워드 영역을 분석해보겠습니다.

일단 가운데 이미지 파일이 있습니다.

왼쪽은 bg-left영역으로 뻗어나가고, 오른쪽도 마찬가집니다.

그리고 회원가입등 버튼들로 구성했습니다.

 

html부분은 비교적 쉽습니다.

회원가입 버튼에 btn--reverse를 넣은 이유는 전에 전역 버튼을 다 미리 만들어놨기에,

좀 쉽게 사용할려고 넣었습니다.

위 효과를 그대로 나타낼려고 하는 거라 딱히 설명이 없습니다.

.btn-group는 position이 있는데 부모요소인 .inner에 position속성값이 안 보입니다.

이게 전에 모든 .inner속성에 공통적으로 position속성을 넣어서 별도 추가할 필요가 없습니다.