diff --git a/README.md b/README.md index cc6a3b23..d0ff5f3f 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,18 @@ -[참고 내용] +# [여기어때](https://www.goodchoice.kr/) 클론코딩 -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +- 래퍼런스 https://www.goodchoice.kr/ +- 배포주소 : https://willowy-truffle-a69129.netlify.app/ -과제 수행 및 제출 방법 +--- -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 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +## 아쉬운점, 느낀점 -선택 요구사항 - -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) - -손쉬운 이미지 추출 방법 - -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. - -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! +- 배너 스와이프 기능을 구현을 못했는데 리펙토링을 통해서 꼭 구현하고싶다. diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..31cf79a5 --- /dev/null +++ b/css/main.css @@ -0,0 +1,724 @@ +@import "./reset.css"; + +* { + outline: 0; +} + +p { + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; +} + +a { + text-decoration: none; +} + +html, +body { + font-family: "Pretendard", "Apple SD Gothic Neo", "맑은 고딕", "맑은고딕", "Malgun Gothic", sans-serif; + font-size: 14px; + line-height: 1; + color: rgba(0, 0, 0, 0.87); + -webkit-text-size-adjust: none; +} + +header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 72px; + background: #f7323f; + transition: 0.4s; + z-index: 210; + display: block; +} + +header.scroll { + background-color: #fff; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1); +} + +section { + position: relative; + width: 1024px; + height: 64px; + background: none; + margin: 0 auto; + display: block; +} + +body { + display: block; + margin: 8px; +} +ul, +ol, +li { + list-style: none; +} + +address, +caption, +em, +var { + font-style: normal; + font-weight: normal; +} +img { + border: 0; + vertical-align: top; +} + +li { + display: list-item; + text-align: -webkit-match-parent; +} + +header section h1 { + position: absolute; + top: 26px; + left: 31px; + width: 96px; + height: 20px; + margin: 0; + background: url("//image.goodchoice.kr/images/web_v3/h1_logo_pc_w.png") 0 0 no-repeat; + background-size: 96px auto; +} + +header.scroll section h1 { + background: url("//image.goodchoice.kr/images/web_v3/h1_logo_pc.png") 0 0 no-repeat; + background-size: 96px auto; +} + +/* header > section { +} */ + +header section .btn_srch { + position: absolute; + border: none; + text-indent: -9999px; + top: 22px; + right: 396px; + z-index: 10; + width: 30px; + height: 30px; + background: url("//image.goodchoice.kr/images/web_v3/ico_srch_2.png") 50% 50% no-repeat; + background-size: 24px auto; + transition: right 0.5s; +} + +header.scroll section .btn_srch { + position: absolute; + border: none; + text-indent: -9999px; + top: 22px; + right: 396px; + z-index: 10; + width: 30px; + height: 30px; + background: url("//image.goodchoice.kr/images/web_v3/ico_srch.png") 50% 50% no-repeat; + background-size: 24px auto; +} + +textarea, +button, +input, +select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border-radius: 0; + font-family: "Pretendard", "Apple SD Gothic Neo", "맑은 고딕", "맑은고딕", "Malgun Gothic", sans-serif; +} + +button { + padding: 0; + cursor: pointer; +} + +button span { + position: static; +} + +h2 { + font-size: 24px; + margin-bottom: 35px; + color: rgba(0, 0, 0, 0.87); + font-weight: bold; +} + +::placeholder { + color: #fff; +} + +.scroll ::placeholder { + color: rgb(158, 158, 158); +} + +#content { + overflow: hidden; +} + +.pc .gnb_pc { + display: inline-block; + position: absolute; + top: 27px; + right: 31px; +} + +.gnb_pc li { + display: inline-block; + position: relative; + min-width: 53px; + min-height: 35px; + margin-left: 30px; + vertical-align: top; +} + +.gnb_pc li a { + display: inline-block; + font-size: 18px; + color: rgba(255, 255, 255, 0.8); + letter-spacing: 0; +} + +header.scroll .gnb_pc li a, +header.scroll .gnb_pc li button { + color: rgba(0, 0, 0, 0.87); +} + +.gnb_pc li button { + border: none; + padding: 0; + background: none; + font-size: 18px; + line-height: 1; + color: rgba(255, 255, 255, 0.8); + letter-spacing: 0; +} + +.gnb_pc .list_03 { + display: none; + position: absolute; + top: 0; + left: 0; + border-radius: 5px; + padding: 32px; + background: #fff; + text-align: left; + box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); +} + +.gnb_pc li ul li { + display: block; + min-width: auto; + min-height: auto; + margin: 0 0 14px 0; +} + +.gnb_pc li ul li a, +.gnb_pc li ul li button { + overflow: visible; + display: block; + position: relative; + top: auto; + left: auto; + width: auto; + height: auto; + margin: 0; + font-size: 16px; + color: rgba(0, 0, 0, 0.87); +} + +/* 추천 검색어 */ +.recommend_srch { + display: none; + position: fixed; + top: 72px; + right: 0; + bottom: 0; + left: 0; + z-index: 300; + background: none; +} + +.srch_container { + position: relative; + z-index: 400; + left: 50%; + width: 787px; + height: 352px; + margin-left: -305px; + padding: 24px 20px; + background: #fff; + border-radius: 0 0 4px 4px; + text-align: left; + top: 0; + right: 0; + bottom: 0; + + overflow: hidden; + clear: both; +} + +.recommend_srch .scroll_srch { + clear: both; + overflow: hidden; + position: fixed; + top: 44px; + right: 0; /* bottom:0; */ + left: 0; + z-index: 400; +} +.pc .recommend_srch .scroll_srch { + position: relative; + left: 50%; + width: 787px; + height: 352px; + margin-left: -305px; + padding: 24px 20px; + background: #fff; + border-radius: 0 0 4px 4px; + text-align: left; +} + +.srch_container_wrap { + position: absolute; + z-index: 100; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + width: 100%; + user-select: none; + text-size-adjust: none; +} + +.srch_strong { + margin: 0 0 11px 0; + font-size: 14px; + display: block; + color: rgba(0, 0, 0, 0.87); +} + +.srch_container_wrap li { + margin-bottom: 11px; +} + +.srch_container_wrap li a { + height: auto; + padding: 0; + font-size: 14px; + line-height: normal; + display: block; + color: rgb(0, 121, 107); +} + +.srch_mask { + position: fixed; + top: 72px; + right: 0; + bottom: 0; + left: 0; + z-index: 200; + background: rgba(0, 0, 0, 0.6); + opacity: 0; + transition: 0.4s; +} + +.srch_bar { + position: absolute; + top: 24px; + left: 50%; + right: auto; + width: 725px; + height: 21px; + margin-left: -277px; + background: none; +} + +.srch_bar .wrap_inp { + margin: 0; + padding: 0; + height: auto; + border: none; + border-radius: 0; + background: none; +} + +.srch_bar .wrap_inp input { + margin: 0; + background: none; + font-size: 18px; + border: none; + color: #fff; +} + +.scroll .srch_bar .wrap_inp input { + color: #000; +} + +.btn_cancel { + top: -8px; + right: -41px; + width: 35px; + height: 35px; + background: url(https://image.goodchoice.kr/images/web_v3/ico_close_2.png) 50% 50% no-repeat; + background-size: 24px auto; + text-indent: -9999px; + display: inline-block; + position: absolute; + border: none; + color: #fff; +} + +.scroll .btn_cancel { + top: -8px; + right: -41px; + width: 35px; + height: 35px; + background: url("//image.goodchoice.kr/images/web_v3/ico_close.png") 50% 50% no-repeat; + background-size: 24px auto; + text-indent: -9999px; +} + +.srch_mask.on { + opacity: 1; +} + +.main_spot a { + height: 580px; + display: block; + background: #fff url("//image.goodchoice.kr/images/web_v3/mainspot_2306.png") 50% 100% no-repeat; + background-size: 924px auto; +} + +.main_link { + padding: 32px 0 29px 41px; + background: rgb(253, 253, 253); + overflow: hidden; +} + +.main_link ul { + overflow: hidden; + width: 1024px; + margin: 0 auto; +} + +.main_link li { + float: left; + width: 163px; +} + +.main_link li a { + display: block; + height: 107px; + font-size: 18px; + color: rgba(0, 0, 0, 0.56); + text-align: center; +} + +.main_link li a p { + height: auto; + padding-top: auto; +} + +.main_link li a span { + display: inline-block; + width: 72px; + height: 72px; + margin: 0 auto; +} + +.ico_01 { + background: url("../img/모텔.png") no-repeat; + background-size: 72px auto; +} +.ico_02 { + background: url("../img/호텔리조트.png") no-repeat; + background-size: 72px auto; +} +.ico_03 { + background: url("../img/펜션.png") no-repeat; + background-size: 72px auto; +} +.ico_04 { + background: url("../img/게스트하우스.png") no-repeat; + background-size: 72px auto; +} +.ico_05 { + background: url("../img/캠핑 글램핑.png") no-repeat; + background-size: 72px auto; +} +.ico_06 { + background: url("../img/해외여행.png") no-repeat; + background-size: 72px auto; +} + +.recommend { + width: 1024px; + margin: 0 auto; + overflow: hidden; + padding: 78px 31px 0 31px; +} + +.recommend li:nth-child(even) { + margin-left: 16px; +} + +.recommend li:last-child { + display: block; +} + +.recommend li { + overflow: hidden; + float: left; + position: relative; + width: 473px; + height: 162px; + margin: 0 0 16px 0; + padding: 0 24px 0 186px; + border: 1px solid rgba(0, 0, 0, 0.08); + box-sizing: border-box; +} +.recommend li a { + display: block; + height: 162px; + font-size: 17px; + line-height: 1.6; + color: rgba(0, 0, 0, 0.56); + box-sizing: border-box; +} + +.recommend li img { + position: absolute; + top: 0; + left: 0; + width: 162px; + height: 162px; +} + +.appdown { + display: block; + overflow: hidden; + width: 962px; + height: 320px; + margin: 64px auto 78px auto; + background: url("//image.goodchoice.kr/images/web_v3/bg_appdown.png") center center no-repeat; + background-size: cover; + text-align: center; +} + +.appdown p { + margin: 103px 0 27px 0; + font-size: 28px; + color: rgba(0, 0, 0, 0.87); +} + +.appdown div a { + display: inline-block; + width: 168px; + height: 52px; + margin: 0 4px; +} + +.appdown div a img { + width: 168px; + height: auto; +} + +.event_main { + width: 962px; + margin: 0 auto; +} + +.swiper-container { + width: 962px; + margin-left: auto; + margin-right: auto; + height: auto; + position: relative; + overflow: hidden; + z-index: 1; +} + +.swiper-wrapper ul { + width: calc(962px * 7); + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +.swiper-wrapper ul li img { + width: 100%; + height: 100%; +} + +.ad_ask { + width: 962px; + margin: 24px auto 0 auto; +} + +.ad_ask .pc { + display: block; +} + +.ad_ask ul li { + height: 200px; + border: 1px solid rgba(0, 0, 0, 0.04); + overflow: hidden; +} + +.ad_ask ul li:first-child { + display: inline-block; + float: left; + width: 473px; +} + +.ad_ask ul li:last-child { + display: inline-block; + float: right; + width: 473px; +} + +.ad_ask ul li a { + display: block; + height: 200px; + padding: 0 0 0; +} + +.ad_ask ul li a img { + width: auto; + height: 200px; +} + +footer { + overflow: hidden; + clear: both; + position: relative; + margin-top: 120px; + padding: 63px 31px 40px 31px; + border-top: 1px solid rgba(0, 0, 0, 0.08); + background: rgb(245, 245, 245); + font-size: 13px; + line-height: 20px; + color: rgba(0, 0, 0, 0.38); +} + +footer a { + color: rgba(0, 0, 0, 0.38); +} + +footer .align { + width: 1024px; + margin: 0 auto; +} + +footer .link { + overflow: hidden; +} + +footer .link li { + float: left; + margin-bottom: 5px; + line-height: normal; +} + +footer .link li a { + display: inline-block; +} + +.footer_align_link_3 a { + color: rgba(0, 0, 0, 0.87); +} + +.footer_align_link_6 { + clear: both; +} + +.footer_align_link_5, +.footer_align_link_8 { + clear: none; +} + +footer .link li span { + display: inline-block; + position: relative; + top: -2px; + width: 24px; + font-size: 11px; + text-align: center; +} + +footer .link li button { + padding: 0; + border: none; + background: none; + font-size: 13px; + line-height: 1; + color: rgba(0, 0, 0, 0.38); +} + +.btn_go_top { + display: inline-block; + display: none; + position: fixed; + bottom: 15px; + right: 15px; + z-index: 20; + width: 40px; + height: 40px; + border: none; + background: url("//image.goodchoice.kr/images/web_v3/ico_top.png") 0 0 no-repeat; + background-size: 40px auto; + text-indent: -9999px; +} + +footer p { + clear: both; + padding: 37px 0 24px 0; +} +footer p b { + display: inline-block; + margin-right: 10px; +} + +footer p span { + display: inline-block; +} + +footer address { + line-height: 22px; +} + +footer address span { + display: block; + padding-bottom: 7px; +} + +footer address .order { + display: block; + padding: 6px 0; +} + +.wrap.show, +footer.show { + opacity: 1; + visibility: visible; +} + +.recommend li strong { + display: block; + padding: 38px 0 14px 0; + font-size: 20px; + line-height: 1; + font-weight: normal; + color: rgb(0, 121, 107); +} + +.wrap { + width: 100%; + background: #fff; +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..58fb4137 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,74 @@ +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; +} diff --git "a/img/\352\262\214\354\212\244\355\212\270\355\225\230\354\232\260\354\212\244.png" "b/img/\352\262\214\354\212\244\355\212\270\355\225\230\354\232\260\354\212\244.png" new file mode 100644 index 00000000..c0a5938e Binary files /dev/null and "b/img/\352\262\214\354\212\244\355\212\270\355\225\230\354\232\260\354\212\244.png" differ diff --git "a/img/\353\252\250\355\205\224.png" "b/img/\353\252\250\355\205\224.png" new file mode 100644 index 00000000..8b61f658 Binary files /dev/null and "b/img/\353\252\250\355\205\224.png" differ diff --git "a/img/\353\260\260\353\204\2101.png" "b/img/\353\260\260\353\204\2101.png" new file mode 100644 index 00000000..cde9bf7e Binary files /dev/null and "b/img/\353\260\260\353\204\2101.png" differ diff --git "a/img/\353\260\260\353\204\2102.jpeg" "b/img/\353\260\260\353\204\2102.jpeg" new file mode 100644 index 00000000..6dd80d2a Binary files /dev/null and "b/img/\353\260\260\353\204\2102.jpeg" differ diff --git "a/img/\353\260\260\353\204\2103.png" "b/img/\353\260\260\353\204\2103.png" new file mode 100644 index 00000000..d5c02d2e Binary files /dev/null and "b/img/\353\260\260\353\204\2103.png" differ diff --git "a/img/\353\260\260\353\204\2104.png" "b/img/\353\260\260\353\204\2104.png" new file mode 100644 index 00000000..7aafa436 Binary files /dev/null and "b/img/\353\260\260\353\204\2104.png" differ diff --git "a/img/\353\260\260\353\204\2105.jpeg" "b/img/\353\260\260\353\204\2105.jpeg" new file mode 100644 index 00000000..e281d6df Binary files /dev/null and "b/img/\353\260\260\353\204\2105.jpeg" differ diff --git "a/img/\354\272\240\355\225\221 \352\270\200\353\236\250\355\225\221.png" "b/img/\354\272\240\355\225\221 \352\270\200\353\236\250\355\225\221.png" new file mode 100644 index 00000000..43f2e034 Binary files /dev/null and "b/img/\354\272\240\355\225\221 \352\270\200\353\236\250\355\225\221.png" differ diff --git "a/img/\355\216\234\354\205\230.png" "b/img/\355\216\234\354\205\230.png" new file mode 100644 index 00000000..bdfa76df Binary files /dev/null and "b/img/\355\216\234\354\205\230.png" differ diff --git "a/img/\355\225\264\354\231\270\354\227\254\355\226\211.png" "b/img/\355\225\264\354\231\270\354\227\254\355\226\211.png" new file mode 100644 index 00000000..465de4a3 Binary files /dev/null and "b/img/\355\225\264\354\231\270\354\227\254\355\226\211.png" differ diff --git "a/img/\355\230\270\355\205\224\353\246\254\354\241\260\355\212\270.png" "b/img/\355\230\270\355\205\224\353\246\254\354\241\260\355\212\270.png" new file mode 100644 index 00000000..46901674 Binary files /dev/null and "b/img/\355\230\270\355\205\224\353\246\254\354\241\260\355\212\270.png" differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..4e8e4ec8 --- /dev/null +++ b/index.html @@ -0,0 +1,209 @@ + + + + + + + + 여행할때 여기어때 + + + + + +
+
+
+

