diff --git a/README.md b/README.md index cc6a3b23..9a986306 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,27 @@ -[참고 내용] +# 네이버 메인 페이지 클론코딩 -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +## 실제 사이트 -과제 수행 및 제출 방법 +https://www.naver.com/
-1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +## 데모 사이트 +https://regal-frangipane-f310c3.netlify.app/
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! +## 구현한 내용 -필수 요구사항 +image
+image +
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +- html과 css를 이용한 네이버 메인페이지 클론 코딩 +- 시맨틱 태그 활용 +- grid와 flex 활용 +- netlify를 이용한 배포 -선택 요구사항 +
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) +## 아쉬운 점 -손쉬운 이미지 추출 방법 - -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. - -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! +- 스프라이트 이미지 형식은 처음 보아서 처음에 어떻게 써야하는지 찾아봤다. 스프라이트 이미지는 한장에 모든 이미지가 다 모여있는 이미지라서 포지션을 지정해서 사용해줘야한다. 멘토님께 여쭤보니 잘라서 하나씩 사용하는 것을 추천해주셨는데, 바꾸는 과정에서 화질이라던지, 여백등의 여러가지 문제가 생겨 결국 원래대로 스프라이트 이미지에 background-position을 주는 방식으로 구현했다. +- css부분이 약하다고 생각하고 있었는데 자바스크립트 없이 html, css 로만 만드려니 초반에 어려움을 겪었다. 클론코딩을 완벽하게 구현 할 수 있는 수준이 될때까지 css 공부를 조금 더 해야겠다고 느꼈다. diff --git a/assets/after.png b/assets/after.png new file mode 100644 index 00000000..76e9a5cb Binary files /dev/null and b/assets/after.png differ diff --git a/assets/before.png b/assets/before.png new file mode 100644 index 00000000..895112e9 Binary files /dev/null and b/assets/before.png differ diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 00000000..e1fa98b4 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/footer/1.png b/assets/footer/1.png new file mode 100644 index 00000000..00006eee Binary files /dev/null and b/assets/footer/1.png differ diff --git a/assets/footer/2.png b/assets/footer/2.png new file mode 100644 index 00000000..14e72cd4 Binary files /dev/null and b/assets/footer/2.png differ diff --git a/assets/footer/3.png b/assets/footer/3.png new file mode 100644 index 00000000..126528ef Binary files /dev/null and b/assets/footer/3.png differ diff --git a/assets/left-ad.jpg b/assets/left-ad.jpg new file mode 100644 index 00000000..580dde1b Binary files /dev/null and b/assets/left-ad.jpg differ diff --git a/assets/news/1.png b/assets/news/1.png new file mode 100644 index 00000000..f93570d8 Binary files /dev/null and b/assets/news/1.png differ diff --git a/assets/news/10.png b/assets/news/10.png new file mode 100644 index 00000000..7f72afc0 Binary files /dev/null and b/assets/news/10.png differ diff --git a/assets/news/11.png b/assets/news/11.png new file mode 100644 index 00000000..7e5b57bd Binary files /dev/null and b/assets/news/11.png differ diff --git a/assets/news/12.png b/assets/news/12.png new file mode 100644 index 00000000..4008cd7e Binary files /dev/null and b/assets/news/12.png differ diff --git a/assets/news/13.png b/assets/news/13.png new file mode 100644 index 00000000..086a27ef Binary files /dev/null and b/assets/news/13.png differ diff --git a/assets/news/14.png b/assets/news/14.png new file mode 100644 index 00000000..1132b78e Binary files /dev/null and b/assets/news/14.png differ diff --git a/assets/news/15.png b/assets/news/15.png new file mode 100644 index 00000000..5f8fd55a Binary files /dev/null and b/assets/news/15.png differ diff --git a/assets/news/16.png b/assets/news/16.png new file mode 100644 index 00000000..ae62d4e9 Binary files /dev/null and b/assets/news/16.png differ diff --git a/assets/news/17.png b/assets/news/17.png new file mode 100644 index 00000000..a4308189 Binary files /dev/null and b/assets/news/17.png differ diff --git a/assets/news/18.png b/assets/news/18.png new file mode 100644 index 00000000..f71ba769 Binary files /dev/null and b/assets/news/18.png differ diff --git a/assets/news/19.png b/assets/news/19.png new file mode 100644 index 00000000..fa4e5d24 Binary files /dev/null and b/assets/news/19.png differ diff --git a/assets/news/2.png b/assets/news/2.png new file mode 100644 index 00000000..d1b7df3c Binary files /dev/null and b/assets/news/2.png differ diff --git a/assets/news/20.png b/assets/news/20.png new file mode 100644 index 00000000..1f68667c Binary files /dev/null and b/assets/news/20.png differ diff --git a/assets/news/21.png b/assets/news/21.png new file mode 100644 index 00000000..358ee424 Binary files /dev/null and b/assets/news/21.png differ diff --git a/assets/news/22.png b/assets/news/22.png new file mode 100644 index 00000000..5dc81960 Binary files /dev/null and b/assets/news/22.png differ diff --git a/assets/news/23.png b/assets/news/23.png new file mode 100644 index 00000000..4805b302 Binary files /dev/null and b/assets/news/23.png differ diff --git a/assets/news/24.png b/assets/news/24.png new file mode 100644 index 00000000..fe1e2a2f Binary files /dev/null and b/assets/news/24.png differ diff --git a/assets/news/3.png b/assets/news/3.png new file mode 100644 index 00000000..633b3bab Binary files /dev/null and b/assets/news/3.png differ diff --git a/assets/news/4.png b/assets/news/4.png new file mode 100644 index 00000000..de3f4f49 Binary files /dev/null and b/assets/news/4.png differ diff --git a/assets/news/5.png b/assets/news/5.png new file mode 100644 index 00000000..74efd363 Binary files /dev/null and b/assets/news/5.png differ diff --git a/assets/news/6.png b/assets/news/6.png new file mode 100644 index 00000000..fd760214 Binary files /dev/null and b/assets/news/6.png differ diff --git a/assets/news/7.png b/assets/news/7.png new file mode 100644 index 00000000..f070fced Binary files /dev/null and b/assets/news/7.png differ diff --git a/assets/news/8.png b/assets/news/8.png new file mode 100644 index 00000000..5824c6bf Binary files /dev/null and b/assets/news/8.png differ diff --git a/assets/news/9.png b/assets/news/9.png new file mode 100644 index 00000000..2e63b978 Binary files /dev/null and b/assets/news/9.png differ diff --git a/assets/right-ad.png b/assets/right-ad.png new file mode 100644 index 00000000..9231843c Binary files /dev/null and b/assets/right-ad.png differ diff --git a/assets/shopping/1.jpg b/assets/shopping/1.jpg new file mode 100644 index 00000000..8cd025f6 Binary files /dev/null and b/assets/shopping/1.jpg differ diff --git a/assets/shopping/2.jpg b/assets/shopping/2.jpg new file mode 100644 index 00000000..54f424a7 Binary files /dev/null and b/assets/shopping/2.jpg differ diff --git a/assets/shopping/3.jpg b/assets/shopping/3.jpg new file mode 100644 index 00000000..abb90724 Binary files /dev/null and b/assets/shopping/3.jpg differ diff --git a/assets/shopping/4.jpg b/assets/shopping/4.jpg new file mode 100644 index 00000000..7c3dd6ed Binary files /dev/null and b/assets/shopping/4.jpg differ diff --git a/assets/shopping/5.jpg b/assets/shopping/5.jpg new file mode 100644 index 00000000..6e7525c8 Binary files /dev/null and b/assets/shopping/5.jpg differ diff --git a/assets/shopping/6.jpg b/assets/shopping/6.jpg new file mode 100644 index 00000000..7c0676ef Binary files /dev/null and b/assets/shopping/6.jpg differ diff --git a/assets/shopping/7.jpg b/assets/shopping/7.jpg new file mode 100644 index 00000000..5c6b6905 Binary files /dev/null and b/assets/shopping/7.jpg differ diff --git a/assets/shopping/8.jpg b/assets/shopping/8.jpg new file mode 100644 index 00000000..13449cf9 Binary files /dev/null and b/assets/shopping/8.jpg differ diff --git a/assets/shopping/ad1.jpg b/assets/shopping/ad1.jpg new file mode 100644 index 00000000..f7f6e87b Binary files /dev/null and b/assets/shopping/ad1.jpg differ diff --git a/assets/shopping/ad2.png b/assets/shopping/ad2.png new file mode 100644 index 00000000..85da4057 Binary files /dev/null and b/assets/shopping/ad2.png differ diff --git a/assets/sp_main.png b/assets/sp_main.png new file mode 100644 index 00000000..9fd87514 Binary files /dev/null and b/assets/sp_main.png differ diff --git a/assets/sp_main2.png b/assets/sp_main2.png new file mode 100644 index 00000000..5d29b8aa Binary files /dev/null and b/assets/sp_main2.png differ diff --git a/assets/stock.png b/assets/stock.png new file mode 100644 index 00000000..126cc49d Binary files /dev/null and b/assets/stock.png differ diff --git a/assets/we.png b/assets/we.png new file mode 100644 index 00000000..2a0818e8 Binary files /dev/null and b/assets/we.png differ diff --git a/assets/weather.png b/assets/weather.png new file mode 100644 index 00000000..68bc069c Binary files /dev/null and b/assets/weather.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..0ffeaed0 --- /dev/null +++ b/index.html @@ -0,0 +1,253 @@ + + + + + + + NAVER + + + + + + +
+
+ + + + + + + +
+
+ + +
+ + +
+ + 언론사 더보기 1/4 + +
+
+ +
+
+
+ 쇼핑 / +   맨즈 / +   원쁠딜 / +   쇼핑라이브 +
+ + + +
+
+
+
만원대~여름코디

