diff --git a/README.md b/README.md index cc6a3b23..c53e1f7d 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,36 @@ -[참고 내용] +# HTML, CSS, JS 클론 코딩 과제 +> 인터파크 메인 페이지 클론 코딩 -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +## 설치 방법 -과제 수행 및 제출 방법 +클론한 사이트: -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +``` +https://www.interpark.com/ +``` +데모 링크: -- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! +``` +https://glistening-salamander-d7cd38.netlify.app/ +``` -필수 요구사항 +## 구현 사항 +- 스크롤 했을 때 요소가 가려지는 헤더 +- 스크롤 했을 때 searchWrap이 사라지고 navMini를 보이게 함 +- hover 하면 submenu가 펼쳐지는 nav +- swiper 라이브러리를 이용한 다양한 형태의 swiper 구현 +- 클릭하면 페이지의 top으로 이동시켜주는 버튼 + +## 필수 요구 사항 - 과제에 대한 설명을 포함한 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. 다운로드! +- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..345f0077 --- /dev/null +++ b/css/style.css @@ -0,0 +1,898 @@ +*{box-sizing: border-box;} +body{ + font-size: 13px; + font-weight: 400; + font-family: 'Pretendard', Helvetica, 'Segoe UI', sans-serif; +} +.inner{ + min-width: 1280px; + width: 1280px; + margin: 0 auto; + padding-top: 30px; + padding-bottom: 60px; +} +.inner--header{ + padding-bottom: 0; +} +button{ + border: none; + background: transparent; + cursor: pointer; + font-family: 'Pretendard', Helvetica, 'Segoe UI', sans-serif; +} +input:focus{ + outline: none; +} +.hidden{display: none !important;} +.section__title{ + width: 100%; + margin-bottom: 30px; + padding: 0 20px; + text-align: center; +} +.section__title h2{ + font-size: 28px; + font-weight: 700; + line-height: 33px; +} +.section__title p{ + margin-top: 2px; + font-size: 18px; + font-weight: 400; + line-height: 24px; + color: hsla(0,0%,7%,0.5); +} +.section__bottom{ + display: flex; + justify-content: center; align-items: center; + width: 100%; +} +.section__bottom .btn__go{ + height: 56px; line-height: 56px; + font-size: 16px; + font-weight: 700; + color: #333; + background: transparent; + margin-top: 20px; + padding: 0 39px; + border: 1px solid rgba(0,0,0,0.1); + border-radius: 38px; +} +.swiper-slide{cursor: pointer;} +.swiper-prev,.swiper-next{ + display: flex; + justify-content: center; align-items: center; + position: absolute; + top:50%; + transform: translateY(-50%); + width: 48px; height: 48px; + border-radius: 50%; + background-color: rgba(255,255,255,0.9); + box-shadow: 0px 0px 8px rgba(0,0,0,.13); + font-size: 0; + z-index: 1; +} +.swiper-prev{ + left: -23px; +} +.swiper-next{ + right: -23px; +} +.swiper-prev::after{ + content:""; + width: 18px; height: 28px; + background: url('../img/slideArrow.png') no-repeat 50%; + transform: rotate(180deg); +} +.swiper-next::after{ + content:""; + width: 18px; height: 28px; + background: url('../img/slideArrow.png') no-repeat 50%; +} +.swiper-button-disabled{display: none;} + +.tabWrap{ + display: flex; + justify-content: center; + column-gap: 5px; + margin-bottom: 20px; +} +.tabWrap >div{ + height: 44px; line-height: 44px; + font-size: 14px; + font-weight: 400; + color: #111; + padding: 0 20px; + border-radius: 24px; + border: 1px solid rgba(0,0,0,0.1); + cursor: pointer; +} +.tabWrap >div.active{ + color: #FFF; + background-color: #333; + font-weight: 700; +} +.ico__goLink{ + display: inline-block; + width: 7px; height: 11px; + margin-left: 7px; + background: url('../img/icon_linkArrow.png') no-repeat 50%; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + word-wrap: normal; + border: 0; +} + + +header{ + width: 100%; + border-bottom: 1px solid rgba(0,0,0,.08); + background: white; +} +header.fixed { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 99; +} +header.fixed .inner{ + display: flex; + min-height: 69px; + padding-top: 0; +} +.header__top{ + display: flex; + justify-content: space-between; + width: 100%; +} +.header__top__left{ + display: flex; + align-items: center; +} +.header__top__left .logo{ + width: 151px; height: 38px; + margin-right: 20px; +} +.header__top__left .logo img{width: 100%;} +.search__wrap{ + position: relative; +} +.search__wrap .search__box{ + display: block; + width: 454px; + height: 50px; + border: 1px solid rgba(0,0,0,.15); + border-radius: 30px; + overflow: hidden; +} +.search__box input[type='search']{ + width: calc(100% - 60px); height: 100%; + border: none; + background: transparent; + padding-left: 20px; +} +.search__box input:focus~span{ + display: none; +} +.search__box .search__innerText{ + position: absolute; + top: 50%; left: 16px; + transform: translateY(-50%); + display: flex; align-items: center; + height: 80%; + font-size: 16px; + background: white; +} +.search__wrap button{ + position: absolute; + top: 0; right: 0; + display: flex; + justify-content: center; align-items: center; + width: 52px; height: 48px; + cursor: pointer; +} +.nav__mini{ + display: flex; +} +.nav__mini .ico__nav{ + width: 30px; height: 30px; + margin-left: 20px; +} +.nav__mini .ico__nav img{ + width: 100%; +} +.header__top__right{ + display: flex; + align-items: center; +} +.header__top__right .my-menu{ + position: relative; + display: flex; + align-items: center; + height: 100%; + font-size: 15px; + color: #111; + font-weight: 500; + cursor: pointer; +} +.my-menu+.my-menu{ + margin-left: 20px; +} +.my-menu:last-child::after{ + content: ""; + position: absolute; + top: 50%; right: -12px; + transform: translateY(-50%); + width: 8px; height: 4px; + background: url(../img/icon_arrow.png) no-repeat 50%; +} +.my-menu:last-child:hover .my-menu__details{ + display: block; +} +.my-menu__details{ + display: none; + position: absolute; + top: 47px; + right: -8px; + font-size: 13px; + font-weight: 500; + padding: 19px 20px; + z-index: 10; + border-radius: 14px; + background: #fff; + box-shadow: 0px 0px 16px rgba(0,0,0,0.2); +} +.my-menu__details li{ + display: block; + line-height: 18px; + white-space: nowrap; +} +.my-menu__details li+li{ + padding-top: 14px; +} +.my-menu__details li span{ + font-size: 14px; + font-weight: 700; +} +.header__bottom{ + padding: 30px 0 20px 0; +} +header.fixed .header__bottom { + display: none; +} +.header__bottom .header__mainNav{ + display: flex; + justify-content: left; align-items: center; +} +.header__bottom .header__mainNav ul{ + display: flex; + justify-content: start; align-items: center; +} +.header__bottom .header__mainNav ul li{ + display: flex; + align-items: center; + cursor: pointer; +} +.header__bottom .header__mainNav ul li+li{ + margin-left: 22px; +} +.header__bottom .header__mainNav ul li .ico__nav{ + display: block; + width: 30px; height: 30px; +} +.ico__nav img{width: 100%;} +.header__bottom .header__mainNav ul li span{ + font-size: 16px; + font-weight: 600; + color: #333; + margin-left: 6px; +} +.badge__hot{ + width: 23px; height: 16px; + margin-left: 4px; +} +.badge__hot img{ + width: 100%; +} +.header__mainNav .header__mainNav--text{ + display: flex; + justify-content: flex-start; + align-items: center; + font-size: 16px; + font-weight: 600; + color: #111; +} +.header__mainNav .header__mainNav--text span{ + cursor: pointer; +} +.header__mainNav .header__mainNav--text::before{ + content:""; + display: block; + width: 1px; + height: 16px; + background: #e9e9e9; + margin: 0 13px; +} + + +.card__more{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 406px; + font-size: 14px; + font-weight: 700; + color: #3a3a3a; +} +.card__more i{ + width: 50px; height: 50px; + background: url('../img/btn_moreProduct.png') no-repeat 50%; + margin-bottom: 6px; +} + + +.card__info{ + border: 1px solid rgba(0,0,0,.06); + border-radius: 12px; + overflow: hidden; + cursor: pointer; +} +.card__info .card__info__img{ + position: relative; + height: 0; + padding-bottom: 100%; + background: rgba(0,0,0,.03); +} +.card__info__img img{ + position: absolute; + top: 0; left: 50%; + transform: translateX(-50%); + width: 100%; height: 100%; + object-fit: cover; +} +.card__info__text{ + position: relative; + height: 106px; + padding: 20px; +} +.card__info__text--price span{ + line-height: 24px; + font-size: 20px; + font-weight: 700; +} +.card__info__text--price span.percentage{ + margin-right: 2px; + color: #ef3e43; +} +.card__info__text--price span .currency{ + font-size: 18px; + font-weight: 400; + line-height: 24px; + vertical-align: bottom; +} +.card__info__text--disc{ + font-size: 15px; + font-weight: 400; + color: #111; + line-height: 18px; + text-overflow: ellipsis; + margin-top: 6px; + overflow: hidden; +} +.card__info__text--benefit{ + font-size: 15px; + font-weight: 400; + color: #1769ff; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + + +.card__img__img{ + height: 400px; + border-radius: 12px; + overflow: hidden; +} +.card__img__img>img{ + width: 100%; height: auto; + min-height: 100%; +} + + +.eventBanner__swiperBox{ + position: relative; +} +.eventBanner__swiperBox .swiper .swiper-wrapper .swiper-slide{ + border-radius: 14px; + cursor: pointer; + overflow: hidden; +} +.eventBanner__swiperBox .swiper .swiper-wrapper .swiper-slide img{ + width: 100%; +} + + +.shopping__swiper{position: relative;} + + +.tour__swiper{position: relative;} +.tour__swiper .card__info__img {padding-bottom: 244px;} +.tour__swiper .card__info__text{ + padding: 23px 20px 20px 18px; +} +.card__info__text--tourBadge{ + position: absolute; + position: absolute; + left: 20px; top: -16px; + height: 32px; line-height: 32px; + padding: 0 12px; + font-size: 14px; + font-weight: 700; + color: #fff; + background: #1769ff; + border-radius: 4px; +} + + +.ticket__swiper{position: relative;} +.ticket__swiper .card__img .card__img__img{ + position: relative; +} +.ticket__swiper .card__img .card__img__img::before{ + content: ""; + display: block; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + border-radius: 12px; + z-index: 1; + background: linear-gradient(0deg,rgba(0,0,0,.04),rgba(0,0,0,.04)),linear-gradient(180deg,transparent 68.5%,rgba(0,0,0,.6)); +} +.card__img--num{ + position: absolute; + bottom: 14px; left: 22px; + font-size: 70px; + font-weight: 700; + color: #FFF; + z-index: 2; +} +.ticket__swiper .card__img__text{ + padding: 16px 0; +} +.ticket__swiper .card__img__text >div{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.ticket__swiper .card__img__text .card__img__text--tit{ + font-size: 18px; + font-weight: 700; + color: #111; +} +.ticket__swiper .card__img__text .card__img__text--place{ + font-size: 15px; line-height: 18px; + font-weight: 400; + color: #666; + margin: 7px 0; +} +.ticket__swiper .card__img__text .card__img__text--date{ + font-size: 14px; line-height: 17px; + font-weight: 400; + color: #999; +} +.badge__ticket{ + display: inline-block; + height: 24px; line-height: 24px; + font-size: 11px; + font-weight: 400; + padding: 0 8px; + margin-top: 7px; + border-radius: 3px; + cursor: pointer; +} +.ticketWrap .ticket__swiper .swiper-prev{ + top: 200px; +} +.ticketWrap .ticket__swiper .swiper-next{ + top: 200px; +} +.badge__ticket.badge__ticket--seat{ + color: #4a95ff; + border: 1px solid rgba(74,149,255,.3); +} +.badge__ticket.badge__ticket--only{ + color: #ef3e43; + border: 1px solid rgba(239,62,67,.3); +} + + +.live__swiper{position: relative;} +.live__swiperBox .card__img{ + position: relative; +} +.live__swiperBox .card__img__img{ + height: 456px; +} +.live__swiperBox .card__img__img.soon::after{ + content: ""; + position: absolute; + top: 0; left: 0; + width: 100%; + height: 100%; + border-radius: 12px; + background: linear-gradient(0deg,rgba(34,34,34,.5),rgba(34,34,34,.5)),linear-gradient(180deg,rgba(0,0,0,.4) 18.65%,transparent 39.78%),linear-gradient(180deg,transparent 56.75%,rgba(0,0,0,.4) 87.59%); +} +.live__swiperBox .card__img__img.vod::after{ + content: ""; + position: absolute; + top: 0; left: 0; + width: 100%; + height: 100%; + border-radius: 12px; + background: linear-gradient(180deg,rgba(0,0,0,.4) 18.65%,transparent 39.78%),linear-gradient(180deg,transparent 56.75%,rgba(0,0,0,.5) 87.59%); +} +.card__img__infoBox{ + position: absolute; + top: 0; left: 0; + display: flex; flex-direction: column; + justify-content: space-between; + width: 100%; height: 100%; + padding: 20px; +} +.card__img__infoBox .card__img__info--top .badge__live{ + display: inline-block; + height: 32px; line-height: 32px; + margin-bottom: 8px; + padding: 0 12px; + font-size: 13px; + font-weight: 700; + color: #FFF; + background: rgba(0,0,0,.5); + border-radius: 16px; +} +.card__img__infoBox .card__img__info--top .live__tit{ + display: -webkit-box; + font-size: 20px; + font-weight: 700; + color: #FFF; + line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-shadow: 0 0 2px rgba(0,0,0,.5); +} +.card__img__info--update{ + position: absolute; + width: 100%; height: 100%; + top: 0; left: 0; + display: flex; flex-direction: column; + justify-content: center;align-items: center; +} +.card__img__info--update .date{ + font-size: 28px; + font-weight: 400; + line-height: 33.5px; + text-align: center; + color: #FFF; + margin-bottom: 4px; +} +.card__img__info--update .time{ + font-size: 50px; + font-weight: 700; + line-height: 60px; + text-align: center; + color: #FFF; + margin-bottom: 4px; +} +.card__img__infoBox .card__img__info--bottom{ + display: flex; +} +.card__img__info--bottom .thumb{ + flex: none; + width: 64px; + height: 64px; + border-radius: 6px; + overflow: hidden; + margin-right: 13px; +} +.card__img__info--bottom .thumb img{ + width: 100%; + height: 100%; +} +.card__img__info--bottom .textBox{ + display: flex; flex-direction: column; + justify-content: space-around; + width: 100%; + height: 100%; +} +.card__img__info--bottom .textBox{ + display: flex; flex-direction: column; + justify-content: space-around; + width: 100%; + height: 100%; +} +.card__img__info--bottom .textBox.titOnly{ + justify-content: flex-start; +} +.card__img__info--bottom .textBox .product__tit{ + font-size: 15px; + font-weight: 400; + color: #FFF; + line-height: 18px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.card__img__info--bottom .textBox.titOnly .product__tit{ + margin-top: 3px; +} +.card__img__info--bottom .textBox .product__disc{ + font-size: 20px; + font-weight: 700; + line-height: 24px; +} +.card__img__info--bottom .textBox .product__disc .percentage{ + color: #ef3e43; +} +.card__img__info--bottom .textBox .product__disc .price{ + color: #FFF; +} +.card__img__info--bottom .textBox .product__disc .price span{ + font-size: 16px; + font-weight: 400; +} +.card__img__soonBox{ + position: absolute; + top: 0; left: 0; + display: flex; flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +.card__img__soonBox .liveLogo{ + height: 32.5px; +} +.card__img__soonBox .liveLogo img{ + height: 100%; +} +.card__img__soonBox .liveMent{ + font-size: 20px; + font-weight: 400; + color: rgba(255,255,255,0.8); + line-height: 24px; + margin-top: 10px; +} +.card__img__soonBox .liveBtnLink{ + height: 42px; + line-height: 42px; + font-size: 16px; + font-weight: 400; + color: #FFF; + margin-top: 14px; + padding: 0 16px; + border: 1px solid rgba(255,255,255, 0.5); + border-radius: 21px; +} + + +.book__swiper{position: relative;} +.card__book .card__book__img{ + width: 100%; + height: 334.28px; + margin-bottom: 10px; +} +.card__book__img img{ + width: 100%; + height: 100%; +} +.card__book__text .title{ + font-size: 15px; + font-weight: 400; + line-height: 18px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.card__book__text .price{ + text-align: center; + color: #111; + margin-top: 4px; +} +.card__book__text .price em{ + font-size: 20px; + font-weight: 700; +} +.card__book__text .price span{ + font-size: 16px; + font-weight: 400; +} + + +.event__swiper{position: relative;} +.card__event{ + width: 100%; + height: 350px; + border: 1px solid rgba(0,0,0,.05); + background: linear-gradient(0deg,rgba(0,0,0,.03),rgba(0,0,0,.03)); + border-radius: 12px; + overflow: hidden; +} +.card__event img{ + width: 100%; height: 100%; +} + + +footer{ + padding-bottom: 30px; +} +.footer__policy{ + height: 50px; + font-size: 13px; + font-weight: 400; + text-align: center; + border-top: 1px solid rgba(0,0,0,0.1); + border-bottom: 1px solid rgba(0,0,0,0.1); + margin-bottom: 4px; +} +.footer__policyList{ + display: flex; + justify-content: center; align-items: center; + width: 1280px; height: 100%; + margin: 0 auto; +} +.footer__policyList >li{ + position: relative; + padding: 0 31px; + cursor: pointer; +} +.footer__policyList >li.bold{ + font-weight: 700; +} +.footer__policyList >li:first-child{ + padding-left: 0; +} +.footer__policyList >li:last-child{ + padding-right: 0; +} +.footer__policyList >li::before{ + content: ""; + position: absolute; + top:50%; left: 0; + transform: translateY(-50%); + width: 1px; height: 12px; + background: rgba(0,0,0,.3); +} +.footer__policyList >li:first-child::before{ + content: ""; + display: none; +} +.footer__policyList >li:hover .footer__policy--sub{ + display: block; +} +.footer__policy--sub{ + display: none; + position: absolute; + top: 23px; + right: 20px; + z-index: 1; + padding: 16px; + font-size: 13px; + font-weight: 400; + box-shadow: 0 0 16px rgba(0,0,0,.2); + border-radius: 8px; + background-color: #FFF; +} +.footer__policy--sub li{white-space: nowrap;} +.footer__policy--sub li+li{padding-top: 10px;} +.footer__content{ + display: flex; + width: 1280px; + margin: 30px auto 0; + position: relative; +} +.footer__content .footer__content--inner{ + display: flex; + position: relative; +} +.footer__content .footer__content--inner:first-child{ + padding-right: 21px; +} +.footer__content .footer__content--inner:last-child{ + padding-left: 21px; +} +.footer__content .footer__content--inner:last-child::after{ + content:""; + position: absolute; + top: 0; left: 0; + width: 1px; height: 100%; + background: rgba(0,0,0,0.08); +} +.footer__content--inner h2{ + font-size: 15px; + font-weight: 700; + color: #111; + line-height: 17px; + margin-right: 10px; + white-space: nowrap; +} +.footer__content--inner div div{ + font-size: 12px; + color: #666; + line-height: 17px; +} +.footer__content--inner >div >div+div{ + margin-top: 10px; +} +.footer__content--inner span{ + position: relative; +} +.footer__content--inner span:last-child::before{ + content:""; + display: inline-block; + width: 1px; + height: 10px; + background: rgba(0,0,0,.3); + margin: 0 3px; +} +.footer__content--inner .name{ + display: flex; +} +.footer__content--inner .name h3{ + font-weight: 700; + color: #111; + margin-right: 10px; +} +.footer__content--inner .notice{ + font-size: 11px; + line-height: 18px; + color: hsla(0,0%,7%,.4); +} + + +.btn__toTop{ + position: fixed; + bottom:25px; right: 25px; + display: flex; flex-direction: column; + justify-content: center; align-items: center; + width: 100px; +} +.btn__toTop::before{ + content:"AD"; + position: absolute; + top: -15px; left: 50%; + transform: translateX(-50%); + font-size: 9px; + color: #a5a5a5; + text-align: center; +} +.btn__toTop .adBanner{ + width: 100%; height: 160px; + border-radius: 50px; + border: 1px solid rgba(0,0,0,.1); + overflow: hidden; + cursor: pointer; +} +.btn__toTop .adBanner img{ + width: 100%; +} +.btn__toTop .ico__arrow--up{ + width: 38px; height: 38px; + margin: 12px auto 0; + border: 1px solid rgba(0,0,0,.15); + box-shadow: 0 0 0.5rem rgba(0,0,0,.16); + border-radius: 100px; + background: url('../img/icon_topArrow.png') #fff no-repeat 50%; + cursor: pointer; +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 00000000..99ce9a2a Binary files /dev/null and b/favicon.ico differ diff --git a/img/badge_hot.png b/img/badge_hot.png new file mode 100644 index 00000000..3855caaf Binary files /dev/null and b/img/badge_hot.png differ diff --git a/img/book/book_1.jpg b/img/book/book_1.jpg new file mode 100644 index 00000000..f6f103c4 Binary files /dev/null and b/img/book/book_1.jpg differ diff --git a/img/book/book_10.jpg b/img/book/book_10.jpg new file mode 100644 index 00000000..f5539e78 Binary files /dev/null and b/img/book/book_10.jpg differ diff --git a/img/book/book_2.jpg b/img/book/book_2.jpg new file mode 100644 index 00000000..d27f1ce7 Binary files /dev/null and b/img/book/book_2.jpg differ diff --git a/img/book/book_3.jpg b/img/book/book_3.jpg new file mode 100644 index 00000000..dd079d0a Binary files /dev/null and b/img/book/book_3.jpg differ diff --git a/img/book/book_4.jpg b/img/book/book_4.jpg new file mode 100644 index 00000000..8789bbb3 Binary files /dev/null and b/img/book/book_4.jpg differ diff --git a/img/book/book_5.jpg b/img/book/book_5.jpg new file mode 100644 index 00000000..dc54ecb1 Binary files /dev/null and b/img/book/book_5.jpg differ diff --git a/img/book/book_6.jpg b/img/book/book_6.jpg new file mode 100644 index 00000000..aebdf245 Binary files /dev/null and b/img/book/book_6.jpg differ diff --git a/img/book/book_7.jpg b/img/book/book_7.jpg new file mode 100644 index 00000000..e505631b Binary files /dev/null and b/img/book/book_7.jpg differ diff --git a/img/book/book_8.jpg b/img/book/book_8.jpg new file mode 100644 index 00000000..7143814b Binary files /dev/null and b/img/book/book_8.jpg differ diff --git a/img/book/book_9.jpg b/img/book/book_9.jpg new file mode 100644 index 00000000..8adef13c Binary files /dev/null and b/img/book/book_9.jpg differ diff --git a/img/btn_moreProduct.png b/img/btn_moreProduct.png new file mode 100644 index 00000000..5db4d9aa Binary files /dev/null and b/img/btn_moreProduct.png differ diff --git a/img/btn_search.png b/img/btn_search.png new file mode 100644 index 00000000..66653fe9 Binary files /dev/null and b/img/btn_search.png differ diff --git a/img/event/event_1.png b/img/event/event_1.png new file mode 100644 index 00000000..ac212f7a Binary files /dev/null and b/img/event/event_1.png differ diff --git a/img/event/event_10.jpg b/img/event/event_10.jpg new file mode 100644 index 00000000..6cb5cafc Binary files /dev/null and b/img/event/event_10.jpg differ diff --git a/img/event/event_11.jpg b/img/event/event_11.jpg new file mode 100644 index 00000000..114bccda Binary files /dev/null and b/img/event/event_11.jpg differ diff --git a/img/event/event_12.png b/img/event/event_12.png new file mode 100644 index 00000000..b11d87ee Binary files /dev/null and b/img/event/event_12.png differ diff --git a/img/event/event_13.jpg b/img/event/event_13.jpg new file mode 100644 index 00000000..f73b574e Binary files /dev/null and b/img/event/event_13.jpg differ diff --git a/img/event/event_14.jpg b/img/event/event_14.jpg new file mode 100644 index 00000000..973bc6a5 Binary files /dev/null and b/img/event/event_14.jpg differ diff --git a/img/event/event_15.jpg b/img/event/event_15.jpg new file mode 100644 index 00000000..6195cb66 Binary files /dev/null and b/img/event/event_15.jpg differ diff --git a/img/event/event_16.jpg b/img/event/event_16.jpg new file mode 100644 index 00000000..caa874b1 Binary files /dev/null and b/img/event/event_16.jpg differ diff --git a/img/event/event_17.jpg b/img/event/event_17.jpg new file mode 100644 index 00000000..d621305a Binary files /dev/null and b/img/event/event_17.jpg differ diff --git a/img/event/event_2.jpg b/img/event/event_2.jpg new file mode 100644 index 00000000..5fd011c7 Binary files /dev/null and b/img/event/event_2.jpg differ diff --git a/img/event/event_3.jpg b/img/event/event_3.jpg new file mode 100644 index 00000000..4ffa98a0 Binary files /dev/null and b/img/event/event_3.jpg differ diff --git a/img/event/event_4.png b/img/event/event_4.png new file mode 100644 index 00000000..f84b5499 Binary files /dev/null and b/img/event/event_4.png differ diff --git a/img/event/event_5.jpg b/img/event/event_5.jpg new file mode 100644 index 00000000..c1d9798a Binary files /dev/null and b/img/event/event_5.jpg differ diff --git a/img/event/event_6.jpg b/img/event/event_6.jpg new file mode 100644 index 00000000..cdbb8df8 Binary files /dev/null and b/img/event/event_6.jpg differ diff --git a/img/event/event_7.jpg b/img/event/event_7.jpg new file mode 100644 index 00000000..930ca980 Binary files /dev/null and b/img/event/event_7.jpg differ diff --git a/img/event/event_8.jpg b/img/event/event_8.jpg new file mode 100644 index 00000000..a75cde4a Binary files /dev/null and b/img/event/event_8.jpg differ diff --git a/img/event/event_9.png b/img/event/event_9.png new file mode 100644 index 00000000..f5181f00 Binary files /dev/null and b/img/event/event_9.png differ diff --git a/img/eventBanner/eventBanner_1.png b/img/eventBanner/eventBanner_1.png new file mode 100644 index 00000000..2283c6f6 Binary files /dev/null and b/img/eventBanner/eventBanner_1.png differ diff --git a/img/eventBanner/eventBanner_2.png b/img/eventBanner/eventBanner_2.png new file mode 100644 index 00000000..d85ba42f Binary files /dev/null and b/img/eventBanner/eventBanner_2.png differ diff --git a/img/eventBanner/eventBanner_3.png b/img/eventBanner/eventBanner_3.png new file mode 100644 index 00000000..4d02c6bc Binary files /dev/null and b/img/eventBanner/eventBanner_3.png differ diff --git a/img/eventBanner/eventBanner_4.png b/img/eventBanner/eventBanner_4.png new file mode 100644 index 00000000..fda9859e Binary files /dev/null and b/img/eventBanner/eventBanner_4.png differ diff --git a/img/eventBanner/eventBanner_5.png b/img/eventBanner/eventBanner_5.png new file mode 100644 index 00000000..9ff8c301 Binary files /dev/null and b/img/eventBanner/eventBanner_5.png differ diff --git a/img/icon_arrow.png b/img/icon_arrow.png new file mode 100644 index 00000000..541b0194 Binary files /dev/null and b/img/icon_arrow.png differ diff --git a/img/icon_book.png b/img/icon_book.png new file mode 100644 index 00000000..793f13d6 Binary files /dev/null and b/img/icon_book.png differ diff --git a/img/icon_linkArrow.png b/img/icon_linkArrow.png new file mode 100644 index 00000000..791a18a1 Binary files /dev/null and b/img/icon_linkArrow.png differ diff --git a/img/icon_shopping.png b/img/icon_shopping.png new file mode 100644 index 00000000..98991516 Binary files /dev/null and b/img/icon_shopping.png differ diff --git a/img/icon_special.png b/img/icon_special.png new file mode 100644 index 00000000..ddc5eca4 Binary files /dev/null and b/img/icon_special.png differ diff --git a/img/icon_ticket.png b/img/icon_ticket.png new file mode 100644 index 00000000..156a8fbf Binary files /dev/null and b/img/icon_ticket.png differ diff --git a/img/icon_topArrow.png b/img/icon_topArrow.png new file mode 100644 index 00000000..1339e7a9 Binary files /dev/null and b/img/icon_topArrow.png differ diff --git a/img/icon_tour.png b/img/icon_tour.png new file mode 100644 index 00000000..dd97a51c Binary files /dev/null and b/img/icon_tour.png differ diff --git a/img/icon_triple.png b/img/icon_triple.png new file mode 100644 index 00000000..aa83add6 Binary files /dev/null and b/img/icon_triple.png differ diff --git a/img/live/live_1.png b/img/live/live_1.png new file mode 100644 index 00000000..cc1f7315 Binary files /dev/null and b/img/live/live_1.png differ diff --git a/img/live/live_10.png b/img/live/live_10.png new file mode 100644 index 00000000..e178f5b9 Binary files /dev/null and b/img/live/live_10.png differ diff --git a/img/live/live_2.jpg b/img/live/live_2.jpg new file mode 100644 index 00000000..508f1260 Binary files /dev/null and b/img/live/live_2.jpg differ diff --git a/img/live/live_3.png b/img/live/live_3.png new file mode 100644 index 00000000..871fec75 Binary files /dev/null and b/img/live/live_3.png differ diff --git a/img/live/live_4.jpg b/img/live/live_4.jpg new file mode 100644 index 00000000..e330bea9 Binary files /dev/null and b/img/live/live_4.jpg differ diff --git a/img/live/live_5.jpeg b/img/live/live_5.jpeg new file mode 100644 index 00000000..12e8c0d4 Binary files /dev/null and b/img/live/live_5.jpeg differ diff --git a/img/live/live_6.jpg b/img/live/live_6.jpg new file mode 100644 index 00000000..fea67bdb Binary files /dev/null and b/img/live/live_6.jpg differ diff --git a/img/live/live_7.jpg b/img/live/live_7.jpg new file mode 100644 index 00000000..96d19cbd Binary files /dev/null and b/img/live/live_7.jpg differ diff --git a/img/live/live_8.jpg b/img/live/live_8.jpg new file mode 100644 index 00000000..c6b2639f Binary files /dev/null and b/img/live/live_8.jpg differ diff --git a/img/live/live_9.jpg b/img/live/live_9.jpg new file mode 100644 index 00000000..a199c87a Binary files /dev/null and b/img/live/live_9.jpg differ diff --git a/img/live/live_inner_1.jpg b/img/live/live_inner_1.jpg new file mode 100644 index 00000000..bf621fd4 Binary files /dev/null and b/img/live/live_inner_1.jpg differ diff --git a/img/live/live_inner_10.png b/img/live/live_inner_10.png new file mode 100644 index 00000000..e178f5b9 Binary files /dev/null and b/img/live/live_inner_10.png differ diff --git a/img/live/live_inner_3.png b/img/live/live_inner_3.png new file mode 100644 index 00000000..f3065f1f Binary files /dev/null and b/img/live/live_inner_3.png differ diff --git a/img/live/live_inner_4.png b/img/live/live_inner_4.png new file mode 100644 index 00000000..a2cd6bc8 Binary files /dev/null and b/img/live/live_inner_4.png differ diff --git a/img/live/live_inner_5.jpg b/img/live/live_inner_5.jpg new file mode 100644 index 00000000..5242eba7 Binary files /dev/null and b/img/live/live_inner_5.jpg differ diff --git a/img/live/live_inner_6.jpg b/img/live/live_inner_6.jpg new file mode 100644 index 00000000..6662737d Binary files /dev/null and b/img/live/live_inner_6.jpg differ diff --git a/img/live/live_inner_7.png b/img/live/live_inner_7.png new file mode 100644 index 00000000..9a85bb56 Binary files /dev/null and b/img/live/live_inner_7.png differ diff --git a/img/live/live_inner_8.jpg b/img/live/live_inner_8.jpg new file mode 100644 index 00000000..0bbc0c32 Binary files /dev/null and b/img/live/live_inner_8.jpg differ diff --git a/img/live/live_inner_9.jpg b/img/live/live_inner_9.jpg new file mode 100644 index 00000000..40246e73 Binary files /dev/null and b/img/live/live_inner_9.jpg differ diff --git a/img/live/live_logo.png b/img/live/live_logo.png new file mode 100644 index 00000000..8e615cf2 Binary files /dev/null and b/img/live/live_logo.png differ diff --git a/img/live/live_soon_bg.jpg b/img/live/live_soon_bg.jpg new file mode 100644 index 00000000..52ded0d1 Binary files /dev/null and b/img/live/live_soon_bg.jpg differ diff --git a/img/live/title_live.png b/img/live/title_live.png new file mode 100644 index 00000000..0957ebd2 Binary files /dev/null and b/img/live/title_live.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 00000000..ad133228 Binary files /dev/null and b/img/logo.png differ diff --git a/img/shoppingImg/shopping_1.jpg b/img/shoppingImg/shopping_1.jpg new file mode 100644 index 00000000..cf1ac6c3 Binary files /dev/null and b/img/shoppingImg/shopping_1.jpg differ diff --git a/img/shoppingImg/shopping_10.jpg b/img/shoppingImg/shopping_10.jpg new file mode 100644 index 00000000..15a628e8 Binary files /dev/null and b/img/shoppingImg/shopping_10.jpg differ diff --git a/img/shoppingImg/shopping_11.jpg b/img/shoppingImg/shopping_11.jpg new file mode 100644 index 00000000..0b1ce374 Binary files /dev/null and b/img/shoppingImg/shopping_11.jpg differ diff --git a/img/shoppingImg/shopping_2.jpg b/img/shoppingImg/shopping_2.jpg new file mode 100644 index 00000000..4fe98715 Binary files /dev/null and b/img/shoppingImg/shopping_2.jpg differ diff --git a/img/shoppingImg/shopping_3.jpg b/img/shoppingImg/shopping_3.jpg new file mode 100644 index 00000000..214f05a8 Binary files /dev/null and b/img/shoppingImg/shopping_3.jpg differ diff --git a/img/shoppingImg/shopping_4.jpg b/img/shoppingImg/shopping_4.jpg new file mode 100644 index 00000000..be16dbeb Binary files /dev/null and b/img/shoppingImg/shopping_4.jpg differ diff --git a/img/shoppingImg/shopping_5.jpg b/img/shoppingImg/shopping_5.jpg new file mode 100644 index 00000000..adda982c Binary files /dev/null and b/img/shoppingImg/shopping_5.jpg differ diff --git a/img/shoppingImg/shopping_6.jpg b/img/shoppingImg/shopping_6.jpg new file mode 100644 index 00000000..1eb757fd Binary files /dev/null and b/img/shoppingImg/shopping_6.jpg differ diff --git a/img/shoppingImg/shopping_7.jpg b/img/shoppingImg/shopping_7.jpg new file mode 100644 index 00000000..280f0a51 Binary files /dev/null and b/img/shoppingImg/shopping_7.jpg differ diff --git a/img/shoppingImg/shopping_8.jpg b/img/shoppingImg/shopping_8.jpg new file mode 100644 index 00000000..c52e8b47 Binary files /dev/null and b/img/shoppingImg/shopping_8.jpg differ diff --git a/img/shoppingImg/shopping_9.jpg b/img/shoppingImg/shopping_9.jpg new file mode 100644 index 00000000..1b3507b8 Binary files /dev/null and b/img/shoppingImg/shopping_9.jpg differ diff --git a/img/slideArrow.png b/img/slideArrow.png new file mode 100644 index 00000000..c63bb933 Binary files /dev/null and b/img/slideArrow.png differ diff --git a/img/ticket/ticket_1.gif b/img/ticket/ticket_1.gif new file mode 100644 index 00000000..9f64b69c Binary files /dev/null and b/img/ticket/ticket_1.gif differ diff --git a/img/ticket/ticket_2.gif b/img/ticket/ticket_2.gif new file mode 100644 index 00000000..aaea41b2 Binary files /dev/null and b/img/ticket/ticket_2.gif differ diff --git a/img/ticket/ticket_3.gif b/img/ticket/ticket_3.gif new file mode 100644 index 00000000..fcafdd42 Binary files /dev/null and b/img/ticket/ticket_3.gif differ diff --git a/img/ticket/ticket_4.gif b/img/ticket/ticket_4.gif new file mode 100644 index 00000000..bfcec81c Binary files /dev/null and b/img/ticket/ticket_4.gif differ diff --git a/img/ticket/ticket_5.gif b/img/ticket/ticket_5.gif new file mode 100644 index 00000000..48ceedb6 Binary files /dev/null and b/img/ticket/ticket_5.gif differ diff --git a/img/ticket/ticket_6.gif b/img/ticket/ticket_6.gif new file mode 100644 index 00000000..ad184883 Binary files /dev/null and b/img/ticket/ticket_6.gif differ diff --git a/img/ticket/ticket_7.gif b/img/ticket/ticket_7.gif new file mode 100644 index 00000000..2db92156 Binary files /dev/null and b/img/ticket/ticket_7.gif differ diff --git a/img/toTop_adBanner.png b/img/toTop_adBanner.png new file mode 100644 index 00000000..a5262e0c Binary files /dev/null and b/img/toTop_adBanner.png differ diff --git a/img/tour/tour_1.jpg b/img/tour/tour_1.jpg new file mode 100644 index 00000000..cf4a0f2b Binary files /dev/null and b/img/tour/tour_1.jpg differ diff --git a/img/tour/tour_2.jpg b/img/tour/tour_2.jpg new file mode 100644 index 00000000..55af84e6 Binary files /dev/null and b/img/tour/tour_2.jpg differ diff --git a/img/tour/tour_3.jpg b/img/tour/tour_3.jpg new file mode 100644 index 00000000..f7b9a250 Binary files /dev/null and b/img/tour/tour_3.jpg differ diff --git a/img/tour/tour_4.jpg b/img/tour/tour_4.jpg new file mode 100644 index 00000000..58138791 Binary files /dev/null and b/img/tour/tour_4.jpg differ diff --git a/img/tour/tour_5.jpg b/img/tour/tour_5.jpg new file mode 100644 index 00000000..5242eba7 Binary files /dev/null and b/img/tour/tour_5.jpg differ diff --git a/img/tour/tour_6.jpg b/img/tour/tour_6.jpg new file mode 100644 index 00000000..83dd7bfd Binary files /dev/null and b/img/tour/tour_6.jpg differ diff --git a/img/tour/tour_7.jpg b/img/tour/tour_7.jpg new file mode 100644 index 00000000..4fbdffbe Binary files /dev/null and b/img/tour/tour_7.jpg differ diff --git a/img/tour/tour_8.jpg b/img/tour/tour_8.jpg new file mode 100644 index 00000000..2bb67ed4 Binary files /dev/null and b/img/tour/tour_8.jpg differ diff --git a/img/tour/tour_9.jpg b/img/tour/tour_9.jpg new file mode 100644 index 00000000..e4003dff Binary files /dev/null and b/img/tour/tour_9.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..75abf63a --- /dev/null +++ b/index.html @@ -0,0 +1,1573 @@ + + + + + + 인터파크 + + + + + + + + +
+
+
+
+