+ +

+ + + + + +
+
+ + + +
+
여행할때 여기어때
+ +
+ +
+ +
+

여기어때 소식

+ +
+ +
+

앱 다운 받고 더 많은 혜택 받으세요

+
+ GET IT ON Google Play + Download on the App Store + +
+
+ +
+

이벤트

+
+
+
    +
  • 배너1
    • +
  • 배너2
    • +
  • 배너3
    • +
  • 배너4
    • +
  • 배너5
    • +
+
+
+
+ + + +
+ + +
+ +
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..3bde0a0d --- /dev/null +++ b/js/main.js @@ -0,0 +1,45 @@ +const srch_btn = document.querySelector(".btn_srch"); +const srch_bar = document.querySelector(".srch_bar"); +const gnb_pc = document.querySelector(".gnb_pc"); +const btn_cancel = document.querySelector(".btn_cancel"); +const srch_keyword = document.getElementById("keyword"); +const recommend_srch = document.querySelector(".recommend_srch"); + +const header = document.querySelector("header"); + +const srch_maskOn = document.createElement("div"); + +srch_maskOn.className = "srch_mask on"; + +srch_btn.addEventListener("click", () => srch_OnOffBtn(true)); +btn_cancel.addEventListener("click", () => srch_OnOffBtn(false)); + +function srch_OnOffBtn(isOpen) { + if (isOpen) { + srch_btn.style.right = "797px"; + gnb_pc.style.display = "none"; + recommend_srch.style.display = "block"; + + setTimeout(() => { + srch_bar.style.display = "block"; + srch_keyword.focus(); + }, 500); + + recommend_srch.appendChild(srch_maskOn); + } else { + srch_btn.style.right = "396px"; + srch_bar.style.display = "none"; + gnb_pc.style.display = "block"; + recommend_srch.style.display = "none"; + + srch_maskOn.remove(); + } +} + +window.addEventListener("scroll", function () { + if (window.scrollY > 0) { + header.classList.add("scroll"); + } else { + header.classList.remove("scroll"); + } +}); diff --git a/js/swiper.js b/js/swiper.js new file mode 100644 index 00000000..f358870f --- /dev/null +++ b/js/swiper.js @@ -0,0 +1,31 @@ +const container = document.querySelector(".swiper-container"); +const slide = document.querySelector(".slide"); +const wrapper = document.querySelector(".swiper-wrapper ul"); +const slides = wrapper.querySelectorAll("li"); + +const slideWidth = 962; +const slideCount = slides.length; + +const firstClone = slides[0].cloneNode(true); +const lastClone = slides[slideCount - 1].cloneNode(true); + +wrapper.appendChild(firstClone); +wrapper.insertBefore(lastClone, slides[0]); + +let slideIndex = 1; +wrapper.style.transform = `translate3d(-${slideWidth * slideIndex}px, 0px, 0px)`; + +setInterval(() => { + slideIndex++; + + wrapper.style.transition = "transform 0.5s ease"; + wrapper.style.transform = `translate3d(-${slideWidth * slideIndex}px, 0px, 0px)`; + + if (slideIndex >= slideCount + 1) { + setTimeout(() => { + wrapper.style.transition = "none"; + slideIndex = 1; + wrapper.style.transform = `translate3d(-${slideWidth * slideIndex}px, 0px, 0px)`; + }, 500); + } +}, 3000);