diff --git a/README.md b/README.md index cc6a3b23..743db12b 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,41 @@ -[참고 내용] +# ✨ HTML/CSS 클론 코딩 과제 - iloom(일룸) ++ 과제 수행 기간 : 2023.07.24~2023.07.28 ++ 클론 사이트 링크 : https://www.iloom.com/ ++ 데모 링크 : https://sue-iloom.netlify.app -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +*** -과제 수행 및 제출 방법 +## 📍 구현한 내용 ++ 시멘틱 태그 사용 ++ BEM 방법론 도입 ++ 메인 페이지 구현 + + 헤더 고정 + + 배너 슬라이드 + + hover 시 속성 적용 + + ![image](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/111065848/f2caf1bb-444c-4006-8fb3-b0ca14746673) + ![image](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/111065848/f3b7b959-69a4-4e32-8544-aab61a7de294) -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) + + -- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! + +*** -필수 요구사항 -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +## 📍 사용한 라이브러리 및 스택 +![html5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) +![css3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) +![javascript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E) -선택 요구사항 +## 📍 아쉬운 점 +최대한 HTML/CSS 만 사용하는 것이 목표였는데 swiper를 사용한 것이 조금 아쉬웠다. +헤더 hover 시 나타나는 메뉴 스타일링을 완성하지 못한 점이 아쉽다. +메인 페이지를 완성시키고 반응형도 구현하고 싶었는데 스터디까지 병행하니 시간이 부족했던 것 같다. -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) +## 📍 느낀 점 +HTML/CSS로만 클론 코딩하는 것이라 금방 완성할 수 있을 거라고 생각했는데 진행하면서 부족한 부분을 알 수 있었다. -손쉬운 이미지 추출 방법 -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! diff --git a/assets/icons/arrow_r_black.svg b/assets/icons/arrow_r_black.svg new file mode 100644 index 00000000..45cea126 --- /dev/null +++ b/assets/icons/arrow_r_black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/icons/arrow_t.svg b/assets/icons/arrow_t.svg new file mode 100644 index 00000000..114b8503 --- /dev/null +++ b/assets/icons/arrow_t.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/footer_b.png b/assets/icons/footer_b.png new file mode 100644 index 00000000..122cdc99 Binary files /dev/null and b/assets/icons/footer_b.png differ diff --git a/assets/icons/footer_f.png b/assets/icons/footer_f.png new file mode 100644 index 00000000..55d4eee0 Binary files /dev/null and b/assets/icons/footer_f.png differ diff --git a/assets/icons/footer_i.png b/assets/icons/footer_i.png new file mode 100644 index 00000000..f0dfb07d Binary files /dev/null and b/assets/icons/footer_i.png differ diff --git a/assets/icons/footer_logo.png b/assets/icons/footer_logo.png new file mode 100644 index 00000000..efec30e2 Binary files /dev/null and b/assets/icons/footer_logo.png differ diff --git a/assets/icons/history_widget_up.jpg b/assets/icons/history_widget_up.jpg new file mode 100644 index 00000000..35927a9d Binary files /dev/null and b/assets/icons/history_widget_up.jpg differ diff --git a/assets/icons/icn_inimgs.svg b/assets/icons/icn_inimgs.svg new file mode 100644 index 00000000..a9022ce6 --- /dev/null +++ b/assets/icons/icn_inimgs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/icn_kakao_blck.svg b/assets/icons/icn_kakao_blck.svg new file mode 100644 index 00000000..8e93a5b1 --- /dev/null +++ b/assets/icons/icn_kakao_blck.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/icn_likeHrt.svg b/assets/icons/icn_likeHrt.svg new file mode 100644 index 00000000..06d6a7b8 --- /dev/null +++ b/assets/icons/icn_likeHrt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/icn_star_on.svg b/assets/icons/icn_star_on.svg new file mode 100644 index 00000000..534ec1f6 --- /dev/null +++ b/assets/icons/icn_star_on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/icon_cart_30px.svg b/assets/icons/icon_cart_30px.svg new file mode 100644 index 00000000..c05687d0 --- /dev/null +++ b/assets/icons/icon_cart_30px.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/icon_closeBtn.svg b/assets/icons/icon_closeBtn.svg new file mode 100644 index 00000000..b5a535ee --- /dev/null +++ b/assets/icons/icon_closeBtn.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/icon_menu_30px.svg b/assets/icons/icon_menu_30px.svg new file mode 100644 index 00000000..d91fca10 --- /dev/null +++ b/assets/icons/icon_menu_30px.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/icon_search_30px.svg b/assets/icons/icon_search_30px.svg new file mode 100644 index 00000000..41e8aa0f --- /dev/null +++ b/assets/icons/icon_search_30px.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/icon_textclosed.svg b/assets/icons/icon_textclosed.svg new file mode 100644 index 00000000..bb81a264 --- /dev/null +++ b/assets/icons/icon_textclosed.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/img_notice.svg b/assets/icons/img_notice.svg new file mode 100644 index 00000000..cded96db --- /dev/null +++ b/assets/icons/img_notice.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/img_quickmenu.svg b/assets/icons/img_quickmenu.svg new file mode 100644 index 00000000..f7f3ae27 --- /dev/null +++ b/assets/icons/img_quickmenu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/instagram_1.svg b/assets/icons/instagram_1.svg new file mode 100644 index 00000000..3e6709fa --- /dev/null +++ b/assets/icons/instagram_1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/instagram_2.svg b/assets/icons/instagram_2.svg new file mode 100644 index 00000000..6997e9d5 --- /dev/null +++ b/assets/icons/instagram_2.svg @@ -0,0 +1,13 @@ + + + + + + + + @iloom_official + + + diff --git a/assets/icons/isms_iloom_bw.png b/assets/icons/isms_iloom_bw.png new file mode 100644 index 00000000..669c5ef5 Binary files /dev/null and b/assets/icons/isms_iloom_bw.png differ diff --git a/assets/icons/logo_myiloomlf.svg b/assets/icons/logo_myiloomlf.svg new file mode 100644 index 00000000..ee147e0f --- /dev/null +++ b/assets/icons/logo_myiloomlf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mark_1.png b/assets/icons/mark_1.png new file mode 100644 index 00000000..0a1c5334 Binary files /dev/null and b/assets/icons/mark_1.png differ diff --git a/assets/icons/mark_2.png b/assets/icons/mark_2.png new file mode 100644 index 00000000..7e354531 Binary files /dev/null and b/assets/icons/mark_2.png differ diff --git a/assets/icons/quick_menu_consulting.svg b/assets/icons/quick_menu_consulting.svg new file mode 100644 index 00000000..91d61e7c --- /dev/null +++ b/assets/icons/quick_menu_consulting.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/quick_menu_consulting_hover.svg b/assets/icons/quick_menu_consulting_hover.svg new file mode 100644 index 00000000..3f12b0ae --- /dev/null +++ b/assets/icons/quick_menu_consulting_hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/quick_menu_refurb.svg b/assets/icons/quick_menu_refurb.svg new file mode 100644 index 00000000..3c32a601 --- /dev/null +++ b/assets/icons/quick_menu_refurb.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/quick_menu_refurb_hover.svg b/assets/icons/quick_menu_refurb_hover.svg new file mode 100644 index 00000000..d99fe03c --- /dev/null +++ b/assets/icons/quick_menu_refurb_hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/quick_menu_store.svg b/assets/icons/quick_menu_store.svg new file mode 100644 index 00000000..bff1589d --- /dev/null +++ b/assets/icons/quick_menu_store.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/quick_menu_store_hover.svg b/assets/icons/quick_menu_store_hover.svg new file mode 100644 index 00000000..66ace467 --- /dev/null +++ b/assets/icons/quick_menu_store_hover.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/slide_l.png b/assets/icons/slide_l.png new file mode 100644 index 00000000..b404a521 Binary files /dev/null and b/assets/icons/slide_l.png differ diff --git a/assets/icons/slide_r.png b/assets/icons/slide_r.png new file mode 100644 index 00000000..f1495dc3 Binary files /dev/null and b/assets/icons/slide_r.png differ diff --git a/assets/icons/spc_iloom.png b/assets/icons/spc_iloom.png new file mode 100644 index 00000000..8946ab88 Binary files /dev/null and b/assets/icons/spc_iloom.png differ diff --git a/assets/images/card_banner1.jpg b/assets/images/card_banner1.jpg new file mode 100644 index 00000000..86a206af Binary files /dev/null and b/assets/images/card_banner1.jpg differ diff --git a/assets/images/card_banner2.jpg b/assets/images/card_banner2.jpg new file mode 100644 index 00000000..bbb24f36 Binary files /dev/null and b/assets/images/card_banner2.jpg differ diff --git a/assets/images/gnb_logo.png b/assets/images/gnb_logo.png new file mode 100644 index 00000000..a1af6716 Binary files /dev/null and b/assets/images/gnb_logo.png differ diff --git a/assets/images/insta_img_1.jpg b/assets/images/insta_img_1.jpg new file mode 100644 index 00000000..593a0858 Binary files /dev/null and b/assets/images/insta_img_1.jpg differ diff --git a/assets/images/insta_img_2.jpg b/assets/images/insta_img_2.jpg new file mode 100644 index 00000000..59f4f275 Binary files /dev/null and b/assets/images/insta_img_2.jpg differ diff --git a/assets/images/insta_img_3.jpg b/assets/images/insta_img_3.jpg new file mode 100644 index 00000000..7232ce8d Binary files /dev/null and b/assets/images/insta_img_3.jpg differ diff --git a/assets/images/insta_img_4.jpg b/assets/images/insta_img_4.jpg new file mode 100644 index 00000000..0f63d330 Binary files /dev/null and b/assets/images/insta_img_4.jpg differ diff --git a/assets/images/insta_img_5.jpg b/assets/images/insta_img_5.jpg new file mode 100644 index 00000000..43579626 Binary files /dev/null and b/assets/images/insta_img_5.jpg differ diff --git a/assets/images/main_banner1.jpg b/assets/images/main_banner1.jpg new file mode 100644 index 00000000..c8ba3e50 Binary files /dev/null and b/assets/images/main_banner1.jpg differ diff --git a/assets/images/main_banner2.jpg b/assets/images/main_banner2.jpg new file mode 100644 index 00000000..915e031f Binary files /dev/null and b/assets/images/main_banner2.jpg differ diff --git a/assets/images/main_banner3.jpg b/assets/images/main_banner3.jpg new file mode 100644 index 00000000..bcde6098 Binary files /dev/null and b/assets/images/main_banner3.jpg differ diff --git a/assets/images/main_banner4.jpg b/assets/images/main_banner4.jpg new file mode 100644 index 00000000..bb97dcb5 Binary files /dev/null and b/assets/images/main_banner4.jpg differ diff --git a/assets/images/main_banner5.jpg b/assets/images/main_banner5.jpg new file mode 100644 index 00000000..a4df1cd3 Binary files /dev/null and b/assets/images/main_banner5.jpg differ diff --git a/assets/images/main_banner6.jpg b/assets/images/main_banner6.jpg new file mode 100644 index 00000000..5d90a219 Binary files /dev/null and b/assets/images/main_banner6.jpg differ diff --git a/assets/images/main_banner7.jpg b/assets/images/main_banner7.jpg new file mode 100644 index 00000000..9b2c99b3 Binary files /dev/null and b/assets/images/main_banner7.jpg differ diff --git a/assets/images/main_banner8.jpg b/assets/images/main_banner8.jpg new file mode 100644 index 00000000..2b497ffe Binary files /dev/null and b/assets/images/main_banner8.jpg differ diff --git a/assets/images/main_card_1.jpg b/assets/images/main_card_1.jpg new file mode 100644 index 00000000..18c20ed8 Binary files /dev/null and b/assets/images/main_card_1.jpg differ diff --git a/assets/images/main_card_2.jpg b/assets/images/main_card_2.jpg new file mode 100644 index 00000000..26e5ccb3 Binary files /dev/null and b/assets/images/main_card_2.jpg differ diff --git a/assets/images/main_card_3.jpg b/assets/images/main_card_3.jpg new file mode 100644 index 00000000..044d992c Binary files /dev/null and b/assets/images/main_card_3.jpg differ diff --git a/assets/images/recommend_product1.jpg b/assets/images/recommend_product1.jpg new file mode 100644 index 00000000..ae19e8f7 Binary files /dev/null and b/assets/images/recommend_product1.jpg differ diff --git a/assets/images/recommend_product2.jpg b/assets/images/recommend_product2.jpg new file mode 100644 index 00000000..3a6b4e25 Binary files /dev/null and b/assets/images/recommend_product2.jpg differ diff --git a/assets/images/recommend_product3.jpg b/assets/images/recommend_product3.jpg new file mode 100644 index 00000000..bcaf94a3 Binary files /dev/null and b/assets/images/recommend_product3.jpg differ diff --git a/assets/images/recommend_product4.jpg b/assets/images/recommend_product4.jpg new file mode 100644 index 00000000..f304804d Binary files /dev/null and b/assets/images/recommend_product4.jpg differ diff --git a/assets/images/recommend_product5.jpg b/assets/images/recommend_product5.jpg new file mode 100644 index 00000000..b7bbf38b Binary files /dev/null and b/assets/images/recommend_product5.jpg differ diff --git a/assets/images/recommend_product6.jpg b/assets/images/recommend_product6.jpg new file mode 100644 index 00000000..bd50813c Binary files /dev/null and b/assets/images/recommend_product6.jpg differ diff --git a/assets/images/review_1.jpeg b/assets/images/review_1.jpeg new file mode 100644 index 00000000..71b871b9 Binary files /dev/null and b/assets/images/review_1.jpeg differ diff --git a/assets/images/review_2.jpg b/assets/images/review_2.jpg new file mode 100644 index 00000000..81adc08d Binary files /dev/null and b/assets/images/review_2.jpg differ diff --git a/assets/images/review_3.jpg b/assets/images/review_3.jpg new file mode 100644 index 00000000..f3cd0b83 Binary files /dev/null and b/assets/images/review_3.jpg differ diff --git a/assets/images/review_4.jpg b/assets/images/review_4.jpg new file mode 100644 index 00000000..a569a640 Binary files /dev/null and b/assets/images/review_4.jpg differ diff --git a/assets/images/review_product_1.jpg b/assets/images/review_product_1.jpg new file mode 100644 index 00000000..c441d83b Binary files /dev/null and b/assets/images/review_product_1.jpg differ diff --git a/assets/images/review_product_2.jpg b/assets/images/review_product_2.jpg new file mode 100644 index 00000000..60dac739 Binary files /dev/null and b/assets/images/review_product_2.jpg differ diff --git a/assets/images/review_product_3.jpg b/assets/images/review_product_3.jpg new file mode 100644 index 00000000..5f1fc751 Binary files /dev/null and b/assets/images/review_product_3.jpg differ diff --git a/assets/images/review_product_4.jpg b/assets/images/review_product_4.jpg new file mode 100644 index 00000000..6c6b84cd Binary files /dev/null and b/assets/images/review_product_4.jpg differ diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 00000000..cdf76b37 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,180 @@ +.footer{ + font-family: 'Noto Sans KR', 'Malgun Gothic'; + width: 100%; + border-top: 1px solid #aaa; + border-bottom: 1px solid #aaa; + background-color: #f0f0f0; + border: none; + margin-top: 120px; + float: bottom; +} + +.footer > div { + width: 1200px; + padding: 55px 20px 20px; + margin: 0px auto; +} + +.footer__top { + height: 146px; + padding-bottom: 30px; + border-bottom: 1px solid #e0e0e0; +} +.footer__top > ul, +.footer__bottom > ul { + display: flex; + flex-direction: row; +} +.footer__top > ul > *, +.footer__bottom > ul > * { + flex: 1 1 auto; +} + +.footer__inner { + position: relative; + /* float: left; */ + margin-right: 120px; +} + +.footer__inner:first-of-type { + width: 240px; + margin-right: 0px; +} +.footer__inner:last-of-type { + margin-right: 0px; +} +.footer__inner-title { + font-size: 13px; + font-weight: 500; + margin-bottom: 10px; + color: #333; +} +.footer__inner-content { + margin-bottom: 14px; + font-size: 12px; +} + +.footer__inner dl { + display: flex; + width: 330px; +} + +.inner__title-width{ + width: 110px; + font-weight: normal; + line-height: 30px; +} + +.footer-top__button { + position: relative; + display: inline-block; + padding: 8px 12px 8px 36px; + font-size: 12px; + line-height: 18px; + border-radius: 2px; + border: solid 1px #aaa; + background-color: rgba(255, 255, 255, 0.8); + cursor: pointer; +} + +.footer__inner dl > dd, +.footer-top__button { + margin: 0 0 10px 0; + z-index: 10; + width: fit-content; +} + +.kakao__button { + padding: 5px 16px 5px 16px; + font-weight: bold; +} +.kakao__button::after { + content: ''; + background-image: url(../assets/icons/icn_kakao_blck.svg); + background-repeat: no-repeat; + position: static; + display: inline-block; + width: 20px; + height: 20px; + margin: 0 0 -5px 6px; + background-size: 20px; + background-position: center; +} +.service__button { + position: relative; + display: inline-block; + padding: 5px 12px; + font-size: 12px; + line-height: 18px; + font-weight: bold; + border-radius: 2px; + border: solid 1px #aaa; + background-color: rgba(255, 255, 255, 0.8); + cursor: pointer; + box-sizing: border-box; +} +.footer__inner__item { + font-size: 13px; +} +.footer__inner__item p{ + position: relative; + margin-bottom: 2px; + font-weight: 300; +} +.footer__inner__item p:first-of-type { + padding: 7px 0px 0px 0px; + font-weight: 500; + +} +.footer__inner__item > p > span{ + margin-right: 15px; +} +.footer__inner__item > p:last-of-type > span { + margin-right: 5px; +} + +.footer__icons { + margin-bottom: 10px; +} +.footer__icons > a { + margin-right: 4px; +} + +.footer__inner--width{ + width: 890px; +} +.footer__inner--width ul:first-of-type { + float: left; +} +.footer__inner--width ul:last-of-type { + display: inline-flex; + height: 140px; + align-items: flex-end; + float: right; + margin: 0 49px 0 0; +} +.footer__inner--width ul:first-of-type li { + margin-bottom: 14px; + font-size: 12px; +} +.footer__inner--width ul:last-of-type li { + float: left; + margin-left: 15px; + margin-bottom: 0; +} + +.footer__bottom { + margin-top: 30px; +} + +.icon__spc{ + width:45px; + height:auto; +} +.icon__isms{ + display: inline-block; + width: 45px; + height: 39px; + margin-bottom: -4px; + margin-left: -3px; +} \ No newline at end of file diff --git a/css/general.css b/css/general.css new file mode 100644 index 00000000..1694e93a --- /dev/null +++ b/css/general.css @@ -0,0 +1,54 @@ +/* reset css */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +a { + text-decoration: none; +} + +* { + font-family: 'Noto Sans KR'; + letter-spacing: -1.5px; + color: #333; +} \ No newline at end of file diff --git a/css/header.css b/css/header.css new file mode 100644 index 00000000..f43d2716 --- /dev/null +++ b/css/header.css @@ -0,0 +1,217 @@ +/* gnb */ +.main-gnb { + width: 100%; + min-width: 500px; + position: fixed; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + z-index: 99; + padding: 5px 40px; + box-sizing: border-box; + background-color: #fff; +} + +.main-gnb > div{ + display: flex; + width: 100%; + max-width: 1920px; + justify-content: space-between; +} + +.main-gnb__item, +.main-gnb__inner, +.main-gnb__user-menu { + height: 40px; + display: flex; + align-items: center; +} + +.main-gnb__inner > li, +.main-gnb__inner > li:first-of-type { + font-family: 'Noto Sans KR'; + display: flex; + height: 40px; + margin-right: 16px; + font-size: 15px; + font-weight: 500; + align-items: center; + white-space: nowrap; +} + +.main-gnb__inner > li:first-of-type { + display: flex; + width: 20px; + height: 40px; + align-items: center; + margin-right: 22px; +} + +.main-gnb__button { + width: 30px; + height: 30px; + background-image: url(../assets/icons/icon_menu_30px.svg); +} +.gnb-button { + background-color: #fff; + background-position: center; + background-repeat: no-repeat; + border: 0px; + font-size: 0px; + cursor: pointer; +} + +.bar { + margin-right: 10px !important; + +} + +.main-gnb__logo{ + position: absolute; + left: calc(50% - 42.5px); +} + +.main-gnb__user-menu li { + font-family: 'Noto Sans KR'; + text-align: right; + display: flex; + float: left; + font-weight: 400; + font-size: 14px; + margin-left: 16px; + align-items: center; +} +.main-gnb__user-menu li:hover a { + cursor: pointer; + color: #ba0e2f; +} +.search-cart-box { + display: flex; + text-align: right; + align-items: center; +} +.search-button { + width: 30px; + height: 30px; + background-image: url(../assets/icons/icon_search_30px.svg); + margin-left: 8px; +} +.cart-button { + width: 30px; + height: 30px; + background-image: url(../assets/icons/icon_cart_30px.svg); +} + +/* drop down menu */ +.gnb__inner { + width: 60px; + padding: 19.5px 20px; + position: absolute; + top: 52px; + text-align: center; + letter-spacing: -1.5px; + margin-left: -38px; + z-index: 11; + border: 1px solid #555; + background-color: white; + display: none; +} + +.gnb__inner li { + float: none; + text-align: center; + font-size: 14px; + font-weight: 300; + padding: 5.5px 0px; + line-height: normal; +} +.gnb__inner li a { + display: inline-block; + width: 100%; + height: auto; +} + +.gnb__wrapper:hover { + .gnb__inner{display: block;} +} + + +/* aside menu */ +.asd-box { + position: fixed; + right: 20px; + bottom: 40px; + width: 100%; + max-width: 112px; + z-index: 900; + font-family: "Noto Sans KR"; +} +.chtbot__box { + position: relative; + width: 100%; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 0 18px 0; +} +.scrolltop__button { + display: none; + font-size: 0; + margin-bottom: 16px; + width: 50px; + height: 50px; + padding: 10px; + border: 0; + border-radius: 100px; + box-shadow: 0px 3px 10px rgb(0 0 0 / 20%); + background-color: #F0F0F0; + background-image: url(../assets/icons/arrow_t.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 18px; + cursor: pointer; +} +.chtbot__button, +.review__button { + display: block; + width: 82px; + height: 40px; + margin-bottom: 8px; + line-height: 40px; + font-size: 13px; + font-weight: 500; + color: rgb(255, 255, 255); + text-align: center; + background-color: rgb(34, 34, 34); + border-radius: 20px; + cursor: pointer; +} +.chtbot__button:hover, +.review__button:hover { + background-color: #aaaaaa; +} + +.recent__box { + width: 110px; + padding: 7px 0; + position: relative; + display: inline-block; + text-align: center; + background-color: #fff; + border-top: 0.1px solid rgba(34, 34, 34, 0.5); + border-bottom: 0.1px solid rgba(34, 34, 34, 0.5); + opacity: 0.8; +} +.more__history { + cursor: pointer; +} +.more__history > img { + margin: 10px auto; +} +.recent__count { + margin: 7px 0 15px 0; + font-size: 12px; +} \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..52edf5ae --- /dev/null +++ b/css/main.css @@ -0,0 +1,685 @@ +body { + margin: 0; + padding: 0px; + font-family: 'Noto Sans KR', 'Malgun Gothic'; + letter-spacing: -1.5px; + color: #333; +} +* { + font-family: inherit; +} + +.section { + min-width: 1200px; + width: 100%; +} + +/* main banner */ +.swiper-container { + height: 790px; + position: relative; + margin-top: 50px; + overflow-x: hidden; + overflow-y: hidden; + min-width: 1200px; + width: 100%; +} +.swiper-wrapper { + position: absolute; + top: 0; + left: 50%; + margin-left: -960px; +} +.swiper-slide > img { + width: 1913px; + border-style: none; +} + +.swiper-slide > a { + position: absolute; + width: 1300px; + height: 790px; + background-color: rgba(0, 0, 0, 0.001); + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + cursor: pointer; +} + +.swiper__button__prev, +.swiper__button__next { + position: absolute; + width: 250px; + height: 385px; + padding-top: 450px; + background-color: rgba(0, 0, 0, 0.001); + border: none; + z-index: 1; +} +.swiper__button__prev { + padding-left: 50px; + left: 50px; +} +.swiper__button__next { + padding-right: 50px; + right: 50px; +} + +.swiper-button-prev, +.swiper-button-next { + width: 54px; + height: 54px; + background-position: center; + border-radius: 50%; + border: none; +} +.swiper-button-prev{ + background: url(../assets/icons/slide_l.png) no-repeat; +} +.swiper-button-next{ + background: url(../assets/icons/slide_r.png) no-repeat; +} + + +.swiper-button-prev::after, +.swiper-button-next::after { + display: none; +} + + +/* recommend sectio */ +.main-recommend { + display: inline-block; + text-align: center; + width: 100%; + padding-top: 50px; + border-bottom: 1px solid #eee; +} +.recommend__title { + display: inline-block; + text-align: center; + width: 100%; + min-width: 1200px; + font-family: 'Noto Sans KR'; + font-weight: 500; + font-size: 16px; + color: #333333; + text-align: center; + letter-spacing: 0px; +} +.recommend__lists { + display: inline-flex; + width: 1472px; + justify-content: space-between; +} +.recommend__lists figure { + width: 0 auto; + display: inline-block; + padding: 32px 16px; + margin: 0; +} +.recommend__lists figure > img { + display: inline-block; + width: 213px; + height: 213px; +} +.recommend__product__title { + display: inline-block; + width: 100%; + margin-top: 5px; + text-align: start; + max-width: 210px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 12px; + font-family: "Spoqa Han Sans"; + font-weight: normal; + font-style: normal; + text-decoration: none; + color: rgb(51, 51, 51); + letter-spacing: 0px; +} +.recommend__product__price { + display: inline-block; + width: 100%; + margin-top: 3px; + font-size: 12px; + max-width: 210px; + font-family: "Spoqa Han Sans"; + font-weight: normal; + font-style: normal; + text-align: start; + text-decoration: none; + color: rgb(200, 10, 30); + letter-spacing: 0px; +} + + +/* main card */ +.main-card { + margin: 70px auto; +} +.main__card__list { + width: 1491px; + margin: 0px auto; + overflow: hidden; + text-align: center; + font-size: 0px; + display: flex; +} +.main__card__list:first-of-type { + padding-left: 45px; +} + +.main__card__list > a { + margin-bottom: 25px; +} +.main__card__list > a:last-of-type { + margin-left: 20px; +} +.main__card__list li { + width: 464px; + height: 339px; + margin-right: 25px; + margin-left: 20px; + display: inline-block; + text-align: center; + position: relative; + overflow: hidden; +} +.main__card__list li img { + width: 100%; + transform: scale(1); + transition: .8s; +} +.main__card__list li img:hover { + transform: scale(1.02); + transition: .8s; +} + + +/* review section */ +.review-section { + padding: 0; + display: inline-block; +} +.review-section > div { + background-color: #fff; +} +.go__review { + position: relative; + display: inline-flex; + width: 100%; + height: 72px; + align-items: center; + justify-content: center; + background-color: #f0f0f0; +} +.go__review__logo { + display: inline-block; + width: 172px; + height: 32px; + background-image: url(../assets/icons/logo_myiloomlf.svg); + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} +.go__review__text { + display: inline-flex; + font-size: 18px; + color: #333333; + margin-left: 30px; +} +.go__review__button { + position: absolute; + right: 380px; + display: inline-flex; + align-items: center; + border: none; + margin: 0; + padding: 0; +} +.go__review__button::after { + display: inline-block; + content: ''; + width: 8px; + height: 10px; + margin-left: 10px; + background-image: url(../assets/icons/arrow_r_black.svg); + background-size: contain; + background-repeat: no-repeat; +} + +.review__box { + margin: 0 auto; + padding: 60px 20px 0 20px; + width: 1200px; + align-items: center; + justify-content: center; + flex-direction: column; + box-sizing: border-box; +} +.review__box > div { + position: relative; + display: inline-flex; + width: 100%; +} + +.review__ul { + display: inline-flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 500px; +} + +.review__card { + height: 500px; + display: block; + width: calc(100%/4 - 30px); + box-sizing: border-box; +} + +.review__main__box { + width: 100%; + min-height: 410px; + height: auto; + position: relative; + display: inline-block; + border-radius: 8px 8px 8px 8px; + +} +.review__main__box::before { + content: ''; + position: absolute; + top: 10px; + right: 10px; + width: 24px; + height: 24px; + background: url(../assets/icons/icn_inimgs.svg) no-repeat center; + z-index: 2; +} + +.review__card__img { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: calc(100% - 150px); + max-height: 260px; + border-radius: 8px 8px 8px 8px; + overflow: hidden; +} +.review__card__img > img { + width: 100%; + height: 260px; + object-fit: cover; + cursor: pointer; +} + +.review__card__content { + position: absolute; + bottom: 0px; + left: 0px; + display: inline-block; + width: 100%; + height: 150px; + padding: 18px 0; + box-sizing: border-box; + overflow: hidden; +} +.review__star { + display: inline-block; + width: 100%; +} +.review__star__point { + display: block; + float: left; + width: 22px; + height: 22px; + font-size: 0; + line-height: 0; + background: url(../assets/icons/icn_star_on.svg) no-repeat center; +} + +.review__text { + margin: 16px 0 0 0; +} +.review__text__title { + display: inline-block; + width: 100%; + margin: 0; + font-size: 16px; + font-weight: 500; + line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.review__text > dd { + display: inline-block; + width: 100%; + margin: 9px 0 0 0; +} +.review__text__content { + float: left; + width: 100%; + max-height: 44px; + font-size: 14px; + line-height: 22px; + color: #666; + overflow: hidden; + text-overflow: ellipsis; +} + +.review__main__product { + position: relative; + display: inline-block; + width: 100%; + margin: 0; + padding: 20px 14px 0 14px; + border-radius: 0 0 8px 8px; + box-sizing: border-box; +} +.review__main__product::before { + content: '\2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219 \2219'; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 14px; + line-height: 0px; + overflow: hidden; + color: #ccc; + font-size: 16px; + letter-spacing: 2px; +} +.review__product__img{ + display: inline-flex; + align-items: center; + justify-content: center; + float: left; + width: 70px; + height: 70px; + margin: 0 18px 0 0; + border-radius: 35px; + overflow: hidden; + cursor: pointer; +} +.review__product__img > img { + display: block; + width: 100%; + height: auto; +} + +.review__product__content { + display: inline-block; + width: calc(100% - 88px); +} +.review__product__content > dl { + margin: 2px 0 0 0; +} +.review__product__dt{ + display: flex; + justify-content: space-between; + font-size: 13px; + font-weight: bold; + line-height: 19px; + box-sizing: border-box; +} +.review__product__title { + display: inline-block; + width: 91px; + margin: 0; + font-size: 13px; + font-weight: bold; + line-height: 19px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.review__product__likes { + position: relative; + display: inline-block; + width: 53px; + padding: 0 20px 0 0; + text-align: right; + font-weight: normal; + box-sizing: border-box; + font-size: 13px; + line-height: 19px; +} +.review__product__likes::after { + top: 1.5px; + right: 0px; + width: 16px; + height: 16px; + position: absolute; + content: ''; + background: url(../assets/icons/icn_likeHrt.svg) no-repeat center; + background-size: cover; + +} +.review__product__dd { + font-size: 13px; + margin: 4px 0 0 0; +} +.review__product__category { + display: inline-block; + width: 100%; + line-height: 19px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.review__product__price { + margin: 6px 0 0 0; + display: inline-block; + width: 100%; + line-height: 19px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.review__product__price::after { + content: " 원"; + line-height: 19px; + white-space: nowrap; +} + + + +/* instagram section */ +.insta-section { + margin: 60px auto 0px; + background-color: #f0f0f0; + height: 490px; + display: block; +} +.card__title { + padding: 50px 0px 10px; + display: flex; + flex-direction: column; + text-align: center; +} +.card__title > img:first-of-type { + width: 360px; + margin: 0 auto; +} +.card__title > img:last-of-type { + width: 375px; + margin: 0 auto; +} +.insta__box { + height: 282px; + width: auto; + margin: 0px auto; + overflow: hidden; + text-align: center; + font-size: 0px; +} +.insta__card { + margin-left: 20px; + margin-right: 10px; + width: 282px; + height: 282px; + display: inline-block; + text-align: center; + position: relative; + overflow: hidden; +} +.insta__card > a { + height: 100%; + display: inline-block; + position: relative; + width: 100%; + z-index: 10; +} +.insta__card > a > img { + width: 282px; + height: 282px; + object-fit: cover; + object-position: top; +} + + +/* quick menu section */ +.quick-menu { + height: 540px; +} +.quick-menu__box { + display: flex; + justify-content: space-between; + width: 800px; + margin: 50px auto 0px auto; + overflow: hidden; + text-align: center; + font-size: 0px; +} +.quick-menu__card { + margin-left: 20px; + display: inline-block; + text-align: center; + position: relative; + overflow: hidden; + cursor: pointer; +} +.quick-menu__card__img { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; +} +.quick-menu__card__img > span { + display: inline-block; + width: 200px; + height: 200px; + cursor: pointer; +} +.consulting { + background-image: url(../assets/icons/quick_menu_consulting.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.quick-menu__card:hover .consulting { + background-image: url(../assets/icons/quick_menu_consulting_hover.svg); + +} +.quick-menu__card:hover span { + color: #ba0e2f; +} +.store { + background-image: url(../assets/icons/quick_menu_store.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.quick-menu__card:hover .store{ + background-image: url(../assets/icons/quick_menu_store_hover.svg); + +} +.refurb { + background-image: url(../assets/icons/quick_menu_refurb.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.quick-menu__card:hover .refurb { + background-image: url(../assets/icons/quick_menu_refurb_hover.svg); + +} +.quick-menu__card__info { + padding: 30px; + line-height: 140%; + cursor: pointer; +} +.quick-menu__card__info > span { + display: block; + +} +.quick-menu__card__title{ + font-size: 15px; +} +.quick-menu__card__desc { + padding-top: 24px; + display: inline-block; + font-size: 17px; +} + + + +/* notice section */ +.notice-section { + display: block; + width: 800px; + text-align: center; + padding-bottom: 60px; + margin: 0 auto; +} +.notice__list { + margin-top: 50px; + display: inline-flex; + width: 100%; + flex-direction: column; + justify-content: space-between; +} +.notice__list li { + display: flex; + justify-content: space-between; + margin-bottom: 18px; + font-size: 18px; + line-height: 27px; + letter-spacing: -1.44px; +} +.notice__list li a { + display: inline-block; + width: 600px; + color: #333333; + font-size: 18px; + line-height: 27px; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.notice__list li span { + color: #aaaaaa; +} +.more-button { + width: 240px; + height: 50px; + border: 1px solid #aaa; + margin-top: 60px; + color: #333333; + background-color: #fff; + font-weight: 300; + cursor: pointer; +} +.more-button:hover { + border: 1px solid #63666a; + background-color: #63666a; + color: #fff; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..b69b7fdc --- /dev/null +++ b/index.html @@ -0,0 +1,745 @@ + + + + + + + + + + + + + + + 일룸 + + + +
+ + + + + + + +
+ + + +
+ + +
+ +
+ +
+ 메인_배너_1 + +
+
+ 메인_배너_2 + +
+
+ 메인_배너_3 + +
+
+ 메인_배너_4 + +
+
+ 메인_배너_5 + +
+
+ 메인_배너_6 + +
+
+ 메인_배너_7 + +
+
+ 메인_배너_8 + +
+ +
+ +
+ +
+
+ +
+ +
+ + +
+