+ interpark +

+
+ + +
+ +
+
+
로그인
+
회원가입
+
+ 마이 페이지 +
    +
  • 투어 마이페이지
    • +
  • 티켓 마이페이지
    • +
  • 쇼핑 마이페이지
    • +
  • 도서 마이페이지
    • +
+
+
+
+
+
+
    +
  • + + 투어 + + 투어 +
    • +
  • + + 티켓 + + 티켓 +
    • +
  • + + 쇼핑 + + 쇼핑 +
    • +
  • + + 도서 + + 도서 +
    • +
  • + + 트리플 + + 트리플 +
    • +
  • + + 인트쇼 + + 인트쇼 +
    + hot +
    +
    • +
+
+ + 선착순NOL굿즈증정 + +
+
+
+
+ +
+
+
+
+
+
+
+
+ 역대급 콜라보 인트쇼 +
+
+ 휴가철 빈 방 찾기 프로젝트 +
+
+ 이토록 NOL 라운지 +
+
+ 인터파크 7월 쿠폰팩 +
+
+ 여름 성수기 부산 여행 특집 +
+
+
+ + +
+
+
+
+
+
+

쇼핑 추천

+

할인이 쎄다! 지금, 특가 상품을 확인하세요.

+
+
+
+
쎈딜
+
베스트
+
프레시지초특가
+
인팍전자
+
소담상회
+
+
+
+
+
+
+
+ +
+
+
+ + 33,000원~ + +
+
+ *7/27~28 다운쿠폰* 짱죽 이유식 골고루 10팩/ 20팩/ 30팩 20일이내 예약배송! +
+
+
+
+
+
+
+ +
+
+
+ + 38% + + + 10,790원 + +
+
+ [프레시지] 블랙라벨 스테이크 2인분(냉장) +
+
+
+
+
+
+
+ +
+
+
+ + 20% + + + 9,880원 + +
+
+ [우리미단] 밀가루0% 글루텐프리 쌀로만든 시원하고 쫄깃한 쌀냉면 물냉면 비빔냉면 4개입 (4인분) +
+
+
+
+
+
+
+ +
+
+
+ + 17% + + + 57,880원 + +
+
+ [일본발매 정품] 템퍼 오리지널 베개 S/M / 걱정없는 수면/ 인체공학적 이상적인 디자인 +
+
+
+
+
+
+
+ +
+
+
+ + 51% + + + 6,210원 + +
+
+ [프레시지] 야심작 양념쭈꾸미 300g +
+
+
+
+
+
+
+ +
+
+
+ + 13% + + + 8,550원 + +
+
+ [단독진행] 10단계 정제수 엠보싱 프리미엄 화이트 물티슈 80매 10팩 캡형 +
+
+
+
+
+
+
+ +
+
+
+ + 31% + + + 14,400원 + +
+
+ [Iprime] 카스제로 0.0 무알콜 논알콜 맥주맛 음료 330mlx24캔 아이프라임 +
+
+
+
+
+
+
+ +
+
+
+ + 12% + + + 8,800원 + +
+
+ 일본 과자 / 디저트 모음전 / 오리히로 / 푸딩 / 쿠키 등 +
+
+
+
+
+
+
+ +
+
+
+ + 32% + + + 16,480원 + +
+
+ [1+1세트] NEW 우르오스 스킨 로션 밀크 바디워시 세트 ULOS +
+
+
+
+
+
+
+ +
+
+
+ + 9% + + + 17,930원 + +
+
+ QCY T13 ANC 노이즈캔슬링 무선 블루투스 이어폰 / BH22DT10A +
+
+
+
+
+
+
+ +
+
+
+ + 43% + + + 7,790원 + +
+
+ [최종가 5,740원 20%+5%쿠폰] 포슬포슬 고소한 국내산 햇 수미감자 3kg (대) +
+
+
+
+
+
+ + 전체보기 +
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+