심플하고착한가격
+
+
상반기 결산SALE

BEST 최대71%↓
+
+
단정한핏~인기!

최대80%SALE시작
+
+
TIME SALE

바스락~ 롱원피스
+
+
아침에 광이나요

+ 붙이고 자버려요
+
+
1일1포 챙겨먹어

1+1일때 쟁여
+
+
우유베개 1&1

1만원 쿠폰!
+
+
역대급 50%특가

인형키링 곰빵이!
+
+ +
+ + + +
+ + +
+
#몽제 #1,250억돌파 #7월한정특가 + 바닥에서도 허리 완전 편해~
+
+
+
+ + 쇼핑아이템 더보기 1/18 + +
+
+
+ +
+
+
네이버를 더 안전하고 편리하게 이용하세요.
+ 로그인 + +
+ + + + +
+
+ + +
+ + + + diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 00000000..65566167 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,105 @@ +#footer-main { + display: flex; + justify-content: space-between; + flex-flow: column; + padding: 30px 0 0 30px; + border-top: 1px solid hsl(0, 0%, 91%); +} + +#footer-ad { + margin-bottom: 30px; + display: flex; + justify-content: space-between; + border-radius: 4px; +} + +#footer-main span { + align-items: center; +} + +#footer-list { + border-top: 1px solid #e4e4e4; + flex-flow: column; + color: #404040; + height: 164px; + margin-bottom: 16px; + padding: 21px 20px 18px; + display: flex; + line-height: 18px; + text-align: center; +} + +#footer-list > ul { + display: flex; + list-style-type: none; + justify-content: center; + font-size: 1.2rem; + margin-top: 10px; +} + +#footer-list li { + display: flex; + justify-content: center; + margin-left: 15px; + margin-top: 2px; +} + +#footer-list a { + color: black; + text-decoration: none; +} +#footer-list a:hover { + text-decoration: underline; +} + +#footer-list li a::after { + content: ""; + display: inline-block; + width: 1px; + height: 12px; + background-color: hsl(210, 5%, 84%); + margin-right: 10px; +} + +#footer-ad-image { + width: 160px; + height: 100px; + border-radius: 4px; +} + +#footer-big-box { + display: flex; + flex-flow: column; +} + +#footer-box { + white-space: nowrap; + text-align: start; + height: 20px; + width: max-content; + padding: 0 6px; + border-radius: 4px; + font-size: 13px; + line-height: 20px; + letter-spacing: -0.25px; + color: #fff; + background-color: #a0adb2; +} + +#footer-text { + margin-top: 10px; + text-align: start; + color: black; + font-size: 13px; + line-height: 20px; + letter-spacing: -0.25px; +} + +#footer-intro { + text-align: start; + color: #6e6e6e; + font-size: 13px; + line-height: 20px; + letter-spacing: -0.25px; + margin-top: 10px; +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 00000000..3ec3cfa5 --- /dev/null +++ b/styles/header.css @@ -0,0 +1,201 @@ +* { + box-sizing: border-box; +} + +body, +html { + margin: 0px; + padding: 0px; + font-size: 10.5px; + line-height: 10.5px; +} + +form, +ul { + margin: 0px; + padding: 0px; +} +#wrap { + text-align: center; +} +#wrap-center { + width: 1280px; + display: inline-block; +} +#header { + text-align: left; + position: relative; + height: 64px; +} +#header-hamburger, +#header-naverpay, +#header-notice { + position: absolute; + top: 18px; + padding: 10px; + display: inline-block; + background: none; + border: none; + cursor: pointer; +} + +#header-hamburger:hover::before, +#header-naverpay:hover::before, +#header-notice:hover::before { + position: absolute; + content: ""; + z-index: 0; + left: 1px; + top: 1px; + width: 44px; + height: 44px; + background-color: #e4e4e4; + border-radius: 50%; +} +#header-hamburger > div, +#header-naverpay > div, +#header-notice > div { + background-image: url(../assets/sp_main.png); + width: 26px; + height: 26px; + position: relative; + z-index: 1; + background-repeat: no-repeat; + background-size: 422px 405px; +} +#header-hamburger { + left: -10px; +} + +#header-hamburger > div { + background-position: -335px -284px; +} + +#header-naverpay { + right: 42px; + padding: 10px 8px; +} + +#header-naverpay > div { + width: 30px; + background-position: -31px -316px; +} + +#header-notice { + right: -10px; +} + +#header-notice > div { + background-position: -364px -27px; +} +#main { + height: 1200px; +} + +#search > form { + display: inline-flex; + height: 60px; + width: 708px; + border: 1px solid #03c75a; + border-radius: 33px; + text-align: left; +} + +#search > form:hover { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12); +} + +#search > form > input { + height: 100%; + width: 480px; + padding: 17px 0; + border: none; + outline: none; +} + +#search-svg { + display: inline-flex; + justify-content: center; + align-items: center; + width: 68px; + margin-right: 12px; + padding-left: 10px; + height: 100%; + position: relative; +} + +#search-svg::after { + content: ""; + width: 1px; + height: 20px; + background-color: #e4e4e4; + position: absolute; + display: inline-block; + right: 0; + top: 20px; +} + +#search-svg svg { + width: 24px; + height: 24px; + fill: #03c75a; +} +#search-input { + width: 480px; + padding: 17px 0; + font-size: 2rem; + line-height: 24px; + border: none; + outline: none; +} +#search-input::placeholder { + color: white; +} +#search-input:focus::placeholder { + color: #e4e4e4; +} +#search-right { + flex: 1; + display: flex; + align-items: stretch; + justify-content: flex-end; +} +#search-button { + padding: 17px 27px 16px 10px; +} + +#search-button, +#search-recent, +#search-keyboard { + background: transparent; + border: none; + cursor: pointer; +} +#search-button::before, +#search-recent::before, +#search-keyboard:before { + content: ""; + display: block; + background-image: url(../assets/sp_main.png); + background-size: 422px 405px; + background-repeat: no-repeat; +} +#search-keyboard:before { + background-position: -270px -234px; + width: 24px; + height: 16px; +} +#search-keyboard:hover::before { + filter: brightness(0.7); +} +#search-recent::before { + background-position: -412px -352px; + width: 10px; + height: 6px; +} + +#search-button::before { + background-position: -364px -132px; + width: 25px; + height: 25px; +} diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 00000000..5702ec4c --- /dev/null +++ b/styles/main.css @@ -0,0 +1,444 @@ +#main { + display: flex; + margin-top: 71px; +} +#main-left { + width: 830px; + margin-right: 30px; +} + +#main-right { + width: 420px; +} + +aside, +#main-login, +#main-left-ad, +#main-right-ad, +#main-news, +#main-shopping, +#main-weather, +#main-stock { + border-radius: 8px; +} + +#main-login, +#main-left-ad, +#main-right-ad, +#main-news, +#main-shopping, +#main-weather, +#main-stock { + box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, 0.04); +} + +#main-weather, +#main-stock { + padding: 18px; + width: 423px; + height: 236px; + margin-bottom: 16px; +} + +#main-left-ad { + height: 130px; + margin-bottom: 16px; + cursor: pointer; +} + +#main-right-ad { + height: 240px; + margin-bottom: 16px; + cursor: pointer; +} + +#main-news-top, +#main-shopping-top { + flex: 1; + padding: 18px 20px; + display: flex; + flex-direction: column; + font-size: 1.4rem; +} + +#main-news header, +#main-shopping header { + font-size: 1.6rem; + color: #5b5b5b; + text-decoration: none; + display: flex; + justify-content: flex-start; + line-height: 23px; + margin-bottom: 17px; +} + +#main-news, +#main-shopping { + height: 426px; + display: flex; + flex-flow: column; + margin-bottom: 16px; +} + +#main-news a:visited, +#main-shopping a:visited { + color: inherit; +} + +#main-news-stand { + display: flex; + justify-content: space-between; + align-items: center; + height: 50px; + padding: 12px 20px; + background-color: hsl(0, 0%, 95%); + border-radius: 4px; + margin-bottom: 16px; +} + +#main-shopping-stand { + display: flex; + justify-content: flex-start; + align-items: center; + height: 50px; + width: 668px; + padding: 12px 20px; + background-color: hsl(0, 0%, 95%); + border-radius: 4px; + margin-bottom: 16px; +} + +#main-news-stand > span, +#main-shopping-stand > span { + display: flex; + align-items: center; +} + +#main-news-stand > span > a, +#main-shopping-stand > span > a { + display: inline-block; + margin-right: 8px; +} + +#main-news-right, +#main-news-right a, +#main-shopping-right, +#main-shopping-right a { + margin-left: 5px; +} + +#main-news header a, +#main-shopping header a { + color: black; + text-decoration: none; +} + +#main-news a, +#main-shopping a { + text-decoration: none; +} +#main-news a:hover, +#main-shopping a:hover { + text-decoration: underline; +} + +#main-news-stand a, +#main-shopping-stand a { + color: black; + text-decoration: none; +} + +#main-news-stand a:hover, +#main-shopping-stand a:hover { + text-decoration: underline; +} + +#main-news-grid { + display: grid; + justify-content: center; + align-items: center; + height: 224px; + width: 790px; + grid-gap: 1px; + background-color: #e4e4e4; + grid-template-rows: repeat(4, 1fr); + grid-template-columns: repeat(6, 1fr); + border: 1px solid #e4e4e4; + border-radius: 4px; + margin-top: 10px; +} + +#main-news-image { + height: 20px; +} + +#main-news-grid > div { + background-color: white; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +#main-login { + height: 164px; + margin-bottom: 16px; + padding: 21px 20px 18px; + font-size: 1.4rem; + display: flex; + flex-flow: column; + line-height: 18px; +} + +#main-login > div :first-of-type { + line-height: 18px; +} + +#main-login-button { + margin-top: 13px; + padding: 17px 0; + background-color: #03c750; + color: white; + height: 56px; + border: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 4px; + text-decoration: none; + margin-bottom: 16px; +} + +#main-login-button img { + background-image: url(../assets/sp_main.png); + background-size: 424px 409px; + background-position: -120px -166px; + background-repeat: no-repeat; + width: 72px; + height: 16px; + display: inline-block; + margin: 3px 8px 0 0; + vertical-align: -1px; +} + +#main-login > div:last-of-type { + font-size: 1.3rem; +} + +#main-login > div:last-of-type a { + text-decoration: none; + color: #3d3d3d; + letter-spacing: -0.4px; +} + +#main-login > div:last-of-type a:hover { + text-decoration: underline; +} + +#main-login > div:last-of-type a:visited { + color: inherit; +} + +#main-login > div:last-of-type > a:nth-of-type(2)::before, +#main-login > div:last-of-type > a:nth-of-type(2)::after { + content: ""; + display: inline-block; + width: 1px; + height: 12px; + background-color: hsl(210, 5%, 84%); + margin: 4px 12px 0; +} + +#main-shopping { + height: 560px; + margin-bottom: 16px; + padding-right: 16px; + margin-left: 5px; +} + +#main-shopping-stand span span { + color: #9858f5; +} + +#main-shopping-grid { + margin: 0; + display: grid; + justify-content: center; + align-items: center; + height: 394px; + width: 560px; + border: none; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(4, 1fr); + border-radius: 4px; +} + +#main-shop-left { + width: 230px; + margin-top: 16px; +} + +#shop-first-box { + display: block; + box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, 0.04); + background-color: hwb(0 99% 0%); + border-radius: 4px; + width: 250px; + height: 90px; + font-size: 1.4rem; + line-height: 1.7rem; + margin-right: 11px; + padding-top: 20px; + padding-left: 20 5 5px; + padding-right: 5px; +} + +#shop-second-box { + display: flex; + justify-content: space-around; + box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, 0.04); + background-color: hwb(0 99% 0%); + border-radius: 4px; + width: 250px; + height: 80px; + font-size: 1.4rem; + line-height: 1.7rem; + margin-top: 16px; + padding: 20px 5px 0; + margin: 16px 11px 0 0; +} + +#shop-third-box { + display: flex; + margin-top: 16px; + height: 115px; + font-size: 1.4rem; + line-height: 1.7rem; + margin-right: 11px; +} + +#shop-third-left { + font-size: 1.4rem; + line-height: 1.7rem; + width: 180px; + box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, 0.04); + border-radius: 4px; +} + +#shop-third-right { + margin-top: 16px; + font-size: 1.4rem; + line-height: 1.7rem; + width: 100px; +} + +#shop-last-text { + font-size: 1.4rem; + line-height: 1.7rem; +} + +#main-shopping-sm-image { + height: 13px; +} + +#main-shopping-image { + height: 115px; + width: 115px; + border-radius: 4px; + margin-bottom: 10px; +} + +#main-shop-box { + display: flex; +} + +#main-stock > div { + border-top: 1px solid grey; +} + +#main-news-last { + flex: 0; + border-top: 1px solid #e4e4e4; + padding: 10px 0 11px; + text-align: center; +} + +#main-news-grey { + color: grey; +} + +#main-news-page { + color: grey; + font-size: 1.2rem; +} + +#main-before { + width: 33px; + height: 33px; +} +#main-news-last strong span { + color: hsl(235, 89%, 62%); +} + +#main-shopping-last { + flex: 0; + border-top: 1px solid #e4e4e4; + text-align: center; +} + +#main-shopping-last strong span { + color: #9858f5; +} + +#main-shopping-text { + width: 110px; + overflow: hidden; +} + +#shop-second-box div { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; +} + +#shop-second-box div:nth-of-type(1) div { + content: ""; + background-image: url(../assets/sp_main2.png); + background-size: 122px 106px; + background-repeat: no-repeat; + background-position: -34px 0; + width: 32px; + height: 32px; + margin-bottom: 10px; +} + +/* #shop-second-box div:nth-of-type(2) div { + content: ""; + background-image: url(../assets/sp_main2.png); + background-size: 122px 106px; + background-repeat: no-repeat; + background-position: -34px 0; + width: 32px; + height: 32px; + margin-bottom: 10px; +} */ + +#shop-second-box div:nth-of-type(3) div { + content: ""; + background-image: url(../assets/sp_main2.png); + background-size: 122px 106px; + background-repeat: no-repeat; + background-position: -34px -34px; + width: 32px; + height: 32px; + margin-bottom: 10px; +} + +#shop-second-box div:nth-of-type(4) div { + content: ""; + background-image: url(../assets/sp_main2.png); + background-size: 122px 106px; + background-repeat: no-repeat; + background-position: -60px -68px; + width: 17px; + height: 16px; + margin-bottom: 10px; +} diff --git a/styles/nav.css b/styles/nav.css new file mode 100644 index 00000000..06592234 --- /dev/null +++ b/styles/nav.css @@ -0,0 +1,118 @@ +#nav > ul { + display: flex; + list-style-type: none; + justify-content: center; + font-size: 1.4rem; + line-height: 20px; + margin: 0; + margin-top: 10px; +} + +#nav a:visited { + color: black; +} + +#nav li { + display: flex; + justify-content: center; + width: 64px; + margin-left: 14px; + margin-right: 0; + margin-top: 2px; +} + +#nav li:nth-of-type(1) { + margin-left: 0; +} + +#nav a { + text-decoration: none; + text-align: center; + display: inline-block; +} + +#nav li { + content: ""; + display: flex; + justify-content: center; + background-image: url(../assets/sp_main.png); + background-size: 422px 405px; + background-repeat: no-repeat; + background-position: 0px -128px; + width: 54px; + height: 54px; +} + +#nav li:hover { + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12); + border-radius: 10px; +} + +#nav a div { + content: ""; + display: inline-block; + background-image: url(../assets/sp_main.png); + background-size: 422px 405px; + background-position: -250px -90px; + background-repeat: no-repeat; + width: 44px; + height: 44px; + margin: 0 3; + margin-bottom: 10px; +} + +#nav li:nth-of-type(1) ::after { + margin-left: 0; + padding-left: 0; + margin-bottom: 10px; +} + +#nav li:nth-of-type(2) a div { + background-position: -250px 0px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(3) a div { + background-position: -201px -98px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(4) a div { + background-position: -90px -209px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(5) a div { + background-position: 0px -209px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(6) a div { + background-position: -180px -209px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(7) a div { + background-position: -45px -209px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(8) a div { + background-position: -201px 0px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(9) a div { + background-position: -225px -209px; + margin-bottom: 10px; +} + +#nav li:nth-of-type(10) a div { + background-position: -250px -135px; + margin-bottom: 10px; +} + +#nav a span { + margin-top: 10px; + /* 적용 안되는 이유 찾기 */ +}