고객님을 위한 제품 추천

+ +
+ + +
+ +
+
  • + + + +
  • +
  • + + + +
  • +
  • + + + +
  • +
    +
    + + +
    +
    +
    + + 일룸으로 달라진 특별한 생활을 만나보세요 + 더보기 +
    + +
    +
    +
      +
    • +
      + + 리뷰_이미지_1 + +
      +
      + 별점1 + 별점2 + 별점3 + 별점4 + 별점5 +
      +
      +

      여러모로 만족스럽네요:)

      +

      + 빋아보고 사이즈가 커서 좀 걱정했는데 + 생각보다 공간차지 안하고 잘어울려서 넘 좋습니다!! + 컬러도 무난해서 다른 가구들이랑 잘 어울리고 + 강아지 두마리를 키우고 있어 + 팻프렌들리라는 점이 맘에 들었어요 ! + 푹 꺼지는 소파가 아니라서 자세나 허리에 + 훨씬 좋을 거 같아요 :) + 소파 아래 멀티탭이 킬포👍🏻👍🏻 +

      +
      +
      +
      + +
      + + 리뷰_상품_이미지_1 + +
      +
      +
      + 컴팩트 코너 우(멀티탭,패브릭) + +
      +
      + 거실 + 2,390,000 +
      +
      +
      +
      +
    • +
    • +
      + + 리뷰_이미지_2 + +
      +
      + 별점1 + 별점2 + 별점3 + 별점4 + 별점5 +
      +
      +

      라연님의 일룸생활

      +

      + 5개월 된 남매쌍둥이 키우고 있어요♥ + + 아기침대를 졸업하고 어디서 재워야할까 몇날며칠을 고민한 끝에 일룸 쿠시노를 선택했어요. 엄마로써 가장 중점적으로 생각한 안전과 건강! 일단 가드의 높이가 80cm로 매우 높은게 가장 맘에 들었어요. 매트리스 길이를 빼고서도 45~50cm 정도가 되다니! 아기들이 일어서기 시작하면 가드를 넘어가려고 한다는 후기를 많이 본 터라, 이 부분을 가장 중점적으로 생각했어요. 그리고 또 끌린점은 가드가 가죽이라는점! 다른 타사 제품의 경우에는 디자인이 예뻐도 가드가 패브릭 등으로 먼지가 많이 쌓인다는점이 엄마인 저에게 마이너스 요인이 되었어요. 먼지는 아기들에게는 매우 치명적이니까요! + + 그 다음 구입한 일룸 에디키즈 서랍형옷장! + 옷장도 너무 많은 고민을 거쳐 선택한 제품이에요. 타사 제품을 사용한 후기들 보니, 가구에서 냄새가 많이 난다고 들었는데 에디키즈는 냄새가 없더라구요! + 그냥 물티슈로 닦고 환기만 시켜주었어요. 또 한번 감동받은 점은, 아이들이 사용할 제품이라 손잡이도 둥근모양의 안전을 생각했다는 점이에요. 서랍도 부드럽게 잘 열리고 옷장 안 구성도 꽤 깔끔하고, 수납을 잘 할 수 있게끔 되어있더라구요. + 하나는 준우꺼, 하나는 연우꺼 예쁜 옷들로 채워줄꺼에요! + + 집 인테리어가 화이트 톤임에도 불구하고 가구가 집과 매우 잘 어울어져 따뜻한 느낌과 포근한 느낌을 주는거 같아요. 우리 둥이들이 이렇게 예쁜 침대에서 예쁜꿈꾸며 건강하게 자라주길 바라요. 일룸에서 둥이들의 방을 꾸민 일이 올해 들어 가장 잘한 일 같아요! 땡큐 일룸♥ +

      +
      +
      +
      + +
      + + 리뷰_상품_이미지_2 + +
      +
      +
      + 저상형 침대 (SS) - 범퍼가드형 + +
      +
      + 침실 + 962,000 +
      +
      +
      +
      +
    • +
    • +
      + + 리뷰_이미지_3 + +
      +
      + 별점1 + 별점2 + 별점3 + 별점4 + 별점5 +
      +
      +

      재린님의 일룸생활

      +

      + 12살이라 관절이 걱정되어 낮은 캣타워 찾던중에 거실 인테리어랑 잘 맞는 일룸 캣타워로 구매하게 되었어요! + 두번째 방석칸을 제일 좋아하고 날씨가 따뜻해지면서 해먹도 점점 쓰는것 같아요❤️ 8키로정도 인데도 해먹 잘 맞아요 + 시공 해주신 기사님도 너무너무 친절하셨습니다 +

      +
      +
      +
      + +
      + + 리뷰_상품_이미지_3 + +
      +
      +
      + 커스텀 캣타워 (L)_투명해먹형(온라인몰 전용) + +
      +
      + + 599,000 +
      +
      +
      +
      +
    • +
    • +
      + + 리뷰_이미지_4 + +
      +
      + 별점1 + 별점2 + 별점3 + 별점4 + 별점5 +
      +
      +

      효순님의 일룸생활

      +

      + 볼때마다 기분좋은 가구^^ + 안방의 분위기 메이커~~ + 매장을 3번 방문한 끝에 선택했어요. + 고민끝에 고른 ‘일룸 바젤 화이트’ 침대입니다!😍😍 + 색상은 월넛과 화이트 중에 어떤 인테리어와도 잘 어울리는 화이트를 선택했어요. + 설치하고 보니 방이 환하고 넓어보여요ㅎㅎ + 색상이 고민일땐 무조건 화이트가 진리인거 같아요☺️ + 신혼가구로도 추천드립니다~^^ + 침대 헤드에 조명이 부착되어 스탠드가 따로 필요없어요. + 침대 우측에 패널도 함께 했더니 호텔 분위기 나면서 사용하기 편해요. 패널이 있어 협탁을 놓지 않아도 너무 이쁩니다 + 조명은 물론 콘센트가 있어 충전도 할 수 있고 + 간단한 책도 수납이 되고 소지품도 올려 놓을수 있어요. + 바젤 침대 하나로 인테리어와 편의성까지 함께 합니다! + 바젤 침대 후회 없어요. +

      +
      +
      +
      + +
      + + 리뷰_상품_이미지_4 + +
      +
      +
      + 침대(Q) + +
      +
      + 침실 + 759,000 +
      +
      +
      +
      +
    • +
    +
    +
    +
    +
    + + +
    +
    + 인스타그램 아이콘 1 + 인스타그램 아이콘 2 +
    + +
    + + +
    +
    + quickmenu img +
    + +
    + + +
    +
    + 공지 이미지 +
    + + +
    + +
    + + + + + + + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..9ba9f623 --- /dev/null +++ b/js/main.js @@ -0,0 +1,39 @@ +const scrollToTop = document.querySelector('.scrolltop__button'); +const SECONDS_TO_MS = 1000; + +ScrollToTheTop(); + +const mySwiper = new Swiper('.swiper-container', { + direction: 'horizontal', + loop: true, + autoplay: { + delay: 5.5 * SECONDS_TO_MS + }, + speed: 1 * SECONDS_TO_MS, + slidesPerView: 1, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + effect: 'fade' +}); + +function ScrollToTheTop () { + // 스크롤에 따라 버튼 display + window.addEventListener('scroll', () => { + if (document.querySelector('html').scrollTop > 750) { + scrollToTop.style.display = "block"; + } else { + scrollToTop.style.display = "none"; + } + }); + + // 클릭 시 상단으로 이동 + scrollToTop.addEventListener('click', () => { + window.scrollTo({ + top: 0, + left: 0, + behavior: 'smooth' + }); + }); +} \ No newline at end of file