투어 특가

+

해외여행은 인터파크다

+
+
+
+
망설이면 품절
+
패키지
+
국내숙소
+
해외숙소
+
+
+
+
+
+
+
+ +
+
+
키즈특전
+
+ 편안한 국적기+전신마사지1시간까지! +
+
+ [아시아나항공/하노이/하롱베이 5일] 4성호텔+하롱야간투어 +
+
+ + 539,000원~ + +
+
+
+
+
+
+
+ +
+
+
인기호텔
+
+ 샹그릴라 호텔 방콕 +
+
+ [아시아나항공/하노이/하롱베이 5일] 4성호텔+하롱야간투어 +
+
+ + 231,500원~ + +
+
+
+
+
+
+
+ +
+
+
인기리조트
+
+ 다낭 5성급 인기 리조트 +
+
+ 하얏트 리젠시 다낭 리조트 앤 스파 +
+
+ + 264,700원~ + +
+
+
+
+
+
+
+ +
+
+
갓성비호텔
+
+ 하카타 3성급 갓성비 호텔 +
+
+ 서튼 호텔 하카타 시티 +
+
+ + 94,800원~ + +
+
+
+
+
+
+
+ +
+
+
룸온리특가
+
+ 디럭스 트윈+55인치 스마트TV (Room Only) +
+
+ 오라카이 송도파크 호텔 +
+
+ + 99,000원~ + +
+
+
+
+
+
+
+ +
+
+
온천수영장
+
+ 편안한 국적기+전신마사지1시간까지! +
+
+ 체스터톤스 속초 +
+
+ + 96,900원~ + +
+
+
+
+
+
+
+ +
+
+
출발확정
+
+ 온천호텔 2박 포함! +
+
+ [북해도 4일]여름향기+온천2박+도야유람선/후라노 +
+
+ + 949,000원~ + +
+
+
+
+
+
+
+ +
+
+
국내패키지
+
+ 추석연휴 좌석확보! +
+
+ [연휴/청주출발]에어카3일,제주왕복항공권,렌터카 포함 +
+
+ + 355,400원~ + +
+
+
+
+
+
+
+ +
+
+
키즈특전
+
+ 오션월드2인+레전드히어로즈2인+키즈특전까지! +
+
+ 소노벨 비발디파크 B , C +
+
+ + 258,000원~ + +
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+

