Position2 (스타벅스)헤더_ Side Badge 추가 // 스크롤 에니메이션 포인트 HTML **position:fixed 를 이용하여 화면이 바뀌어도 해당 요소 고정. > Position 이 relative 일 때 블록요소는 너비를 최대한으로 늘리려 하지만 absolute나 fixed일 때는 최소한으로 가지려 하기때문에 요소의 너비가 화면 전체를 차지하도록 하려면 width:100%를 추가해주어야함 CSS ** overflow:hidden으로 곡률이 적용된 div밖으로 이미지가 넘치지 않게 해줌 JS ** lodash 라이브러리를 사용해서 addEventLister로 뱃지에 scroll 함수 적용 > _.throttle : 페이지에 콘텐츠가 많은경우 페이지가 무거워지기 때문에스크롤을 할 때마다 함수가 실행된다면 화면에 렉이 걸릴수 있다 이를 방지하기 위해 지정시간동안 요청을 무.. 2022. 6. 4. (스타벅스)헤더_ Main Menu // 드롭다운 포인트 HTML **position:fixed 를 이용하여 화면이 바뀌어도 해당 요소 고정. ** z-index:정수로 해당요소가 다른 요소 위에 위치할 수 있도록 설정 _ 정수 값이 클 수록 위에 위치 ** cursor:pointer 로 커서 모양 변경 가능 ** background-image : url("이미지위치")로 배경에 이미지 삽입 CSS ** border-radius: 위 왼 아 오 로 각모서리의 곡률을 설정 결과 HTML COFFEE 커피 스타벅스 원두 스타벅스 비아 스타벅스 오리가미 에스프레소 음료 도피오 에스프레소 마키아또 아메리카노 마키아또 카푸치노 라떼 모카 리스트레또 비안코 커피 이야기 스타벅스 로스트 스팩트럼 최상의 아라비카 원두 한 잔의 커피가 완성되기까지 클로버® 커피 추.. 2022. 6. 3. 이전 1 다음
