diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9bf4d12 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true +} diff --git a/juhee/.prettierrc b/juhee/.prettierrc new file mode 100644 index 0000000..0af6e02 --- /dev/null +++ b/juhee/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": true, + "tabWidth": 2, + "printWidth": 120, + "trailingComma": "all", + "bracketSameLine": true, + "singleQuote": true +} diff --git a/juhee/assets/icons/btn_search.png b/juhee/assets/icons/btn_search.png new file mode 100644 index 0000000..02f0466 Binary files /dev/null and b/juhee/assets/icons/btn_search.png differ diff --git a/juhee/index.html b/juhee/index.html index 5754225..8932c58 100644 --- a/juhee/index.html +++ b/juhee/index.html @@ -1,382 +1,425 @@ - - - - + + + + Olive Young by JH - - - - - + + + + + + +
-
- -
-
-
+
+
+ + -
-
-
-
-
+ +
+
+ Black등급 황주희님,
+ 반갑습니다 올리브영입니다! +
+
+
+
    +
  • 이번달 올영 Pick!
    • +
  • 일주일 특가
    • +
  • 진행중인 이벤트
    • +
+
    +
  • 마이페이지
    • +
  • 쿠폰 3장
    • +
  • 포인트 11,000P
    • +
  • 장바구니
    • +
  • 관심 매장 소식
    • +
  • 최근 본 상품
    • +
+
+
+
    +
  • 오늘의 특가
    • +
  • 신상
    • +
  • 랭킹
    • +
  • 프리미엄관
    • +
  • 오늘드림
    • +
  • 기획전
    • +
  • 세일
    • +
  • 기프트카드
    • +
+
    +
  • 실시간 view 랭킹
    • +
  • 가히 김고은 멀티밤
    • +
+
- -
-
-
- -
-
- - - 기초 화장품 - -
-
- - - 더모 코스메틱 - -
-
- - - 메이크업/네일 - -
-
- - - 바디케어 - -
-
- - - 헤어케어 - -
-
- - - 향수/디퓨저 - -
-
- - - 미용소품 - -
-
- - - 남성 - -
-
- - - 건강/위생용품 - -
-
- - - 건강식품 - -
-
- +
+ + + + + + +
+
+
+
+ + + 다른 상품도 추천해드릴게요! + +

김소령님만을 위한 추천 상품이에요!

+ + 더보기 + + +
+
+
+
+ +
+
+
+

바이오힐보

+

판테놀 시카 크림 더블 기획

+
+
+ 오늘드림 + 세일 +
+
+ 0,000명이 보고 있어요! + 36,000원 + 3,500원 +
-
- - - - - - +
+
+
+
+
+
+

브링그린

+

사철쑥 카밍토너 & 수분크림

+
+
+ 오늘드림 + 세일 +
+
+ 0,000명이 보고 있어요! + 36,000원 + 3,500원 +
+
+
-
-
- - - 다른 상품도 추천해드릴게요! - -

김소령님만을 위한 추천 상품이에요!

- - 더보기 - - +
+
+
+ +
+
+
+

유세린

+

하이알루론 나이트 크림 500ml

+
+
+ 오늘드림 + 세일 +
+
+ 0,000명이 보고 있어요! + 36,000원 + 3,500원 +
+
+
+
+
+
-
-
-
- -
-
-

바이오힐보

-

판테놀 시카 크림 더블 기획

-
-
- 오늘드림 - 세일 -
-
- 0,000명이 보고 있어요! - 36,000원 - 3,500원 -
-
-
-
- -
-
-

브링그린

-

사철쑥 카밍토너 & 수분크림

-
-
- 오늘드림 - 세일 -
-
- 0,000명이 보고 있어요! - 36,000원 - 3,500원 -
-
-
-
- -
-
-

유세린

-

하이알루론 나이트 크림 500ml

-
-
- 오늘드림 - 세일 -
-
- 0,000명이 보고 있어요! - 36,000원 - 3,500원 -
-
-
-
- -
-
-

브링그린

-

사철쑥대머리아저씨는코가손

