KDT1-FE · minseokiim · Jul 26, 2023 · Jul 27, 2023 · Jul 27, 2023 · Jul 28, 2023
diff --git a/README.md b/README.md
@@ -1,45 +1,27 @@
-[참고 내용]
+# 네이버 메인 페이지 클론코딩
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+## 실제 사이트
 
-과제 수행 및 제출 방법
+https://www.naver.com/<br/>
 
-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/<br/>
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+## 구현한 내용
 
-필수 요구사항
+<img width="1260" alt="image" src="https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/55376275/314d58c0-d276-4de3-aa53-914f8555b97a"><br/>
+<img width="1252" alt="image" src="https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/55376275/4c116c11-8d07-4cee-bc5a-14fb898e3e00">
+<br/>
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+- html과 css를 이용한 네이버 메인페이지 클론 코딩
+- 시맨틱 태그 활용
+- grid와 flex 활용
+- netlify를 이용한 배포
 
-선택 요구사항
+<br/>
 
-- < 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
diff --git a/assets/before.png b/assets/before.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/assets/footer/1.png b/assets/footer/1.png
diff --git a/assets/footer/2.png b/assets/footer/2.png
diff --git a/assets/footer/3.png b/assets/footer/3.png
diff --git a/assets/left-ad.jpg b/assets/left-ad.jpg
diff --git a/assets/news/1.png b/assets/news/1.png
diff --git a/assets/news/10.png b/assets/news/10.png
diff --git a/assets/news/11.png b/assets/news/11.png
diff --git a/assets/news/12.png b/assets/news/12.png
diff --git a/assets/news/13.png b/assets/news/13.png
diff --git a/assets/news/14.png b/assets/news/14.png
diff --git a/assets/news/15.png b/assets/news/15.png
diff --git a/assets/news/16.png b/assets/news/16.png
diff --git a/assets/news/17.png b/assets/news/17.png
diff --git a/assets/news/18.png b/assets/news/18.png
diff --git a/assets/news/19.png b/assets/news/19.png
diff --git a/assets/news/2.png b/assets/news/2.png
diff --git a/assets/news/20.png b/assets/news/20.png
diff --git a/assets/news/21.png b/assets/news/21.png
diff --git a/assets/news/22.png b/assets/news/22.png
diff --git a/assets/news/23.png b/assets/news/23.png
diff --git a/assets/news/24.png b/assets/news/24.png
diff --git a/assets/news/3.png b/assets/news/3.png
diff --git a/assets/news/4.png b/assets/news/4.png
diff --git a/assets/news/5.png b/assets/news/5.png
diff --git a/assets/news/6.png b/assets/news/6.png
diff --git a/assets/news/7.png b/assets/news/7.png
diff --git a/assets/news/8.png b/assets/news/8.png
diff --git a/assets/news/9.png b/assets/news/9.png
diff --git a/assets/right-ad.png b/assets/right-ad.png
diff --git a/assets/shopping/1.jpg b/assets/shopping/1.jpg
diff --git a/assets/shopping/2.jpg b/assets/shopping/2.jpg
diff --git a/assets/shopping/3.jpg b/assets/shopping/3.jpg
diff --git a/assets/shopping/4.jpg b/assets/shopping/4.jpg
diff --git a/assets/shopping/5.jpg b/assets/shopping/5.jpg
diff --git a/assets/shopping/6.jpg b/assets/shopping/6.jpg
diff --git a/assets/shopping/7.jpg b/assets/shopping/7.jpg
diff --git a/assets/shopping/8.jpg b/assets/shopping/8.jpg
diff --git a/assets/shopping/ad1.jpg b/assets/shopping/ad1.jpg
diff --git a/assets/shopping/ad2.png b/assets/shopping/ad2.png
diff --git a/assets/sp_main.png b/assets/sp_main.png
diff --git a/assets/sp_main2.png b/assets/sp_main2.png
diff --git a/assets/stock.png b/assets/stock.png
diff --git a/assets/we.png b/assets/we.png
diff --git a/assets/weather.png b/assets/weather.png
diff --git a/index.html b/index.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/x-icon" href="./assets/favicon.ico" />
+    <title>NAVER</title>
+    <link rel="stylesheet" href="styles/header.css" />
+    <link rel="stylesheet" href="styles/nav.css" />
+    <link rel="stylesheet" href="styles/main.css" />
+    <link rel="stylesheet" href="styles/footer.css" />
+  </head>
+  <body>
+    <div id="wrap">
+      <div id="wrap-center">
+
+        <div id="header">
+          <button id="header-hamburger"> <div></div></button>
+          <button id="header-naverpay"> <div></div></button>
+          <button id="header-notice"> <div></div> </button>
+        </div>
+
+        <div id="search">
+          <form action="">
+            <a id="search-svg" href="#">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg" >
+                <path
+                  d="M16.273 12.845 7.376 0H0v24h7.727V11.155L16.624 24H24V0h-7.727v12.845z"/></svg></a>
+            <input
+              id="search-input"
+              type="text"
+              placeholder="검색어를 입력해 주세요." />
+            <div id="search-right">
+              <button href="#" id="search-keyboard"></button>
+              <button href="#" id="search-recent"> </button>
+              <button id="search-button"> </button>
+            </div>
+          </form>
+        </div>
+
+        <nav id="nav">
+          <ul>
+            <li> <a href=""> <div></div> <span>메일</span> </a></li>
+            <li><a href=""><div></div><span>카페</span></a> </li>
+            <li> <a href=""><div></div><span>블로그</span> </a></li>
+            <li><a href=""><div></div><span>쇼핑</span></a> </li>
+            <li><a href=""><div></div><span>뉴스</span> </a></li>
+            <li> <a href=""><div></div><span>증권</span></a> </li>
+            <li> <a href=""><div></div> <span>부동산</span> </li>
+            <li><a href=""> <div></div><span>지도</span> </a> </li>
+            <li><a href=""> <div></div><span>웹툰</span> </a> </li>
+            <li> <a href="">  <div></div> </a>  </li>
+          </ul>
+        </nav>
+
+        <main id="main">
+          <div id="main-left">
+            <img id="main-left-ad" src="./assets/left-ad.jpg"></img>
+
+            <section id="main-news">
+              <div id="main-news-top">
+                <header>
+                  <a href="" ><strong>뉴스스탠드&nbsp; </strong></a>
+                  <a href="" > <strong>•  언론사편집 /</strong></a>
+                  <a href="" ><strong>&nbsp; 엔터 /</strong></a>
+                  <a href="" ><strong>&nbsp; 스포츠 /</strong></a>
+                  <a href="" ><strong>&nbsp; 경제</strong></a>
+                </header>
+
+              <div id="main-news-stand">
+                <span>
+                <a href="">전체언론사 ▼</a>
+                <a href=""> | 연합뉴스</a>
+                <a href=""> "'위험' 청주시 신고만 10번"…"수많은 기회 살린 기관 없었다"</a></span>
+
+                  <span id="main-news-right">
+                    <a href="">뉴스스탠드</a>
+                    <a href="">| <strong>뉴스홈</strong></a>
+                  </span>
+             </div>
+
+              <div id=main-news-grid>
+                <div><img src="./assets/news/1.png" id="main-news-image"></div>
+                <div><img src="./assets/news/2.png" id="main-news-image"></div>
+                <div><img src="./assets/news/3.png" id="main-news-image"></div>
+                <div><img src="./assets/news/4.png" id="main-news-image"></div>
+                <div><img src="./assets/news/5.png" id="main-news-image"></div>
+                <div><img src="./assets/news/6.png" id="main-news-image"></div>
+                <div><img src="./assets/news/7.png" id="main-news-image"></div>
+                <div><img src="./assets/news/8.png" id="main-news-image"></div>
+                <div><img src="./assets/news/9.png" id="main-news-image"></div>
+                <div><img src="./assets/news/10.png" id="main-news-image"></div>
+                <div><img src="./assets/news/11.png" id="main-news-image"></div>
+                <div><img src="./assets/news/12.png" id="main-news-image"></div>
+                <div><img src="./assets/news/13.png" id="main-news-image"></div>
+                <div><img src="./assets/news/14.png" id="main-news-image"></div>
+                <div><img src="./assets/news/15.png" id="main-news-image"></div>
+                <div><img src="./assets/news/16.png" id="main-news-image"></div>
+                <div><img src="./assets/news/17.png" id="main-news-image"></div>
+                <div><img src="./assets/news/18.png" id="main-news-image"></div>
+                <div><img src="./assets/news/1.png" id="main-news-image"></div>
+                <div><img src="./assets/news/20.png" id="main-news-image"></div>
+                <div><img src="./assets/news/21.png" id="main-news-image"></div>
+                <div><img src="./assets/news/22.png" id="main-news-image"></div>
+                <div><img src="./assets/news/23.png" id="main-news-image"></div>
+                <div><img src="./assets/news/24.png" id="main-news-image"></div>
+              </div>
+
+            </div>
+
+              <div id="main-news-last">
+                <img id="main-before" src="./assets/before.png"></img>
+               <strong id="main-news-page"><span>언론사</span> 더보기 1/4</strong>
+                <img id="main-before" src="./assets/after.png"></button>
+              </div>
+            </section>
+
+            <section id="main-shopping">
+               <div id="main-shopping-top">
+                  <header>
+                    <a href="" > <strong>쇼핑 /</strong></strong></a>
+                    <a href="" ><strong>&nbsp; 맨즈 /</strong></a>
+                    <a href="" ><strong>&nbsp; 원쁠딜 /</strong></a>
+                    <a href="" ><strong>&nbsp; 쇼핑라이브</strong></a>
+                  </header>
+
+                 <div id="main-shopping-stand">
+                  <span>
+                  <a href=""> <strong>오늘의 혜택</strong></a>
+                  <a href=""> <img src="./assets/we.png"  id="main-shopping-sm-image"></a>
+                  <a href=""> 매일 00시, 슈퍼투데이특가 놓치면 후회할 <span>역대급할인!</span></a>
+                  </span>
+                  </div>
+
+                  <div id="main-shop-box">
+                    <div id="main-shopping-grid">
+                      <div><img src="./assets/shopping/1.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">만원대~여름코디<br/><br/>심플하고착한가격</div></div>
+                      <div><img src="./assets/shopping/2.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">상반기 결산SALE<br/><br/>BEST 최대71%↓</div></div>
+                      <div><img src="./assets/shopping/3.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">단정한핏~인기!<br/><br/>최대80%SALE시작</div></div>
+                      <div><img src="./assets/shopping/4.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">TIME SALE<br/><br/>바스락~ 롱원피스</div></div>
+                      <div><img src="./assets/shopping/5.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">아침에 광이나요<br/><br/>
+                        붙이고 자버려요</div></div>
+                      <div><img src="./assets/shopping/6.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">1일1포 챙겨먹어<br/><br/> 1+1일때 쟁여</div></div>
+                      <div><img src="./assets/shopping/7.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">우유베개 1&1<br/><br/> 1만원 쿠폰!</div></div>
+                      <div><img src="./assets/shopping/8.jpg" id="main-shopping-image">
+                        <div class="main-shopping-text">역대급 50%특가<br/><br/> 인형키링 곰빵이!</div></div>
+                    </div>
+
+                  <div id=main-shop-left> 
+                      <div id="shop-first-box">
+                        <a href=""><strong>쿠팡</strong></a>
+                        <a href="">G마켓</a>
+                        <a href="">옥션</a>
+                        <a href="">11번가</a><br/>
+                        <a href=""><strong>SSG닷컴</strong></a>
+                        <a href="">올리브영</a>
+                        <a href="">위메프</a>
+                        <a href="">GS샵</a><br/>
+                        <a href="">CJ온스타일</a>
+                        <a href="">패션플러스</a>
+                        <a href=""><strong>CJ더마켓</strong></a>
+                      </div>
+                      <div id="shop-second-box">
+                        <div><div></div><a href="https://shopping.naver.com/home">N쇼핑홈</a></div>
+                        <div><div>MY</div><a href="https://nid.naver.com/nidlogin.login?mode=form&url=http%3A%2F%2Fshopping.naver.com%3A80%2Fmy%2Fhome"><br/>MY홈</a></div>
+                        <div><div></div><a href="https://nid.naver.com/nidlogin.login?url=http%3A%2F%2Fnew-m.pay.naver.com%2Fpcpay%3FserviceGroup%3DSHOPPING%26page%3D1">주문배송</a></div>
+                        <div><div></div><a href="https://nid.naver.com/nidlogin.login?svctype=1&url=https%3A%2F%2Fshopping.naver.com%2Fcart"><br/>N장바구니</a></div>
+                      </div>
+
+                      <div id="shop-third-box">
+                        <img id="shop-third-left" src="./assets/shopping/ad1.jpg"></img>
+                        <img id="shop-third-right" src="./assets/shopping/ad2.png"></img>
+                      </div>
+                      <div id="shop-last-text">#몽제 #1,250억돌파 #7월한정특가
+                        바닥에서도 허리 완전 편해~</div>
+                  </div>
+                </div>
+                  <div id="main-shopping-last">
+                    <img id="main-before" src="./assets/before.png"></img>
+                   <strong id="main-news-page"><span>쇼핑아이템</span> 더보기 1/18</strong>
+                    <img id="main-before" src="./assets/after.png"></button>
+                  </div>
+            </section>
+          </div>
+
+          <div id="main-right">
+            <section id="main-login">
+              <div>네이버를 더 안전하고 편리하게 이용하세요.</div>
+              <a href="https://nid.naver.com/nidlogin.login?mode=form&url=https://www.naver.com/" id="main-login-button"><img/>로그인</a>
+            <div><a href="https://nid.naver.com/user2/help/idInquiry?lang=ko_KR" >아이디 찾기</a>
+              <a href="https://nid.naver.com/user2/help/pwInquiry?lang=ko_KR">비밀번호 찾기</a>
+              <a href="https://nid.naver.com/user2/join/agree?lang=ko_KR&domain=null">회원가입</a></div>
+            </section>
+
+            <img id="main-right-ad" src="./assets/right-ad.png" />
+            <img id="main-weather" src="./assets/weather.png"/>
+            <img id="main-stock" src="./assets/stock.png"/>
+          </div>
+        </main>
+
+        <footer id="footer-main" > 
+          <div id="footer-ad">
+
+          <div><img id='footer-ad-image' src="./assets/footer/1.png"></div>
+          <div id="footer-big-box">
+            <div id="footer-box"><strong>네이버 커넥트 재단</strong></div>
+            <strong id="footer-text">유치원 여름방학, 뭐하세요?</strong>
+            <div id=footer-intro>무료교육앱 쥬니버스쿨과 놀면서 수학, 코딩 공부해요!</div>
+            </div>
+
+        <div><img id='footer-ad-image' src="./assets/footer/2.png"></div>
+        <div id="footer-big-box">
+          <div id="footer-box"><strong>쥬니버</strong></div>
+        <strong id="footer-text">차징탑스피너 채널 오픈 이벤트</strong>
+        <div id=footer-intro>피젯스피너와 팽이가 하나로!<br/>최애 영상 댓글 달면 선물로!</div>
+        </div>
+
+      <div><img id='footer-ad-image' src="./assets/footer/3.png"></div>
+        <div id="footer-big-box">
+          <div id="footer-box"><strong>네이버 개인정보 보호</strong></div>
+        <strong id="footer-text">정보보호의 달 릴레이 특강</strong>
+        <div id=footer-intro>7월 매주 수요일 11시<br/> 프라이버시TV에서 만나요!</div>
+        </div>
+      </div>
+
+          <div id="footer-list">
+            <ul>
+              <li><a href="https://www.navercorp.com/">회사소개&nbsp;&nbsp;</a></li>
+              <li><a href="https://recruit.navercorp.com/">인재채용&nbsp;&nbsp;</a></li>
+              <li><a href="https://www.navercorp.com/naver/proposalGuide">제휴제안&nbsp;&nbsp;</a></li>
+              <li><a href="https://policy.naver.com/policy/service.html">이용약관&nbsp;&nbsp;</a></li>
+              <li><a href="https://policy.naver.com/policy/privacy.html"><strong>개인정보처리방침&nbsp;&nbsp;</strong></a></li>
+              <li><a href="https://policy.naver.com/policy/youthpolicy.html">청소년보호정책&nbsp;&nbsp;</a></li>
+              <li><a href="https://policy.naver.com/policy/service_group.html">네이버 정책&nbsp;&nbsp;</a></li>
+              <li><div>고객센터&nbsp;&nbsp;</div></li>
+              <li><strong>ⓒ NAVER Corp.</strong></li>
+            </ul>
+            </div></footer>
+      </div></div>
+
+    </div>
+  </body>
+</html>