ETC15 (스타벅스)헤더_ 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. 주사위게임_ 랜덤 이미지/숫자 + If구문 두개의 주사위 숫자가 랜덤으로 보여짐. 같은숫자가 나오면 'DRAW' player1 숫자가 높으면 'player 1 WIN' player1 숫자가 높으면 'player 2 WIN' HTML: Refresh Me player1 player2 CSS: body{ font-family: 'Pacifico', cursive; background-color: rgba(70, 59, 59, 0.842); } h1{ color:rgb(67, 176, 140); font-size: 10rem; text-shadow: 5px 0 #232931; } .player{ text-align: center; display: inline-block; margin-right: 10px; } .main{ text-align: cent.. 2022. 5. 26. 이전 1 2 3 4 다음
