diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..e4e06bc Binary files /dev/null and b/.DS_Store differ diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..21b153d Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/LG.jpg b/assets/LG.jpg new file mode 100644 index 0000000..3723e87 Binary files /dev/null and b/assets/LG.jpg differ diff --git a/assets/apple-logo-black.png b/assets/apple-logo-black.png new file mode 100644 index 0000000..46196f0 Binary files /dev/null and b/assets/apple-logo-black.png differ diff --git a/assets/apple-logo.png b/assets/apple-logo.png new file mode 100644 index 0000000..033bdef Binary files /dev/null and b/assets/apple-logo.png differ diff --git a/assets/daangn-clone-logo.png b/assets/daangn-clone-logo.png new file mode 100644 index 0000000..0161a71 Binary files /dev/null and b/assets/daangn-clone-logo.png differ diff --git a/assets/daangn-clone-mascot.jpg b/assets/daangn-clone-mascot.jpg new file mode 100644 index 0000000..82546e5 Binary files /dev/null and b/assets/daangn-clone-mascot.jpg differ diff --git a/assets/daangn-clone-tem.jpg b/assets/daangn-clone-tem.jpg new file mode 100644 index 0000000..27eb9ac Binary files /dev/null and b/assets/daangn-clone-tem.jpg differ diff --git a/assets/electric_bicycle.jpg b/assets/electric_bicycle.jpg new file mode 100644 index 0000000..ed986b9 Binary files /dev/null and b/assets/electric_bicycle.jpg differ diff --git a/assets/fleamarketpicture.jpg b/assets/fleamarketpicture.jpg new file mode 100644 index 0000000..e2b924d Binary files /dev/null and b/assets/fleamarketpicture.jpg differ diff --git a/assets/footer_picture.png b/assets/footer_picture.png new file mode 100644 index 0000000..28f5d7a Binary files /dev/null and b/assets/footer_picture.png differ diff --git a/assets/goldRing.jpg b/assets/goldRing.jpg new file mode 100644 index 0000000..0a92764 Binary files /dev/null and b/assets/goldRing.jpg differ diff --git a/assets/google-logo-black.png b/assets/google-logo-black.png new file mode 100644 index 0000000..e15cf87 Binary files /dev/null and b/assets/google-logo-black.png differ diff --git a/assets/google-logo.png b/assets/google-logo.png new file mode 100644 index 0000000..10edff2 Binary files /dev/null and b/assets/google-logo.png differ diff --git a/assets/guitar.jpg b/assets/guitar.jpg new file mode 100644 index 0000000..dd89d16 Binary files /dev/null and b/assets/guitar.jpg differ diff --git a/assets/v_info.jpg b/assets/v_info.jpg new file mode 100644 index 0000000..1310b89 Binary files /dev/null and b/assets/v_info.jpg differ diff --git "a/assets/\353\202\264\352\267\274\354\262\230.jpg" "b/assets/\353\202\264\352\267\274\354\262\230.jpg" new file mode 100644 index 0000000..e073358 Binary files /dev/null and "b/assets/\353\202\264\352\267\274\354\262\230.jpg" differ diff --git "a/assets/\353\217\231\353\204\244\353\252\250\354\236\204.png" "b/assets/\353\217\231\353\204\244\353\252\250\354\236\204.png" new file mode 100644 index 0000000..20b2777 Binary files /dev/null and "b/assets/\353\217\231\353\204\244\353\252\250\354\236\204.png" differ diff --git "a/assets/\353\217\231\353\204\244\353\266\204\354\213\244\354\204\274\355\204\260.png" "b/assets/\353\217\231\353\204\244\353\266\204\354\213\244\354\204\274\355\204\260.png" new file mode 100644 index 0000000..05e3d04 Binary files /dev/null and "b/assets/\353\217\231\353\204\244\353\266\204\354\213\244\354\204\274\355\204\260.png" differ diff --git "a/assets/\353\217\231\353\204\244\354\247\210\353\254\270.png" "b/assets/\353\217\231\353\204\244\354\247\210\353\254\270.png" new file mode 100644 index 0000000..783c474 Binary files /dev/null and "b/assets/\353\217\231\353\204\244\354\247\210\353\254\270.png" differ diff --git "a/assets/\354\247\200\354\233\220\354\204\234.jpg" "b/assets/\354\247\200\354\233\220\354\204\234.jpg" new file mode 100644 index 0000000..191d956 Binary files /dev/null and "b/assets/\354\247\200\354\233\220\354\204\234.jpg" differ diff --git a/data.json b/data.json deleted file mode 100644 index 2b8e562..0000000 --- a/data.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "data": [ - { - "id": 1, - "img": "./assets/kitty.png", - "name": "고양이 기타", - "address": "부산 기장군 가락동" - }, - { - "id": 2, - "img": "./assets/AirPod.png", - "name": "완전 새 에어팟", - "address": "부산 양정동" - }, - { - "id": 3, - "img": "./assets/laptop.png", - "name": "중고 맥북", - "address": "서울 강남구 삼성동" - }, - { - "id": 4, - "img": "./assets/phone.png", - "name": "스마트폰", - "address": "서울 종로구 종로1가" - }, - { - "id": 5, - "img": "./assets/headphone.png", - "name": "헤드폰", - "address": "대구 중구 동성로" - }, - { - "id": 6, - "img": "./assets/ipad.png", - "name": "아이패드", - "address": "부산 해운대구" - }, - { - "id": 7, - "img": "./assets/earing.png", - "name": "귀걸이", - "address": "인천 남동구 구월동" - }, - { - "id": 8, - "img": "./assets/bicycle.png", - "name": "산악 자전거", - "address": "대전 서구 둔산동" - } - ] -} diff --git a/mission/fleamarket.html b/mission/fleamarket.html new file mode 100644 index 0000000..5d98881 --- /dev/null +++ b/mission/fleamarket.html @@ -0,0 +1,114 @@ + + + + + + 당근마켓 클론 + + + + +
+
+ + +
+
중고거래
 +