-
-
- 오늘드림 - 세일 -
-
- 0,000명이 보고 있어요! - 36,000원 - 3,500원 -
-
+
+
+

브링그린

+

사철쑥대머리아저씨는코가손

+
+
+ 오늘드림 + 세일 +
+
+ 0,000명이 보고 있어요! + 36,000원 + 3,500원 +
+
+
+
+ + + + + + +
+
+

오직 올리브영에서만!

+
- + + 오뚜기 스프에 슾며들기 - + + 세븐틴 추천템 보러가기 + + + '진정'되는 행사 보러가기 + +
+ + +
-
-

오직 올리브영에서만!

-
- - - 오뚜기 스프에 슾며들기 - - - - 세븐틴 추천템 보러가기 - - - - '진정'되는 행사 보러가기 - -
- - - -
+
+
- -
-
-

-

다이어트 집착 연구소 세리박스

-

'건강한 아름다움'의 입소문이 만들어낸 특별한 시작

-
-
-

-

저자극 스킨케어 코스알엑스

-

좋은 성분은 최대로, 피부에 자극을 줄 수 있는 성분은 최소로

-
-
-

-

고기능 클린 자연주의 구달

-

한국의 재질 원물을 신선하게 Fresh Catch! 순하지만 피부의 변화가 느껴지는 고기능 클린 스킨케어 솔루션을 지향합니다.

-
+ +
+
+

+

다이어트 집착 연구소
세리박스

+

'건강한 아름다움'의 입소문이 만들어낸
특별한 시작

- -
-
-
- - - 다른 상품도 추천해드릴게요! - -

실시간 VIEW 랭킹

- - 더보기 - - +
+

+

저자극 스킨케어
코스알엑스

+

좋은 성분은 최대로,
피부에 자극을 줄 수 있는 성분은 최소로

-
-
- - - -

웨이크메이크

-

네일건 2021 F/W 시즌 네일

-
- 오늘드림 - 세일 -
-
- 0,000명이 보고 있어요! - 36,000원 - 3,500원 -
-
-
    -
  • 1 코스알엑스 프로폴리스 앰플
    • -
  • 2 가히 김고은 멀티밤
    • -
  • 3 웨이크메이크 네일건 2021 F/W 시즌 네일
    • -
  • 4 유세린 하이알루론 나이트 크림 50ml
    • -
  • 5 브링그린 사철쑥 카밍토너 & 수분크림 세트
    • -
+
+

+

고기능 클린 자연주의
구달

+

+ 한국의 재질 원물을 신선하게 Fresh Catch!
순하지만 피부의 변화가 느껴지는
고기능 클린 스킨케어 + 솔루션을 지향합니다. +

+
+
+ +
+
+
+
+ + + 다른 상품도 추천해드릴게요! + +

실시간 VIEW 랭킹

+ + 더보기 + + +
+
+
+ + + +
+
+

웨이크메이크

+

네일건 2021 F/W 시즌 네일

+
+
+ 오늘드림 + 세일 +
+
+ 0,000명이 보고 있어요! + 36,000원 + 3,500원 +
+
+
    +
  • 1 코스알엑스 프로폴리스 앰플
    • +
  • 2 가히 김고은 멀티밤
    • +
  • 3 웨이크메이크 네일건 2021 F/W 시즌 네일
    • +
  • 4 유세린 하이알루론 나이트 크림 50ml
    • +
  • 5 브링그린 사철쑥 카밍토너 & 수분크림 세트
    • +
-
-
-
    -
  • - 이벤트 - 리뷰를 리뷰해 잉글롯 당첨자 발표 -
    • -
  • - 이벤트 - 오늘드립 룰렛 이벤트 당첨자 경품 발송 안내 -
    • -
  • - 일반 - 올리브영 전주인후점 리뉴얼로 인한 영업 중단 -
    • -
  • - 일반 - 올리브영 전주인후점 리뉴얼로 인한 영업 중단 -
    • -
