ETC/연습5 (스타벅스)Section 1_ 순차적으로 요소보이기 // btn 속성 포인트 HTML **순차적으로 보여주고 싶은 요소에 같은 클라스이름 설정 CSS ** btn--abc를 사용해서 btn이 들어가는 요소 스타일 바꿔주기 참고 2022.06.04 - [CSS] - Button_ 여러 버튼 속성지정 ** 요소를 순차적으로 나타내기위해 opacity:0을 이용하여 처음로딩되면 화면에 요소가 나타나지 않게 설정 JS ** document.querySelectorAll('')을 사용하여 나타날요소들 모두 찾기 **forEach(function(요소,indec){}) 를 사용하여 요소의 수만큼 반복해서 함수 실행 **gsap.to(요소,지속시간,옵션)을 사용하여 애니메이션추가 ** delay 속성을 사용하여 순서대로 요소들이 나타나게함. 결과 페이지가 로딩되면 이미지가 순차적으로.. 2022. 6. 4. (스타벅스)헤더_ 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. (스타벅스)헤더_ LOGO + Submenu 포인트 HTML **display:block 을 사용하여 인라인요소 (img) 하단에 baseline 공백을 제거 **CSS JS를 이용하여 input box를 클릭하면 돋보기아이콘이 사라지고, 검색창이 확장되며 '통합검색'이 나타난다. ** position: relative / absolute를 사용하여 자식요소가 부모요소 중간에 위치 CSS ** 가상클래스선택자를 사용하여 sub menu 사이에 세로줄 표현 (:: before) ** display:flex를 사용하여 가로정렬 ** box-sizing:border-box를 사용하여 요소의 크기를 유지하면서 내부여백과 테두리선이 추가될수 있게 해줌. ** outline:none을 사용하여 input box를 클릭했을때 나타나는 border 삭제. ** .. 2022. 6. 2. 이전 1 2 다음