동네업체
+
알바
+
부동산
+
중고차 직거래
+
+ +
+

채팅하기

+
+ +
+
+ +
+
+
+
+

믿을만한
이웃 간 중고거래

+
+

동네 주민들과 가깝고 따뜻한 거래를
지금 경험해보세요.

+
+
+ 플리마켓 사진 +
+
+ +

중고거래 인기매물

+ +
+ +
+

인기매물 더보기

+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/mission/index.html b/mission/index.html index f6f815c..f021912 100644 --- a/mission/index.html +++ b/mission/index.html @@ -1,9 +1,210 @@ - + 당근마켓 클론 + + +
+
+ + +
+
중고거래
 +
동네업체
+
알바
+
부동산
+
중고차 직거래
+
+ +
+

채팅하기

+
+ +
+
+ +
+
+
+
+

당신 근처의
지역 생활 커뮤니티

+
+

동네라서 가능한 모든 것
당근에서 가까운 이웃과 함께해요.

+
+ +
+
구글 로고
+
Google Play
+
+ + + +
+
애플 로고
+
App Store
+
+ +
+ +
+ 당근 마스코트 +
+
+ +
+
+ 매너온도 +
+ +
+

중고거래

+

믿을만한
이웃 간 중고거래

+
+

동네 주민들과 가깝고 따뜻한 거래를
지금 경험해보세요.

+
+ +
+

인기매물

+
+
+

믿을 수 있는 중고거래

+
+
+
+ +
+
+ 동네 정보 +
+ +
+

동네생활

+

이웃만 아는
동네 정보와 이야기

+
+

우리동네의 다양한 정보와 이야기를
공감과 댓글로 나누어요.

