diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5b72d0a Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/MD/README.md similarity index 100% rename from README.md rename to MD/README.md diff --git a/reference.md b/MD/reference.md similarity index 100% rename from reference.md rename to MD/reference.md diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..f138c10 Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/AppStore.png b/assets/AppStore.png new file mode 100644 index 0000000..4930e34 Binary files /dev/null and b/assets/AppStore.png differ diff --git a/assets/GooglePlay.png b/assets/GooglePlay.png new file mode 100644 index 0000000..8be6948 Binary files /dev/null and b/assets/GooglePlay.png differ diff --git a/assets/circle.png b/assets/circle.png new file mode 100644 index 0000000..3bb789b Binary files /dev/null and b/assets/circle.png differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..ce0c102 Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/lost.png b/assets/lost.png new file mode 100644 index 0000000..792b9e8 Binary files /dev/null and b/assets/lost.png differ diff --git a/assets/mascort.png b/assets/mascort.png new file mode 100644 index 0000000..47f6637 Binary files /dev/null and b/assets/mascort.png differ diff --git a/assets/question.png b/assets/question.png new file mode 100644 index 0000000..13952df Binary files /dev/null and b/assets/question.png differ diff --git a/assets/section1.png b/assets/section1.png new file mode 100644 index 0000000..7fbf488 Binary files /dev/null and b/assets/section1.png differ diff --git a/assets/section2.png b/assets/section2.png new file mode 100644 index 0000000..4f77756 Binary files /dev/null and b/assets/section2.png differ diff --git a/assets/section3.png b/assets/section3.png new file mode 100644 index 0000000..0041c98 Binary files /dev/null and b/assets/section3.png differ diff --git a/assets/section4.png b/assets/section4.png new file mode 100644 index 0000000..9b2641d Binary files /dev/null and b/assets/section4.png differ diff --git a/assets/trade.png b/assets/trade.png new file mode 100644 index 0000000..3e2bc1f Binary files /dev/null and b/assets/trade.png differ diff --git a/data.json b/mission/data.json similarity index 73% rename from data.json rename to mission/data.json index 2b8e562..22cb8b1 100644 --- a/data.json +++ b/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 index f6f815c..e0f4d98 100644 --- a/mission/index.html +++ b/mission/index.html @@ -1,9 +1,119 @@ - - - - 당근마켓 클론 - - - + + + + + 당근마켓 클론 + + + + +
+
+ + 중고거래 +
동네업체
+
알바
+
부동산
+
중고차 직거래
+
+
+ + +
+
+ +
+
+

당신 근처의

+

지역 생활 커뮤니티

+

동네라서 가능한 모든 것

+

당근에서 가까운 이웃과 함께해요.

+ + +
+
+ +
+
+ +
+
+ +
+
+

중고거래

+

믿을만한

+

이웃 간 중고거래

+

동네 주민들과 가깝고 따뜻한 거래를

+

지금 경험해보세요.

+ + +
+
+ +
+
+

동네생활

+

이웃만 아는

+

동네 정보와 이야기

+

우리동네의 다양한 정보와 이야기를

+

공감과 댓글로 나누어요.

+
+
+
+
+
+
+
+

동네모임

+

동네질문

+

동네분실센터

+
+
+

근처 이웃들과 동네

+

이야기를 해보세요.

+

궁금한 게 있을 땐

+

이웃에 물어보세요.

+

무언가를 잃어버렸다면

+

글을 올려보세요.

+
+
+
+ +
+
+
+
+ +
+ +
+

알바

+

걸어서 10분!

+

동네 알바 구하기

+

당근하듯 쉽고, 편하게

+

당근 알바로 동네 알바를 구할 수 있어요.

+ +
+ +
+ +
+
+

동네업체

+

내 근처에서 찾는

+

동네업체

+

이웃들의 추천 후기를 확인하고

+

동네 곳곳의 업체들을 찾을 수 있어요.

