본문 바로가기

강의30

패스트캠퍼스 챌린지 18일차 - Part 1. 스타벅스 예제(6) 20. 요소 슬라이드 - 프로모션 이미지 슬라이드 (1) // new Swiper(선택자, 옵션) new Swiper('.promotion .swiper', { // direction: 'horizontal', 기본값 slidesPerView: 3, // 한번에 보여줄 슬라이드 개수 spaceBetween: 10, // 슬라이드 사이 여백 centeredSlides: true, // 1번 슬라이드가 가운데 보이기 loop: true, autoplay: { delay: 5000, // 5초에 한번 슬라이드 }, pagination: { // 페이지 번호 사용 여부 el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자 clickable: true // 사용자의 페이.. 2023. 3. 9.
패스트캠퍼스 챌린지 17일차 - Part 1. 스타벅스 예제(5) 16. 요소 슬라이드 - 공지사항 .notice .notice-line { position: relative; } .notice .notice-line .bg-left { width: 50%; height: 100%; background-color: #333; position: absolute; top: 0; left: 0; } .notice .notice-line .bg-right { width: 50%; height: 100%; background-color: #f6f5ef; position: absolute; top: 0; right: 0; } .notice .notice-line .inner { height: 62px; } /* .inner의 height만 바꿔도 .notice-line이 그에 맞.. 2023. 3. 8.
패스트캠퍼스 챌린지 16일차 - Part 1. 스타벅스 예제(4) 13. 순차적 애니메이션 - 전역 버튼 스타일 (1) 이미지에 글자가 들어있다면 대체 텍스트에 그 글자를 써놓는 것이 좋음 14. 순차적 애니메이션 - 전역 버튼 스타일 (2) /* 기본형 */ .btn { width: 130px; padding: 10px; border: 2px solid #333; border-radius: 4px; color: #333; font-size: 16px; font-weight: 700; text-align: center; cursor: pointer; box-sizing: border-box; display: block; transition: .4s; } .btn:hover{ background-color: #333; color: #fff; } /* 반전형 */ .btn.. 2023. 3. 7.
패스트캠퍼스 챌린지 15일차 - Part 1. 스타벅스 예제(3 8. 헤더와 드롭다운 메뉴 - 메인메뉴 (1) 메인메뉴 부분은 어려운 기술이 쓰이는 것은 아니었지만 태그 구조가 복잡해서 따라가기 어려웠다. css에 이름을 쓰다보면 굉장히 길어지는데, 이 부분은 scss를 이용해서 개선할 수 있다고 한다. 9. 헤더와 드롭다운 메뉴 - 메인메뉴 (2) header .main-menu .item .item__contents .contents__menu > ul { /* ul 태그가 여러개이므로 자식 선택자 사용! */ } header .main-menu { position: absolute; bottom: 0; right: 0; z-index: 1; display: flex; } header .main-menu .item { } header .main-menu .item.. 2023. 3. 6.

티스토리툴바