+
+
+ 동네모임 +
+
동네모임
+

근처 이웃들과 동네
이야기를 해보세요.

+
+
+
+ 동네질문 +
+
동네질문
+

궁금한 게 있을 땐
이웃에게 물어보세요.

+
+
+
+ 동네분실센터 +
+
동네분실센터
+

무언가를 잃어버렸다면
글을 올려보세요.

+
+
+
+
+ +
+
+ 지원서 +
+ +
+

알바

+

걸어서 10분!
동네 알바 구하기

+
+

당근하듯 쉽고, 편하게
당근 알바로 동네 알바를 구할 수 있어요.

+
+
+

내근처 알바 보기

+
+
+
+ +
+
+ 내근처 +
+
+

동네업체

+

내 근처에서 찾는
동네업체

+
+

이웃들의 추천 후기를 확인하고
동네 곳곳의 업체들을 찾을 수 있어요.

+
+
+

당근 동네업체 보기

+
+
+
+
+ + +
+
+ + + diff --git a/mission/script.js b/mission/script.js index c5268ea..857906a 100644 --- a/mission/script.js +++ b/mission/script.js @@ -1 +1,98 @@ -// 화이팅.. +const data = [ + { + id: 1, + img: "../assets/kitty.png", + name: "고양이 기타", + price: "10,000원", + address: "부산 기장군 가락동", + }, + { + id: 2, + img: "../assets/AirPod.png", + name: "완전 새 에어팟", + price: "22,000원", + address: "부산 양정동", + }, + { + id: 3, + img: "../assets/laptop.png", + name: "중고 맥북", + price: "980,000원", + address: "서울 강남구 삼성동", + }, + { + id: 4, + img: "../assets/phone.png", + name: "스마트폰", + price: "800,000원", + address: "서울 종로구 종로1가", + }, + { + id: 5, + img: "../assets/headphone.png", + name: "헤드폰", + price: "36,000원", + address: "대구 중구 동성로", + }, + { + id: 6, + img: "../assets/ipad.png", + name: "아이패드", + price: "84,000원", + address: "부산 해운대구", + }, + { + id: 7, + img: "../assets/earing.png", + name: "귀걸이", + price: "200,000원", + address: "인천 남동구 구월동", + }, + { + id: 8, + img: "../assets/bicycle.png", + name: "산악 자전거", + price: "150,000원", + address: "대전 서구 둔산동", + }, + { + id: 9, + img: "../assets/electric_bicycle.jpg", + name: "전기 자전거", + price: "650,000원", + address: "부산 부산진구 당감동", + }, + { + id: 10, + img: "../assets/goldRing.jpg", + name: "금반지", + price: "250,000원", + address: "서울 강서구 까치산동", + }, + { + id: 11, + img: "../assets/guitar.jpg", + name: "깁슨 일렉기타", + price: "950,000원", + address: "서울 한강", + }, + { + id: 12, + img: "../assets/LG.jpg", + name: "LG 제습기", + price: "300,000원", + address: "부산 부산진구 서면", + }, + ]; + + const items= data.map(item => { + + let i = document.querySelector(".flea_box"); + i.innerHTML += `
+ ${item.name} +

${item.name}

+

${item.price}

+

${item.address}