티켓 랭킹

+

오늘 뭐볼까? 지금 HOT한 공연

+
+
+
+
뮤지컬
+
콘서트
+
연극
+
클래식/무용
+
스포츠
+
레저/캠핑
+
전시/행사
+
아동/가족
+
+
+
+
+
+
+
+ +
1
+
+
+
+ 뮤지컬 <멤피스> +
+
+ 충무아트센터 대극장 +
+
+ 2023.07.20 - 2023.10.22 +
+ + 좌석우위 + +
+
+
+
+
+
+ +
2
+
+
+
+ 뮤지컬 <더 테일 에이프릴 풀스> +
+
+ 서경대학교 공연예술센터 스콘2관 +
+
+ 2023.06.07 - 2023.08.27 +
+
+
+
+
+
+
+ +
3
+
+
+
+ 뮤지컬 <그날들> 10주년 기념 공연 +
+
+ 예술의전당 오페라극장 +
+
+ 2023.07.12 - 2023.09.03 +
+
+
+
+
+
+
+ +
4
+
+
+
+ 뮤지컬 <다시, 동물원> +
+
+ 동덕여대 공연예술센터 코튼홀 +
+
+ 2023.06.24 - 2023.09.17 +
+ + 단독판매 + +
+
+
+
+
+
+ +
5
+
+
+
+ 뮤지컬 <스웨그에이지 외쳐,조선!> +
+
+ 홍익대 대학로 아트센터 대극장 +
+
+ 2023.06.09 - 2023.08.20 +
+ + 단독 판매 + +
+
+
+
+
+
+ +
6
+
+
+
+ 뮤지컬 <오페라의 유령> - 서울 +
+
+ 샤롯데씨어터 +
+
+ 2023.07.21 - 2023.11.17 +
+ + 좌석우위 + +
+
+
+
+
+
+ +
7
+
+
+
+ 뮤지컬 <모차르트!> +
+
+ 세종문화회관 대극장 +
+
+ 2023.06.15 - 2023.08.22 +
+
+
+
+
+
+
+ + 전체보기 +
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+

