KDT1-FE · jinyoungpark231 · Apr 4, 2023 · Apr 4, 2023 · Apr 4, 2023 · Apr 4, 2023
diff --git a/README.md b/README.md
@@ -1,45 +1,10 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# 클론코딩 과제
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+- [원본사이트](https://web.dominos.co.kr/gate)
+- [과제 결과물](https://dominoevent-clone.netlify.app/)
+___
+## 설명
+도미노피자 광고페이지 이미지에서<br> 메인 , 이벤트 , 프로모션페이지를 연동해
+클릭시 클릭한 해당페이지로 갈 수 있게 했습니다.
 
-## 과제 수행 및 제출 방법
-
-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/css/main.css b/css/main.css
@@ -0,0 +1,22 @@
+body{
+    height: 100vh;
+    background-color: #c1bcff;
+    overflow: hidden;
+}
+
+/* main */
+.main{
+    /* 조원분들에게 피드백 받은 부분 */
+    display: flex;
+    justify-content: center;
+}
+
+/* main 수정전
+.main__event{
+    position: absolute;
+    left: 50%;
+    width: 2000px;
+    margin-left: -1000px;
+    text-align: center;
+}
+*/
diff --git a/favicon.ico b/favicon.ico
diff --git a/images/img_gate_230404.jpg b/images/img_gate_230404.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!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="./favicon.ico"/>
+    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"/>
+    <link rel="stylesheet" href="./css/main.css"/>
+</head>
+<body>
+<div class="main">
+  <div class="main__event"> 
+    <img src="./images/img_gate_230404.jpg" alt="이벤트 이미지" usemap="#location"/>
+    <map id="location" name="location">
+      <area shape="rect" coords="316,30,496,96"   href="https://web.dominos.co.kr/main" alt="홈페이지 바로가기" />
+      <area shape="rect" coords="848,616,1076,674" href="https://web.dominos.co.kr/event/viewHtml?seq=1622&gubun=E020" alt="이벤트 바로가기" />
+      <area shape="rect" coords="0,722,1920,850"   href="https://web.dominos.co.kr/event/viewHtml?seq=2055&gubun=E0200" alt="히어로즈데이" />
+   </map>
+  </div>
+</div>
+</body>
+</html>