+
+ `; +}); \ No newline at end of file diff --git a/mission/style.css b/mission/style.css index cca57b3..dfd17e7 100644 --- a/mission/style.css +++ b/mission/style.css @@ -1,5 +1,488 @@ +.ibm-plex-sans-kr-regular { + font-family: "IBM Plex Sans KR", sans-serif; + font-weight: 650; + font-style: normal; + font-size : 45px; + line-height : 1.5; +} + +.fleamarket_ibm-plex-sans-kr-regular { + font-family: "IBM Plex Sans KR", sans-serif; + font-weight: 650; + font-style: normal; + font-size : 35px; + line-height : 1.5; +} + +.nanum-gothic-regular { + font-family: "Nanum Gothic", sans-serif; + font-style: normal; + color : gray; + font-size : 18px; + line-height : 1.5; +} + +.nanum-gothic-regular-orange { + font-family: "Nanum Gothic", sans-serif; + font-style: bolder; + color : #FF6F0F; + font-size : 18px; + line-height : 1.5; +} + +.head-nanum-gothic-regular { + font-family: "Nanum Gothic", sans-serif; + font-style: light; + color : #868e96; + font-size : 12px; + line-height : 1.5; +} + +.p-nanum-gothic-regular { + font-family: "Nanum Gothic", sans-serif; + font-style: light; + color : #7c7c7c; + font-size : 12px; + line-height : 1.5; +} + * { margin: 0; padding: 0; box-sizing: border-box; } + +.logo { + cursor : pointer; + width : 70px; +} + +.footer_d { + height : 620px; + background-color : white; + position : relative; +} + +.footer_text { + width : 770px; + height : 530px; + margin : 40px 338px 0px 338px; + +} + +.footer_text_under > h4 { + font-size : 16px; + color : gray; +} + +.footer_text_under { + width : 770px; + height : 200px; + margin : 20px 0px 0px 0px; + position : relative; +} + +.footer_text_under > img { + position : absolute; + right : 0px; + top : 0px +} + +ul { + padding : 40px 0px 0px 10px; + display : inline-block; + margin-right : 20px; +} + +li { + list-style : none; + font-size : 17px; + line-height : 50px; + color : #262629; +} + +footer > hr { + width : 120px; + border-color : #f5f5f7; +} + +.container-yellow { + position : relative; + background-color : #FFFAE0; + height : 760px; +} + +.main-footer_hr { + border-color : #f5f5f7; +} + +.container-white { + position : relative; + background-color : #f9f9f9; + height : 750px; +} + +.container-green { + position : relative; + background-color : #f5fdeb; + height : 750px; + border-top-width : 2px; + border-color : gray; +} + +.container-text-white { + position : absolute; + top : 245px; + right : 300px; +} + +.container-red { + position : relative; + background-color : #fff8f1; + height : 750px; +} + +.container-text-red { + position : absolute; + top : 194px; + left : 238px; +} + +.container-text-green { + position : absolute; + top : 194px; + left : 250px; +} + +header { + background-color : white; + height : 65px; +} + +.header_container { + position : relative; + margin : 5px 135px 5px 120px; +} + +.headButton { + margin : 5px 135px 5px 120px; + height : 50px; +} + +#headclick { + color : #5a5e65; + text-align : center; + position : absolute; + padding : 12px 0px; + top : 5px; + font-size : 20px; +} + +#headclick:hover { + color : #868e96; + cursor : pointer; +} + +#headclick2:hover { + color : #868e96; + cursor : pointer; +} + +#headclick3:hover { + color : #868e96; + cursor : pointer; +} + +#headclick4:hover { + color : #868e96; + cursor : pointer; +} + +#headclick5:hover { + color : #868e96; + cursor : pointer; +} + +#headclick6:hover { + cursor : pointer; +} + +#headclick2 { + color : #5a5e65; + text-align : center; + position : absolute; + padding : 12px 0px; + left : 220px; + top : 5px; + font-size : 20px; +} + +#headclick3 { + color : #5a5e65; + text-align : center; + position : absolute; + padding : 12px 0px; + left : 320px; + top : 5px; + font-size : 20px; +} + +#headclick4 { + color : #5a5e65; + text-align : center; + position : absolute; + padding : 12px 0px; + left : 390px; + top : 5px; + font-size : 20px; +} + +#headclick5 { + color : #5a5e65; + text-align : center; + position : absolute; + padding : 12px 0px; + left : 480px; + top : 5px; + font-size : 20px; +} + +#headclick6 { + color : #ff7929; + text-align : center; + position : absolute; + padding : 12px 0px; + top : 5px; + font-size : 20px; + +} + +.scroll_bar { + position : fixed; + width : 100%; + top : 0; + z-index : 100; +} + +.indexcontainer { + height : 3760px; +} + +#text-box { + padding-left : 205px; + padding-top : 284px; + +} + +.mascot { + position : absolute; + bottom : 0; + right : 45px; + top : 1px; + +} + +#downloadButton { + position : relative; + width : 180px; + height : 55px; + background-color : #FF6F0F; + border-radius : 10px; + float : left; + margin-right : 18px; +} + +#downloadButton-black { + position : relative; + width : 180px; + height : 55px; + background-color : #f2f3f6; + border-radius : 10px; + float : left; + margin-right : 18px; +} + +#download_picture { + padding : 13px 0px 0px 12px; +} + +#download_write { + font-size : 20px; + text-align : center; + color : white; + position : absolute; + top : 17px; + right : 26px; +} + +#download_write-black { + font-size : 20px; + text-align : center; + color : black; + position : absolute; + top : 17px; + right : 26px; +} + +.mainfleainfo { + background-color : #FFF1AA; + height: 380px; + position : relative; +} + +.mainfleacontainer { + margin : 0px 335px 0px 335px; + height : 315px; + padding : 112px 0px 100px 0px; +} + +.fleamarket_p { + font-size : 18px; + line-height : 1.4; +} + +.fleamarket_picture { + position : absolute; + top : 65px; + right : 280px +} + +.fleamarket_h1 { + text-align : center; + padding : 74px 0px 0px 0px; +} + +.fleamarket_h3 { + text-align : center; + padding : 10px 0px 0px 0px; + text-decoration : underline; +} + +.fleamarket_container { + height : 2210px; +} + +.head_chat { + border-radius : 5px; + border : 1.2px solid gray; + width : 90px; + height : 40px; + text-align : center; + padding : 10px 0px 0px 0px; + position : absolute; + right : 10px; + top : 8px; +} + +.head_search { + border-radius : 5px; + background-color : #e9ecef; + width : 250px; + height : 40px; + text-align : left; + padding : 2px 0px 0px 16px; + position : absolute; + right : 130px; + top : 8px; + border-width : 0px; + +} + +.main_tmpPicture { + position : relative; + height : 750px; + width: 655px; + top : 38px; + left : 180px + +} + +.main_supportPicture { + position : relative; + height : 750px; + width: 655px; + top : 38px; + left : 200px + +} + +#grayButton { + background-color : #E9ECEF; + width : 110px; + height : 48px; + border-radius : 7px; + text-align : center; + padding : 14px 0px 0px 0px; + display : inline-block; +} + +#grayButton2 { + background-color : #E9ECEF; + width : 190px; + height : 48px; + border-radius : 7px; + text-align : center; + padding : 14px 0px 0px 0px; + display : inline-block; + margin-left : 10px; +} + +#grayButton3 { + background-color : #E9ECEF; + width : 160px; + height : 48px; + border-radius : 7px; + text-align : center; + padding : 14px 0px 0px 0px; + display : inline-block; +} + +.main_vPicture { + position : absolute; + height : 750px; + width: 655px; + top : 30px; + right : 190px; +} + +#village_info { + width : 120px; + height : 150px; + display : inline-block; +} + +#village_info_left { + width : 120px; + height : 150px; + display : inline-block; + margin-left : 10px; +} + +#village_text { + padding-top : 8px; + padding-left : 3px; +} + +.footer_text_ul { + display: flex; +} + +.footer_text_div { + position : absolute; + top : 20px; + right : 280px; +} + +.flea_box { + width : 757px; + height : 1542px; + margin : 30px auto; +} + +.item { + display : inline-block; + margin-right : 26px; + width : 223px; + height : 339px; + line-height : 26px +} \ No newline at end of file