+ 인터파크 LIVE +

+
+
+
+
+
+
+
+
+ +
+
+
+ 방송예정 +
+ 피식쇼 용주와 함께😎 진에어 선착순 타임딜 + 소노 호텔앤리조트 룸온리 특가! +
+
+
+
+ +
+
+
[기획전] 인트SHOW!
+
+
+
+
+
08월 01일 (화)
+
11:00
+
+
+
+
+
+
+ +
+
+
+ 방송예정 +
+ 롯데리조트 속초&부여 최대 77%할인! +
+
+
+
+
08월 01일 (화)
+
11:00
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ [부산] 여름 성수기 여행 특가! 최대 77% 할인! +
+
+
+
+ +
+
+
해운대 썬클라우드 호텔
+
+ + 77% + + + 68,400원 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ 소담상회 x 올리쉐 +
+
+
+
+ +
+
+
올리쉐 넥 앤 페이스 밸런싱밤
+
+ + 30% + + + 26,600원 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ 힐튼가든인 서울강남 방송 당일 / 일주일 특가! +
+
+
+
+ +
+
+
힐튼 가든인 서울 강남
+
+ + 64% + + + 158,400원 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ [보홀] 에어텔 최대 60% 라이브 특가! 39만원대~ +
+
+
+
+ +
+
+
[카카오쇼핑X인터파크LIVE] 보홀 자유여행 6일_아시아나항공
+
+ + 399,000원 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ 엔조이커플 라라와 함께하는 제주항공 동계 운임 최초 할인 오픈 ! +
+
+
+
+ +
+
+
[기획전] 제주항공은 크-다✈️인터파크-다!
+
+
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ [일본 북해도 3박4일] 온천호텔 2박 + 라벤더 밭 관광까지❤ +
+
+
+
+ +
+
+
[북해도 3박 4일] 온천2박+후라노/비에이+청의호수
+
+ + 26% + + + 949,000원 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ [강원] 해수욕장 특집! 룸온리&패키지 최대 83% 할인 특가! +
+
+
+
+ +
+
+
라마다 속초 호텔
+
+ + 75% + + + 94,500원 + +
+
+
+
+
+
+
+
+
+ +
+
+
+ VOD +
+ [수요아트살롱] 순천만 국제 정원 박람회 +
+
+
+
+ +
+
+
순천만 국제 정원 박람회
+
+ + 20% + + + 12,000원 + +
+
+
+
+
+
+
+
+
+ +
+
+ +