+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/mission/script.js b/mission/script.js index c5268ea..24342fe 100644 --- 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 += ` +
+ ${item.name} +

${item.name}

+
999,999원
+

${item.address}

+
+ `; + }); + + container.innerHTML = content; + }); +} diff --git a/mission/style.css b/mission/style.css index cca57b3..ddf2315 100644 --- a/mission/style.css +++ b/mission/style.css @@ -3,3 +3,361 @@ padding: 0; box-sizing: border-box; } + +html, +body { + min-height: 100vh; + min-width: 100vh; +} + +header { + display: flex; + z-index: 5; + justify-content: space-between; + background-color: #ffffff; + position: fixed; + padding-left: 120px; + padding-right: 120px; + top: 0px; + width: 100%; + height: 13vh; +} + +body { + padding-top: 70px; +} + +section { + width: 100%; + padding-left: 120px; + padding-right: 120px; + padding-top: 200px; + height: 43.55rem; +} + +#sec1 { + display: flex; + justify-content: space-between; + background-color: #fffdde; +} + +#sec1>div>input[type=button] { + background-repeat: no-repeat; + background-position-x: 28px; + background-position-y: 15px; + width: 14vw; + height: 8vh; + margin-right: 5px; + margin-top: 30px; + font-weight: bold; + background-color: #FF6F0F; + color: #ffffff; + border: none; + border-radius: 5px; +} + +#sec2 { + display: flex; + justify-content: space-between; + background-color: #f6f6f6; +} + +#sec2>div>input[type=button] { + width: auto; + height: 8vh; + margin-right: 5px; + font-size: 16px; + padding: 0 20px; + font-weight: bold; + text-align: center; + background-color: #e0dfdf; + color: #000000; + border: none; + border-radius: 5px; +} + +#sec2>div>.txt { + position: relative; + top: -500px; + left: 600px; +} + +#sec3 { + display: flex; + justify-content: space-between; + background-color: #fff8e0; +} + +#sec4 { + display: flex; + justify-content: space-between; + background-color: #f5f5f5; +} + +#sec4>div>input[type=button] { + width: auto; + height: 8vh; + margin-right: 5px; + font-size: 16px; + padding-right: 20px; + padding-left: 20px; + font-weight: bold; + text-align: center; + background-color: #e0dfdf; + color: #000000; + border: none; + border-radius: 5px; +} + +#sec5 { + background-color: #eefbe7; +} + +#sec5>div>input[type=button] { + width: auto; + height: 8vh; + margin-right: 5px; + font-size: 16px; + padding-right: 20px; + padding-left: 20px; + font-weight: bold; + text-align: center; + background-color: #e0dfdf; + color: #000000; + border: none; + border-radius: 5px; +} + +section>div { + width: 500px; + height: 350px; + margin-left: 100px; +} + +section>div>h1 { + font-size: 50px; +} + +section>div>p { + font-size: 20px; + color: #999999; +} + +.container1 { + width: 45%; + display: flex; + justify-content: space-between; +} + +.container2 { + margin: auto 0; +} + +.item { + text-decoration: none; + text-align: center; + margin: auto 0; + color: #000000; +} + +#trade:hover { + color: #808080; +} + +input[type=text] { + width: 270px; + height: 40px; + font-size: 15px; + padding-left: 15px; + background-color: #eeeeee; + border-radius: 5px; + border: none; +} + +.container2>input[type=button] { + height: 40px; + width: 70px; + font-size: 15px; + background-color: #ffffff; + border-radius: 5px; + border-width: 1px; +} + +.picpr { + margin-top: 40px; + display: flex; + width: 300px; + height: 60px; + justify-content: space-between; +} + +.pic { + width: 50px; + height: 50px; + background-color: #fcc765; + + border-radius: 5px; +} + +.pic1 { + background-image: url(../assets/circle.png); + background-size: cover; +} + +.pic2 { + background-image: url(../assets/question.png); + background-size: cover; +} + +.pic3 { + background-image: url(../assets/lost.png); + background-size: 40px; + background-repeat: no-repeat; + background-position: 5px; +} + +.picname { + width: 400px; + display: flex; + gap: 68px; +} + +.picinfo { + width: 400px; + display: flex; + gap: 33px; +} + +.picinfo>p { + color: #999999; + font-size: 12px; +} + + + +.containerTop { + display: flex; + justify-content: space-between; + width: 100%; + height: 300px; + padding-top: 60px; + padding-left: 340px; + padding-right: 340px; + background-color: #fce9b2; +} + +.containerMain { + width: 55%; + height: 1700px; + margin-top: 36px; + margin-right: 340px; + margin-left: 340px; +} + +#imgcontainer { + margin-top: 40px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +#items { + width: 223px; + height: 340px; + margin: auto; + border: none; +} + +#items>img { + width: 223px; + height: 223px; + border-radius: 12px; + border: 1px solid #f1f1f1; +} + +#items>h2 { + font-size: 16px; + color: #212529; + margin-bottom: 4px; + letter-spacing: -0.02px; + line-height: 1.5; + font-weight: normal; +} + +#items>p { + font-size: 13px; + color: #212529; + white-space: nowrap; + margin-bottom: 4px; + line-height: 1.5; +} + +#items>div { + font-size: 15px; + font-weight: 700; + line-height: 1.5; + margin-bottom: 4px; +} + +.orangeP { + color: #FF6F0F; + font-weight: bold; +} + +.google { + background-image: url(../assets/GooglePlay.png); +} + +.apple { + background-image: url(../assets/AppStore.png); + background-position: 31px; +} + +.mascort { + position: absolute; + top: 0; +} + +.section1 { + position: relative; + top: -200px; +} + +.section2 { + position: relative; + top: -200px; + right: 200px; +} + +.section3 { + position: relative; + top: -200px; +} + +.section4 { + position: relative; + top: -550px; + left: 400px; +} + +.sectioncontainer>h1 { + font-size: 45px; +} + +.containerToph1 { + line-height: 34px; + line-height: 50px; +} + +.containerTopp { + font-size: 105%; +} + +.containerTopimg { + position: relative; + top: -60px; +} + +.containerMainh1 { + text-align: center; + font-size: 32px; +} \ No newline at end of file diff --git a/mission/tradepage.html b/mission/tradepage.html new file mode 100644 index 0000000..b795d49 --- /dev/null +++ b/mission/tradepage.html @@ -0,0 +1,48 @@ + + + + + + + 중고거래 + + + + + +
+
+ + 중고거래 +
동네업체
+
알바
+
부동산
+
중고차 직거래
+
+
+ + +
+
+
+
+

믿을만한

+

이웃 간 중고거래

+

동네 주민들과 가깝고 따뜻한 거래를

+

지금 경험해보세요.

+
+ + + +
+ +
+

중고거래 인기매물

+
+ +
+
+ + + + \ No newline at end of file