$$config title: 제너럴아이디어(GENERALIDEA) 클론코딩 keywords: - 제너럴아이디어(GENERALIDEA) - 클론코딩 $$ # 제너럴아이디어(GENERALIDEA) 클론코딩 - [기존 페이지](https://generalidea.co.kr/) - 작업 기간: 2022-03-09 ~ 2022-03-17 (31시간) # day1 (2022-03-09) - [generalidea-day1](https://codepen.io/midm/full/YzEoqGW) - 13:30 ~ 17:30 (4시간) - 진행사항 1. 'header-top' html+css - 2차 메뉴는 아직! - 참고사이트 - [Xelcon](https://xpressengine.github.io/XEIcon/examples.html) - 메모 # day2 (2022-03-10) - [generalidea-day2](https://codepen.io/midm/full/vYWoXLv) - 14:45 ~ 18:30 (4시간) - 진행사항 1. 'header-top' 2차 메뉴 2. 'header-main' html+css+js - 참고사이트 - [input:focus{outline: none;}](https://velog.io/@ssumniee/CSS-input-%EB%B0%95%EC%8A%A4-%ED%81%B4%EB%A6%AD-%EC%8B%9C-%EC%83%9D%EA%B8%B0%EB%8A%94-%ED%85%8C%EB%91%90%EB%A6%AC-%EC%A0%9C%EC%96%B4%ED%95%98%EA%B8%B0) - 메모 - header 완료?! # day3 (2022-03-11) - [generalidea-day3](https://codepen.io/midm/full/ExoYyZj) - 13:40 ~ 15:50 (2시간) + 17:30 ~ 19:30 (2시간 = 4시간) - 진행사항 1. 'section-1' swiper-slide 2. 'section-2' 멤버십 배너 3. 'section-3' 신상 섹션 4. 'search-popup' 수정 중 - 참고사이트 - 메모 # day4 (2022-03-12) - [generalidea-day4](https://codepen.io/midm/full/bGabPKx) - 11:00 ~ 13:00 (2시간) - 진행사항 1. 'searh-popup' 수정 2. 'section-4' 콜렉션 - 참고사이트 - 메모 # day5 (2022-03-13) - [generalidea-day5](https://codepen.io/midm/full/ExoxQmR) - 1:20 ~ 2:50 (1시간 30분) + 16:00 ~ 21:00 (5시간 = 6시간 30분) - 진행사항 1. fade-in 효과 변경! - 스크롤 위치에 따라 .active 추가해서 효과 주기 --> js 가져옴 .fade-in와 .fade-in-top/bottom 등 방향별 라이브러리 만들어줬음 2. 'section-5' 인기상품 3. 'tag-women/discount' 추가 4. 'section-6' 리뷰 5. 전체적으로 수정! - swiper-slide에서 이미지 사이즈만 고정시키려면 .swiper-slide에 width 값 주기 - 참고사이트 - [스크롤 fade-in](https://seons-dev.tistory.com/177) - [깜빡이는 animation](https://7942yongdae.tistory.com/69) - 메모 1. 'header-main.active' 일 때 width 값이 최대치 고정된다,, 잘리게 만들기 2. 전체적으로 다시 수정 필요 # day6 (2022-03-14) - 15:00 ~ 19:00 (4시간) - [generalidea-day6](https://codepen.io/midm/full/eYymJzm) - 진행사항 1. 전체적으로 수정! - 구조 수정 ```html

``` ```css body { min-width: 1300px; } .container { min-width: 1150px; } ``` - ul 안에 div를 넣어서 li들을 전체 감싸주고 중앙정렬 시켜준다. - *ul에 margin-x: auto; 가 안된다. ```html

``` ```css .section-6 ul > .inner { width: 1300px; min-width: 1100px; } .section-6 li { width: calc(100% / 4); min-width: 150px; ``` - 참고사이트 - 메모 - header 수정 # day7 (2022-03-15) - 21:40 ~ 22:40 (1시간) - [generalidea-day7](https://codepen.io/midm/full/RwxPKqR) - 진행사항 1. 'footer-bottom' 추가 2. '신상, 베스트 섹션' 내용 수정 - 참고사이트 - 메모 # day8 (2022-03-16) - 15:30 ~ 18:00 (2시간 30분) + 21:10 ~ 22:40 (1시간 30분 = 4시간) - [generalidea-day8](https://codepen.io/midm/full/wvpKvbe) - 진행사항 1. 'header' 수정 완료 - 참고사이트 - 메모 1. 사이드 버튼 만들기 # day9 (2022-03-17) - 14:40 ~ 16:10 (1시간 30분) - [generalidea-day9](https://codepen.io/midm/full/ZEvbdWK) - 진행사항 1. 사이드 버튼 추가 2. '.section-3 / -5'에서 .prod-list % 4 != 0 일 때(한 줄에 4개가 딱 맞아 떨어지지 않을 때), 위치 이동하는 jquery 작성 - 참고사이트 - [to-top-button](https://cofs.tistory.com/188) - [to-bottom-button](https://stackoverflow.com/questions/13583180/jquery-scroll-to-bottom-of-page) - 메모 - scroll-down하면 header-main이 작아지는 효과에서 transition: 0.3s을 주면 slide 부분이 살짝 튕긴다. 0.5s로 수정 ///