방송준비중입니다.

+ +
+
+
+
+
+
+ +
+
+ +

방송준비중입니다.

+ +
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+

+ 인터파크 LIVE +

+
+
+
+
MD's Pick
+
베스트셀러
+
신간추천
+
특가할인
+
+
+
+
+
+
+
+ +
+
+
이토록 공부가 재미있어지는 순간
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
맑은 날이 아니어서 오히려 좋아
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
동주의 소포(초판본 미니북+크라프트 노트+종이책갈피볼펜세트+별헤는밤 연필6p+육필엽서세트大,小+윤동주 연보 미니엽서)
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
수상한 놀이공원 천옥원
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
눈에 갇힌 외딴 산장에서
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
이상한 나라의 앨리스 북퍼퓸 30ml
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
미래엔 중학교 역사 1 평가문제집 (김태웅) 2023년
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
일이란 무엇인가
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
비욘드 더 스토리(BEYOND THE STORY)
+
+ 16,200원 +
+
+
+
+
+
+
+ +
+
+
아기 판다 푸바오
+
+ 16,200원 +
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+

이벤트

+

인터파크에서 할인혜택을 꼭 챙기세요.

+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ + +
+
+
+
+
+ +
+
+ +
+
+ 최상단으로 이동 +
+
+ + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 00000000..bdbb9923 --- /dev/null +++ b/js/script.js @@ -0,0 +1,109 @@ +const throttle=(callback, limit = 100) => { + let waiting = false + return function() { + if(!waiting) { + callback.apply(this, arguments) + waiting = true + setTimeout(() => { + waiting = false + }, limit) + } + } +} + +window.addEventListener('scroll', throttle(()=>{ + const header = document.querySelector('header'); + const headerTop = document.querySelector('.header__top'); + const navMini = document.querySelector('.nav__mini'); + const searchWrap = document.querySelector('.search__wrap'); + console.log('fixed') + + if (window.scrollY > headerTop.clientHeight) { + header.classList.add('fixed'); + navMini.classList.remove('hidden'); + searchWrap.classList.add('hidden'); + } else { + header.classList.remove('fixed'); + navMini.classList.add('hidden'); + searchWrap.classList.remove('hidden'); + } +},100)); + +new Swiper('.eventBanner__swiperBox .swiper',{ + loop: true, + slidesPerView: 2, + spaceBetween: 24, + autoplay:{ + delay: 5000 + }, + navigation:{ + prevEl:'.swiper-prev__eventBanner', + nextEl:'.swiper-next__eventBanner' + } +}) + +const shoppingSwiper = new Swiper('.shopping__swiperBox .shopping__swiper .swiper',{ + slidesPerView: 4, + slidesPerGroup: 4, + spaceBetween: 26, + navigation:{ + prevEl:'.swiper-prev__shopping', + nextEl:'.swiper-next__shopping', + } +}); +const tourSwiper = new Swiper('.tour__swiperBox .tour__swiper .swiper',{ + slidesPerView: 3, + slidesPerGroup: 3, + spaceBetween: 24, + navigation:{ + prevEl:'.swiper-prev__tour', + nextEl:'.swiper-next__tour', + } +}) +const ticketSwiper = new Swiper('.ticket__swiperBox .ticket__swiper .swiper',{ + slidesPerView: 4, + slidesPerGroup: 4, + spaceBetween: 26, + navigation:{ + prevEl:'.swiper-prev__ticket', + nextEl:'.swiper-next__ticket', + } +}) +const liveSwiper = new Swiper('.live__swiperBox .live__swiper .swiper',{ + slidesPerView: 4, + slidesPerGroup: 4, + spaceBetween: 26, + navigation:{ + prevEl:'.swiper-prev__live', + nextEl:'.swiper-next__live', + } +}) +const bookSwiper = new Swiper('.book__swiperBox .book__swiper .swiper',{ + slidesPerView: 5, + slidesPerGroup: 5, + spaceBetween: 27.5, + navigation:{ + prevEl:'.swiper-prev__book', + nextEl:'.swiper-next__book', + } +}) +const eventSwiper = new Swiper('.event__swiperBox .event__swiper .swiper',{ + loop:true, + slidesPerView: 4, + slidesPerGroup: 4, + spaceBetween: 26, + autoplay:{ + delay: 5000 + }, + navigation:{ + prevEl:'.swiper-prev__event', + nextEl:'.swiper-next__event', + } +}) + +const toTopEl = document.querySelector('.btn__toTop .ico__arrow--up'); +toTopEl.addEventListener('click',function(){ + gsap.to(window, 0.7, { + scrollTo: 0 + }); +})