+
+
+
+ 공지사항 +
    +
  • + 이벤트 + 리뷰를 리뷰해 잉글롯 당첨자 발표 +
    • +
  • + 이벤트 + 오늘드립 룰렛 이벤트 당첨자 경품 발송 안내 +
    • +
  • + 일반 + 올리브영 전주인후점 리뉴얼로 인한 영업 중단 +
    • +
  • + 일반 + 올리브영 전주인후점 리뉴얼로 인한 영업 중단 +
    • +
+
+
+ 고객센터 +
    +
  • + 온라인몰 고객센터 + 1522-0882 +
    • +
  • + 매장 고객센터 + 1577-4887 +
    • +
+
+
+ 고객센터 운영시간 [평일 09:00 - 18:00] + 주말 및 공휴일은 1:1문의하기를 이용해주세요.
업무가 시작되면 바로 처리해드립니다.
-
-

고객센터

-
    -
  • - 온라인몰 고객센터 - 1522-0882 -
    • -
  • - 매장 고객센터 - 1577-4887 -
    • -
+
+ +
+
+
+
+
+
+
  • + 회사소개 + 채용안내 + 가맹점 개설문의 + 상품입점 및 제휴문의 + 사이버 감사실 + 고객센터 +
    • + CJ그룹 계열사 바로가기 +
    - + - - \ No newline at end of file + + diff --git a/juhee/styles/common.css b/juhee/styles/common.css index 9ad25cf..3891bc8 100644 --- a/juhee/styles/common.css +++ b/juhee/styles/common.css @@ -1,15 +1,53 @@ /* 공통으로 쓰는 칭구들입니당 */ * { - box-sizing: border-box; + box-sizing: border-box; } -body{ - margin: auto; - max-width: 1728px; - width: 100%; +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ + src: local('Material Icons'), local('MaterialIcons-Regular'), + url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), + url(https://example.com/MaterialIcons-Regular.woff) format('woff'), + url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); } -li{ - list-style: none; +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} + +body { + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + max-width: 1920px; +} + +li { + list-style: none; } diff --git a/juhee/styles/footer.css b/juhee/styles/footer.css new file mode 100644 index 0000000..3fba99e --- /dev/null +++ b/juhee/styles/footer.css @@ -0,0 +1,34 @@ +/* header영역 스타일시트입니다 */ + +.footer { + width: 100%; + height: 483px; + background-color: #eeeeee; +} + +.footer_contents { + width: 1020px; + margin: 80px auto auto auto; +} + +.footer_contents_list { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer_first_column { + color: #333333; + width: 248px; +} + +.footer_second_column > p { + color: #333333; + font-size: 16px; + align-items: center; +} + +.footer_last_column > li { + display: flex; + flex-direction: column; +} diff --git a/juhee/styles/header.css b/juhee/styles/header.css new file mode 100644 index 0000000..ac58bd8 --- /dev/null +++ b/juhee/styles/header.css @@ -0,0 +1,147 @@ +/* header영역 스타일시트입니다 */ + +.header { + width: 1020px; + height: 192px; + margin: 0 100px; + display: inline-block; + justify-content: center; +} + +.top_menu{ + width: 100%; + } + +.menu_list { + list-style: none; + margin: 0px; + padding:0px; + float: right; + height: 30px; + width: 297px; + display: flex; + align-items: center; + justify-content: right; +} + +.menu_list > li { + margin: 0 0 0 10px; + font-size: 12px; +} + + +.header_inner { + width: 1021px; + height: 40px; + display: inline-block; +} + +.header_first { + width: 100%; + margin-top:33px; + display: flex; + justify-content: space-between; +} + +.logo { + width: 248px; + height: 42px; +} + +.search_bar { + position: relative; + width: 540px; + height: 40px; + border: 2px solid #a6cd48; + border-radius: 20px; +} + +.search_btn { + position: absolute; + top: 8px; + right: 10px; +} + +.customer_info { + font-size: 15px; + margin: 3px 0 0 0; +} + +.header_second { + width: 100%; + display: flex; + margin-top: 19px; + justify-content: space-between; + font-size: 12px; +} + +.second_left { + list-style: none; + margin: 0px; + padding: 0px; + width: 100%; + display: flex; + justify-content: left; +} + +.second_left > li { + margin: 0 10px 0 0; +} + +.second_right { + list-style: none; + margin: 0px; + padding: 0px; + width: 100%; + display: flex; + justify-content: right; +} + +.second_right > li { + margin: 0 0 0 15px; +} + +.nav_sub { + width: 1020px; + height: 20px; + margin-top: 30px; + display: flex; +} + +.sub_left { + list-style: none; + margin: 0px; + padding: 0px; + width: 100%; + height: 20px; + display: flex; + display: left; +} + +.sub_left > li { + margin: 0 8px 0 0; + font-size: 16px; +} + +.sub_right { + list-style: none; + margin: 0px; + padding: 0px; + width: 100%; + height: 20px; + display: flex; + justify-content: right; +} + +.sub_right > li { + margin: 0 0 0 8px; + font-size: 16px; +} + +.member_level { + color: #a6cd48; +} + +.mypage_variable { + color: #ee7d6c; +} diff --git a/juhee/styles/main.css b/juhee/styles/main.css index 10545c6..c544cd2 100644 --- a/juhee/styles/main.css +++ b/juhee/styles/main.css @@ -1,11 +1,446 @@ -.main{ - width: 100%; - height: 779px; - background-image: url(/HTML-CSS/juhee/assets/images/header_bg.png); +.main { + width: 100%; + height: 100%; } -.second_banner{ - width: 100%; - height: 600px; - background-image: url(/HTML-CSS/juhee/assets/images/main_bg.png); -} \ No newline at end of file +.main_full_banner { + position: relative; + width: 100%; + height: 779px; + margin-top: 20px; + background-image: url('/juhee/assets/images/header_bg.png'); + background-position: center; + background-size: contain; +} + +.main_left { + position: absolute; + left: 495px; + top: 100px; + width: 376px; + height: 211px; +} + +.left_text1 { + font-size: 36px; + font-weight: bold; + color: #60079f; +} + +.left_text2 { + font-size: 48px; + font-weight: bolder; + color: white; + margin-top: 20px; +} + +.left_text3 { + font-size: 18px; + color: #777777; + margin-top: 5px; +} + +.category_list { + position: absolute; + top: 530px; + left: 466px; + width: 990px; + height: 120px; + display: flex; + justify-content: space-around; + align-items: center; +} + +.nav_item { + display: flex; + flex-direction: column; + align-items: center; +} + +.top_banner { + position: absolute; + top: 729px; + left: 450px; + width: 1020px; + display: flex; + justify-content: space-between; +} + +.main_product { + margin-top: 100px; + margin-left: 450px; + width: 1020px; +} + +.product_title { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.product_name > h2 { + font-size: 24px; + color: #777777; +} + +.product_name > h3 { + font-size: 16px; + color: #333333; +} + +.today_dream { + background-color: #a6cd48; + color: white; + padding: 2px 10px; + border-radius: 25px; + font-size: 12px; + width: 69px; + height: 18px; +} + +.sale { + background-color: #ee7d6c; + color: white; + padding: 2px 5px; + border-radius: 25px; + font-size: 12px; + width: 35px; + height: 18px; +} + +.product_list { + display: flex; + justify-content: space-between; + margin-top: 10px; +} + +.product_info { + margin-left: 15px; +} + +.product_detail { + display: flex; + flex-direction: column; + padding: 23px 0; +} + +.product_view { + color: #ee7d6c; +} + +.product_pre_price { + color: #777777; +} + +.product_price { + color: #e02020; + font-size: 20px; + font-weight: bold; +} + +.product_contents { + display: flex; + justify-content: space-between; +} + +.second_banner_bg { + position: relative; + width: 100%; + height: 600px; + margin-top: 214px; + background-image: url('/juhee/assets/images/main_bg.png'); +} + +.second_banner { + position: absolute; + top: -114px; + left: 450px; + width: 1020px; + display: flex; + justify-content: space-between; +} + +.event_list { + position: absolute; + top: 165px; + left: 450px; + width: 970px; + height: 362px; +} + +.event_list > h2 { + font-size: 24px; + text-align: center; +} + +.event_content { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 30px; +} + +.event_content > a { + display: flex; + flex-direction: column; + font-size: 24px; + align-items: center; +} + +.event_content > a > span { + margin-top: 11px; +} + +.slide_pick { + margin: 15px; +} + +.brand_banner_wrap { + width: 100%; + margin-top: 100px; + justify-content: center; +} + +.brand_banner { + display: flex; + justify-content: space-between; + align-items: center; + width: 1122px; + height: 440px; + margin: 0px auto; +} + +.brand_list { + width: 970px; + display: flex; + justify-content: space-between; +} + +.brand_contents { + position: relative; + align-items: center; +} + +.brand_contents > h2 { + position: absolute; + width: 266px; + top: 291px; + left: 35px; + font-size: 24px; + color: white; +} + +.brand_contents > h3 { + position: absolute; + width: 266px; + top: 349px; + left: 35px; + font-size: 15px; + color: white; +} + +.brand_left_btn { + border: 0; + background-color: transparent; + width: 20px; + height: 38px; + background-image: url('/juhee/assets/icons/left_gray.png'); +} + +.brand_right_btn { + border: 0; + background-color: transparent; + width: 20px; + height: 38px; + background-image: url('/juhee/assets/icons/right_gray.png'); +} + +.view_ranking { + width: 1020px; + margin-left: 450px; + margin-top: 100px; +} + +.ranking_title { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.rank_contents { + width: 965px; + margin: 0px auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.rank_product { + display: flex; + justify-content: space-between; +} + +.rank_product_info { + margin-left: 15px; +} + +.rank_product_list { + font-size: 24px; + color: #aaaaaa; + height: 200px; + display: flex; + justify-content: space-between; + flex-direction: column; +} + +.rank_product_list :hover { + color: #333333; + font-weight: bold; + text-shadow: transparent; +} + +.main_bottom { + width: 950px; + margin: 107px auto 0px auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.announcement { + width: 440px; + height: 170px; +} + +.announcement_title { + font-weight: bold; + font-size: 24px; + text-align: center; + display: flex; + justify-content: center; +} + +.announcement > ul { + font-size: 18px; + color: #777777; + height: 126px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-inline-start: 0px; +} + +.event_tag { + padding: 2px 11px; + width: 37px; + height: 10px; + border-radius: 25px; + background-color: #ee7d6c; + color: white; + font-size: 12px; +} + +.gen_tag { + padding: 2px 17px; + width: 37px; + height: 10px; + border-radius: 25px; + background-color: #a6cd48; + color: white; + font-size: 12px; +} + +.cs_center { + width: 440px; + height: 183px; +} + +.cs_center_title { + font-weight: bold; + font-size: 24px; + text-align: center; + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.cs_center > ul { + width: 100%; + padding-inline-start: 0px; +} + +.cs_center_info { + height: 30px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; +} + +.call_name { + text-align: center; + font-size: 18px; + color: #777777; +} + +.call_num { + width: 202px; + text-align: right; + letter-spacing: 4px; + font-size: 30px; + font-weight: bold; + color: #a6cd48; +} + +.cs_information { + font-size: 12px; + display: flex; + flex-direction: column; +} + +.cs_center_last { + width: 100%; + display: flex; + justify-content: space-between; +} + +.cs_btn { + border: 0; + background-color: #aaaaaa; + color: white; + width: 85px; + height: 48px; + font-size: 12px; +} + +.main_last { + margin: 30px auto 100px auto; + width: 1020px; + display: flex; + justify-content: space-between; +} + +.bottom_menu { + width: 489px; + height: 30px; +} + +.bottom_menu_list { + color: #333333; + font-size: 12px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.menu_list { + margin: 0 0 0 10px; + font-size: 12px; +} + +.cj_family { + color: #777777; +} diff --git a/juhee/styles/menu.css b/juhee/styles/menu.css deleted file mode 100644 index 5fc250b..0000000 --- a/juhee/styles/menu.css +++ /dev/null @@ -1 +0,0 @@ -/* 메뉴를 위한 CSS입니당 */ \ No newline at end of file