insertcourse24 · winshine0326 · Jul 5, 2024 · Jul 5, 2024 · Jul 5, 2024 · Jul 7, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md → MD/README.md b/README.md → MD/README.md
diff --git a/reference.md → MD/reference.md b/reference.md → MD/reference.md
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/AppStore.png b/assets/AppStore.png
diff --git a/assets/GooglePlay.png b/assets/GooglePlay.png
diff --git a/assets/circle.png b/assets/circle.png
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/lost.png b/assets/lost.png
diff --git a/assets/mascort.png b/assets/mascort.png
diff --git a/assets/question.png b/assets/question.png
diff --git a/assets/section1.png b/assets/section1.png
diff --git a/assets/section2.png b/assets/section2.png
diff --git a/assets/section3.png b/assets/section3.png
diff --git a/assets/section4.png b/assets/section4.png
diff --git a/assets/trade.png b/assets/trade.png
diff --git a/data.json → mission/data.json b/data.json → mission/data.json
@@ -2,49 +2,49 @@
   "data": [
     {
       "id": 1,
-      "img": "./assets/kitty.png",
+      "img": "../assets/kitty.png",
       "name": "고양이 기타",
       "address": "부산 기장군 가락동"
     },
     {
       "id": 2,
-      "img": "./assets/AirPod.png",
+      "img": "../assets/AirPod.png",
       "name": "완전 새 에어팟",
       "address": "부산 양정동"
     },
     {
       "id": 3,
-      "img": "./assets/laptop.png",
+      "img": "../assets/laptop.png",
       "name": "중고 맥북",
       "address": "서울 강남구 삼성동"
     },
     {
       "id": 4,
-      "img": "./assets/phone.png",
+      "img": "../assets/phone.png",
       "name": "스마트폰",
       "address": "서울 종로구 종로1가"
     },
     {
       "id": 5,
-      "img": "./assets/headphone.png",
+      "img": "../assets/headphone.png",
       "name": "헤드폰",
       "address": "대구 중구 동성로"
     },
     {
       "id": 6,
-      "img": "./assets/ipad.png",
+      "img": "../assets/ipad.png",
       "name": "아이패드",
       "address": "부산 해운대구"
     },
     {
       "id": 7,
-      "img": "./assets/earing.png",
+      "img": "../assets/earing.png",
       "name": "귀걸이",
       "address": "인천 남동구 구월동"
     },
     {
       "id": 8,
-      "img": "./assets/bicycle.png",
+      "img": "../assets/bicycle.png",
       "name": "산악 자전거",
       "address": "대전 서구 둔산동"
     }

diff --git a/mission/index.html b/mission/index.html
@@ -1,9 +1,105 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>당근마켓 클론</title>
-  </head>
-  <body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>당근마켓 클론</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+  <header>
+    <div class="container1">
+      <a class="item" href="./index.html"><img src="../assets/logo.png" width="75px" height="43px" id="logo"></a>
+      <a class="item" id="trade" href="./tradepage.html"><b>중고거래</b></a>
+      <div class="item"><b>동네업체</b></div>
+      <div class="item"><b>알바</b></div>
+      <div class="item"><b>부동산</b></div>
+      <div class="item"><b>중고차 직거래</b></div>
+    </div>
+    <div class="container2">
+      <input type="text" placeholder="물품이나 동네를 검색해보세요">
+      <input type="button" value="채팅하기">
+    </div>
+  </header> 
+
+  <section id="sec1">
+    <div>
+      <h1>당신 근처의<br>지역 생활 커뮤니티</h1>
+      <p><br>동네라서 가능한 모든 것<br>당근에서 가까운 이웃과 함께해요.<br></p>
+      <input type="button" value="    Google Play" style="background-image: url(../assets/GooglePlay.png);">
+      <input type="button" value="    App Store" style="background-image: url(../assets/AppStore.png); background-position:31px;">
+    </div>
+    <div>
+      <img src="../assets/mascort.png" height="700px" style="position:absolute; top: 0;">
+    </div>
+  </section>
+
+  <section id="sec2">
+    <div>
+      <img src="../assets/section1.png" height="700px" style="position:relative; top:-200px;">
+    </div>
+    <div>
+      <p style="color:#FF6F0F; font-weight:bold;">중고거래<br><br></p>
+      <h1 style="font-size:45px;">믿을만한<br>이웃 간 중고거래</h1>
+      <p><br>동네 주민들과 가깝고 따뜻한 거래를<br>지금 경험해보세요.<br><br></p>
+      <input type="button" value="인기매물 보기">
+      <input type="button" value="믿을 수 있는 중고거래">
+    </div>
+  </section>
+
+  <section id="sec3">
+    <div>
+      <p style="color:#FF6F0F; font-weight:bold;">동네생활<br><br></p>
+      <h1 style="font-size:45px;">이웃만 아는<br>동네 정보와 이야기</h1>
+      <p><br>우리동네의 다양한 정보와 이야기를<br>공감과 댓글로 나누어요.<br></p>
+      <div class="picpr">
+        <div class="pic" style="background-image:url(../assets/circle.png); background-size: cover;"></div>
+        <div class="pic" style="background-image:url(../assets/question.png); background-size: cover;"></div>
+        <div class="pic" style="background-image:url(../assets/lost.png); background-size:40px; background-repeat: no-repeat; background-position:5px;"></div>
+      </div>
+      <div class="picname">
+        <p>동네모임</p>
+        <p>동네질문</p>
+        <p>동네분실센터</p>
+      </div>
+      <div class="picinfo">
+        <p>근처 이웃들과 동네<br>이야기를 해보세요.</p>
+        <p>궁금한 게 있을 땐<br>이웃에 물어보세요.</p>
+        <p>무언가를 잃어버렸다면<br>글을 올려보세요.</p>
+      </div>
+    </div>
+    <div>
+      <img src="../assets/section2.png" height="700px" style="position:relative; top: -200px; right:200px;">
+    </div>
+  </section>
+  <section id="sec4">
+    <div>
+      <img src="../assets/section3.png" height="700px" style="position:relative; top:-200px;">
+    </div>
+
+    <div>
+      <p style="color:#FF6F0F; font-weight:bold;">알바<br><br></p>
+      <h1 style="font-size:45px;">걸어서 10분!<br>동네 알바 구하기</h1>
+      <p><br>당근하듯 쉽고, 편하게<br>당근 알바로 동네 알바를 구할 수 있어요.<br><br></p>
+      <input type="button" value="내근처 알바 보기">
+    </div>
+
+  </section>
+
+  <section id="sec5">
+    <div>
+      <p style="color:#FF6F0F; font-weight:bold;">동네업체<br><br></p>
+      <h1 style="font-size:45px;">내 근처에서 찾는<br>동네업체</h1>
+      <p><br>이웃들의 추천 후기를 확인하고<br>동네 곳곳의 업체들을 찾을 수 있어요.<br><br></p>
+      <input type="button" value="당근 동네업체 보기">
+    </div>
+    <div>
+      <img src="../assets/section4.png" height="700px" style="position:relative; top: -550px; left:400px;">
+    </div>
+  </section>
+
+</body>
+
+</html>
diff --git a/mission/script.js b/mission/script.js
@@ -1 +1,24 @@
 // 화이팅..
+// -> ㅠㅠ
+
+function list() {
+    fetch('data.json').then(function (response) {
+        return response.json();
+    }).then(function (obj) {
+        const container = document.querySelector('#imgcontainer');
+        let content = '';   
+
+        obj.data.map((item) => {
+            content += `
+            <div id="items">
+              <img src="${item.img}" alt="${item.name}">
+              <h2>${item.name}</h2>
+              <div> 999,999원 </div>
+              <p>${item.address}</p>
+            </div>
+          `;
+        });
+
+        container.innerHTML = content;
+    });
+}