KDT1-FE · suyeon9937 · Apr 9, 2023 · Apr 9, 2023 · iamidlek · Apr 9, 2023
diff --git a/README.md b/README.md
@@ -1,45 +1,6 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+원본 사이트 링크
+http://www.xn--hc0bmwo9hutj81ocyj.com/
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+클론 배포 사이트 링크
+https://suyeon9937.github.io/gwangcheon/
 
-## 과제 수행 및 제출 방법
-
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
-
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-## 필수 요구사항
-
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
-
-## 선택 요구사항
-
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
-
-## 손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
-
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
diff --git a/images/843d8e8dfddb3686594f6bac0f0df6dd.jpg b/images/843d8e8dfddb3686594f6bac0f0df6dd.jpg
diff --git a/images/870c1d56dd9f4ecf21325ab159de99f3.jpg b/images/870c1d56dd9f4ecf21325ab159de99f3.jpg
diff --git a/images/b43ceccb892bb3bf8a1afacd69e1c19b.jpg b/images/b43ceccb892bb3bf8a1afacd69e1c19b.jpg
diff --git a/images/c2bd3beaaa12f25de53c3d1c0f7b2e41.jpg b/images/c2bd3beaaa12f25de53c3d1c0f7b2e41.jpg
diff --git a/images/de69bf3a114c84350c5bac2b6dc044a1.jpg b/images/de69bf3a114c84350c5bac2b6dc044a1.jpg
diff --git a/images/f5fff88d2da786a7dc1319063c382802.jpg b/images/f5fff88d2da786a7dc1319063c382802.jpg
diff --git a/images/fc5638ec80d3168ef83faebd645f3876.jpg b/images/fc5638ec80d3168ef83faebd645f3876.jpg
diff --git a/images/header_top상단배너.gif b/images/header_top상단배너.gif
diff --git a/images/logo_top.gif b/images/logo_top.gif
diff --git a/images/main_prod01.gif b/images/main_prod01.gif
diff --git a/images/main_prod02.gif b/images/main_prod02.gif
diff --git a/images/main_prod03.gif b/images/main_prod03.gif
diff --git a/images/main_prod04.gif b/images/main_prod04.gif
diff --git a/images/main_prod05.gif b/images/main_prod05.gif
diff --git a/images/main_title01.gif b/images/main_title01.gif
diff --git a/images/tops_m01.gif b/images/tops_m01.gif
diff --git a/images/tops_m02.gif b/images/tops_m02.gif
diff --git a/images/tops_m03.gif b/images/tops_m03.gif
diff --git a/images/tops_m04.gif b/images/tops_m04.gif
diff --git a/images/tops_m05.gif b/images/tops_m05.gif
diff --git a/images/메인.jpeg b/images/메인.jpeg
diff --git a/images/스크린샷 2023-04-07 오후 1.10.04.png b/images/스크린샷 2023-04-07 오후 1.10.04.png
diff --git a/index.html b/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>광천어머니김~~</title>
+  <link rel="stylesheet" href="./main.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
+</head>
+
+<body>
+  <div id="header">
+   <div class="top">
+    <img src="http://www.xn--hc0bmwo9hutj81ocyj.com/web/upload/category/editor/2020/06/14/a6be479e1ea87dd5340909b9db40739e.gif" alt="">
+   </div>
+   <div class="middle">
+    <img src="http://www.xn--hc0bmwo9hutj81ocyj.com/web/img2/logo_top.gif" alt="">
+    <input type="text">
+    <div class="middle_box">
+      <ul>
+        <li class="line">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/member/login.html">로그인</a>
+        </li>
+        <li class="line">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/member/join.html">회원가입</a>
+        </li>
+        <li class="line">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/order/basket.html">장바구니</a>
+        </li>
+        <li class="line">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/member/login.html?noMemberOrder&returnUrl=%2Fmyshop%2Forder%2Flist.html">주문조회</a>
+        </li>
+        <li class="line">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/myshop/index.html">마이쇼핑</a>
+        </li>
+        <li class="line">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/board/free/list.html?board_no=5">고객센터</a>
+        </li>
+       </ul>
+       <ul>
+        <li class="tm">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/shopinfo/company.html"></a>
+          <img src="http://www.광천어머니김.com/web/img2/tops_m01.GIF" alt="">
+        </li>
+        <li class="tm">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/board/free/list.html?board_no=1"></a>
+          <img src="http://www.광천어머니김.com/web/img2/tops_m02.GIF" alt="">
+        </li>
+        <li class="tm">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/shopinfo/guide.html"></a>
+          <img src="http://www.광천어머니김.com/web/img2/tops_m03.GIF" alt="">
+        </li>
+        <li class="tm">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/board/free/list.html?board_no=2"></a>
+          <img src="http://www.광천어머니김.com/web/img2/tops_m04.GIF" alt="">
+        </li>
+        <li class="tm">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/board/free/list.html?board_no=1002"></a>
+          <img src="http://www.광천어머니김.com/web/img2/tops_m05.GIF" alt="">
+        </li>
+      </ul>
+      <ul class="menu">
+        <li>
+          <a href="">광천어머니김x김잡았어</a>
+        </li>
+        <li>
+          <a href="">전장김</a>
+        </li>
+        <li>
+          <a href="">식탁김</a>
+        </li>
+        <li>
+          <a href="">도시락김</a>
+        </li>
+        <li>
+          <a href="">돌자반/김가루</a>
+        </li>
+        <li>
+          <a href="">선물셋트</a>
+        </li>
+      </ul>
+
+    </div>
+    <!-- <div class="menu"></div> -->
+    <div class="bottom">
+      <div id="slid_image">
+        <p class="image" style="left: 0px;">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/">
+            <img src="http://www.광천어머니김.com/web/upload/category/editor/2020/06/14/59e91618de65c1cb8a73fc83b02120ca.jpg" alt="">
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div id="main">
+    <div id="wrap1">
+      <div id="container">
+        <div class="banner_warp">
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/product/list.html?cate_no=67">
+            <img src="http://www.광천어머니김.com/web/img2/main_prod01.gif" alt="">
+          </a>
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/product/list.html?cate_no=69">
+            <img src="http://www.광천어머니김.com/web/img2/main_prod02.gif" alt="">
+          </a>
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/product/list.html?cate_no=64">
+            <img src="http://www.광천어머니김.com/web/img2/main_prod03.gif" alt="">
+          </a>
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/product/list.html?cate_no=63">
+            <img src="http://www.광천어머니김.com/web/img2/main_prod04.gif" alt="">
+          </a>
+          <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/product/list.html?cate_no=65">
+            <img src="http://www.광천어머니김.com/web/img2/main_prod05.gif" alt="">
+          </a>
+        </div>
+        <div id="contents">
+          <div class="product">
+            <h1>
+              <img src="http://www.광천어머니김.com/web/img2/main_title01.gif" alt="베스트상품">
+            </h1>
+            <div class="prdlist">
+              <ul>
+                <li class="pr">
+                  <a href="http://www.xn--hc0bmwo9hutj81ocyj.com/product/detail.html?product_no=56&cate_no=1&display_group=2">
+                    <img src="http://www.광천어머니김.com/web/product/medium/202203/fc5638ec80d3168ef83faebd645f3876.jpg" alt="">
+                  </a>
+                </li>
+                <li class="pr">
+                  <a href="">
+                    <img src="http://www.광천어머니김.com/web/product/medium/201909/f5fff88d2da786a7dc1319063c382802.jpg" alt="">
+                  </a>
+                </li>
+                <li class="pr">
+                  <a href="">
+                    <img src="http://www.광천어머니김.com/web/product/medium/201909/de69bf3a114c84350c5bac2b6dc044a1.jpg" alt="">
+                  </a>
+                </li>
+                <li class="pr">
+                  <a href="">
+                    <img src="http://www.광천어머니김.com/web/product/medium/201909/843d8e8dfddb3686594f6bac0f0df6dd.jpg" alt="">
+                  </a>
+                </li>
+                <li class="pr">
+                  <a href="">
+                    <img src="http://www.광천어머니김.com/web/product/medium/201909/c2bd3beaaa12f25de53c3d1c0f7b2e41.jpg" alt="">
+                  </a>
+                </li>
+                <li class="pr">
+                  <a href="">
+                    <img src="http://www.광천어머니김.com/web/product/medium/202203/b43ceccb892bb3bf8a1afacd69e1c19b.jpg" alt="">
+                  </a>
+                </li>
+                <li class="pr">
+                  <a href="">
+                    <img src="http://www.광천어머니김.com/web/product/medium/202203/870c1d56dd9f4ecf21325ab159de99f3.jpg" alt="">
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="footer"></div>
+</body>
+
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,131 @@
+
+/* header */
+#header div.top {
+  width: 100%;
+  height: 81px;
+  font-size: 11px;
+  background-color: #A9BB00;
+  text-align: center;
+}
+#header div.middle {
+  display: block;
+  position: relative;
+  width: 1024px;
+  margin: 0 auto;
+  padding: 0;
+}
+#header div.middle img {
+  display: block;
+  float: left;
+  border: none;
+  vertical-align: top;
+}
+#header div.middle input {
+  display: block;
+  float: left;
+  width: 230px;
+  height: 24px;
+  padding: 2px;
+  border: 2px solid #9AC91C;
+  outline: none;
+  margin-top: 30px;
+}
+#header div.middle_box {
+  float: left;
+  overflow: hidden;
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  width: 450px;
+  padding: 10px 0 7px;
+}
+#header div.middle_box ul.line {
+ display: flex;
+}
+#header div.middle_box ul.line li {
+ position: relative;
+}
+#header div.middle_box ul.line li::before {
+ content: "";
+}
+#header div.middle_box .tm {
+  float: left;
+  display: block;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+#header div.middle_box a {
+  float: left;
+  color: #8f8f91;
+  font-size: 12px;
+  font-family: 'Nanum Gothic',sans-serif;
+  text-decoration: none;
+  display: flex;
+  padding: 0px 8px 0 9px;
+}
+#header div.bottom {
+  height: 470px;
+  margin-bottom: 60px;
+  background-color: #fff;
+}
+/* main */
+#container {
+  width: 1024px;
+  margin: 0 auto;
+}
+#container .banner_warp {
+  background-color: #f6f6f6;
+  position: relative;
+  border: none;
+  vertical-align: top;
+}
+#container .banner {
+  overflow: hidden;
+  position: absolute;
+  width: 1024px;
+  height: 229px;
+}
+#container .banner a {
+  float: left;
+  margin: 0 18px 0 18px;
+}
+#header .middle_box ul.menu {
+  width: 1180px;
+  height: 40px;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+  background-color: #EC2A2E;;
+  flex-wrap: wrap;
+  position: relative;
+  display: flex;
+}
+#header .middle .middle_box ul.menu li {
+  float: left;
+  text-decoration: none;
+}
+#header .middle .middle_box ul.menu a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: #FFFFFF;
+  font-weight: bold;
+  line-height: 2.7em;
+}
+#contents .product {
+  margin: 30px 0;
+  margin-bottom: 100px;
+}
+#contents .product .prdlist li.pr {
+  display: block;
+  float: left;
+}
+#contents .product .prdlist li.pr img {
+  width: 238px;
+  height: 238px;
+  border: 1px solid #ececec;
+
+}