728x90
반응형
다시 초심(?)으로 돌아가 html과 css 만을 이용해서 당근마켓 사이트를 클론코딩해보는 미니 과제!
일단 내가 구현하고자 한 사이트는 아래와 같다.
당신 근처의 당근마켓
중고 거래부터 동네 정보까지, 이웃과 함께해요. 가깝고 따뜻한 당신의 근처를 만들어요.
www.daangn.com
일단 여러 탭 메뉴 중에 '중고거래'에 해당하는 페이지만 클론코딩해보았다.
Javascript 를 활용한 기능은 한가지만 넣었는데, 검색창에 무언가를 입력하고 채팅하기 버튼을 눌렀을 때 alert 으로 무슨 input 을 넣었는지 띄워주는 기능이다(정말 별거 아니지만 넣어보았다)
코드
코드는 아래와 같다.
파일을 따로 분리하지는 않았고 index.html, index.css 에 몰아서 작업하였다.
나중에 리액트로 다시 구현할 때에는 다시 Component 로 이쁘게 나누어서 작업해보려고 한다.
일단 index.html 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="header">
<div id="header_wrap">
<div id="header_content">
<img src="./logo.png" width="150" height="auto"></div>
<div id="header_content">
<button class="header_menu_selected">중고거래</button>
</div>
<div id="header_content">
<button class="header_menu">동네가게</button>
</div>
<div id="header_content">
<button class="header_menu">알바</button>
</div>
<div id="header_content">
<button class="header_menu">부동산 직거래</button>
</div>
<div id="header_content">
<button class="header_menu">중고차 직거래</button>
</div>
<div id="header_content">
<form onsubmit="submitForm(event)">
<input class="search_input" type="text" placeholder="물품이나 동네를 검색해보세요">
<button type="submit" class="chat_button">채팅하기</button>
</form>
</div>
</div>
</div>
<div id="body">
<div class="body_content_1">
<div class="body_wrap">
<h2 class="big">당신 근처의 <br>당근마켓</h2>
<p class="small">중고 거래부터 동네 정보까지, 이웃과 함께해요.<br>가깝고 따뜻한 당신의 근처를 만들어요.</p>
</div>
<div class="body_wrap">
<img class="image_1" src="https://d1unjqcospf8gs.cloudfront.net/assets/home/main/3x/image-top-d6869a79bc4cb58ea59aa5a408decfdf4a4ba60ac639837081da12861083cdbb.webp" width="650" height="auto">
</div>
</div>
<div class="body_content_2">
<div class="body_wrap">
<img src="https://d1unjqcospf8gs.cloudfront.net/assets/home/main/3x/image-1-cc678e9a217b96f5cb459f7f0684f5ba67706f9889801618b8cf879fbc2c0ea7.webp" width="500" height="auto">
</div>
<div class="body_wrap">
<h2 class="medium">우리 동네 <br>중고 직거래 마켓</h2>
<p class="small">동네 주민들과 가깝고 따뜻한 거래를 지금 경험해보세요.</p>
<button class="gray_button">인기매물 보기</button>
<button class="gray_button">믿을 수 있는 중고거래</button>
</div>
</div>
<div class="body_content_3">
<div class="body_wrap">
<h2 class="medium">이웃과 함께하는 <br>동네생활</h2>
<p class="small">우리 동네의 다양한 이야기를 이웃과 함께 나누어요</p>
<div class="row">
<img class="naver" src="./icon-story-1-9226479b836cdc960291ffda91ace46c90a632f6cc868aa8983b3624e662a924.svg">
<img class="naver" src="./icon-story-2-208bb88cad31e335b40bc8ac5b7684dcf8a36d77ac50770a497a9c967a3bfc4f.svg">
<img class="naver" src="./icon-story-3-0a14d64c6101a7271655747d8401b9f71506578f8a4c0640608074e977bbc7c0.svg">
</div>
<div class="row">
<p class="naver_medium" style="margin-right: 50px; margin-left: 20px">우리동네질문</p>
<p class="naver_medium" style="margin-right: 60px;">동네분실센터</p>
<p class="naver_medium" style="margin-right: 25px;">동네모임</p>
</div>
<div class="row">
<p class="naver_small">궁금한 게 있을 땐 이웃에게 물어보세요</p>
<p class="naver_small">무언가를 잃어버렸을 때, 함께 찾을 수 있어요.</p>
<p class="naver_small">관심사가 비슷한 이웃과 온오프라인으로 만나요.</p>
</div>
</div>
<div class="body_wrap">
<img class="image_3" src="https://d1unjqcospf8gs.cloudfront.net/assets/home/main/3x/image-2-91a2286453bdf82dea16a7f0ee4ceb9dd325eae0e5a2a9967ba72c344bf8f2fc.webp" width="500" height="auto">
</div>
</div>
<div class="body_content_2">
<div class="body_wrap">
<img class="image_2" src="https://d1unjqcospf8gs.cloudfront.net/assets/home/main/3x/image-3-5fd6fb61d603ab919a45566b2ea6b505c83a93ec218f34ddcd5cb482543e2317.webp" width="450" height="auto">
</div>
<div class="body_wrap">
<h2 class="medium">내 근처에서 찾는<br>동네가게</h2>
<p class="small">우리 동네 가게를 찾고 있나요?<br>동네 주민이 남긴 진짜 후기를 함께 확인해보세요!</p>
<button class="gray_button" style="margin-top: 30px;">당근마켓 동네가게 찾기</button>
</div>
</div>
<div>
<h1 class="top_title">중고거래 인기매물</h1>
<div class="content_4_wrap">
<div class="item_row">
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/2e3462bb439e276d12b809c12f515a5ee4ed128aa4799ca88879a79de0df7c79.webp?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">위닉스제습기</h2>
<h2 class="item_cost">50,000원</h2>
<h1 class="item_place">서울 성동구 행당동</h1>
<div class="like_chating">
<span class="like">관심 15</span>
<span> ・ </span>
<span class="chat">채팅 48</span>
</div>
</div>
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/8c895d09679a822fc66fc85d9171a4c93af08f25b69c66b245e6dda3d3334702.webp?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">LG 43인치 UHDtv 팝니다.</h2>
<h2 class="item_cost">250,000원</h2>
<h1 class="item_place">경기도 안양시 만안구 안양동</h1>
<div class="like_chating">
<span class="like">관심 28</span>
<span> ・ </span>
<span class="chat">채팅 64</span>
</div>
</div>
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/c2bbbad3e6b2b451aac966c26938a4ef8db909109c61876a2c614d204a888529.webp?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">lg 레드로 tv</h2>
<h2 class="item_cost">50,000원</h2>
<h1 class="item_place">광주 남구 임암동</h1>
<div class="like_chating">
<span class="like">관심 21</span>
<span> ・ </span>
<span class="chat">채팅 28</span>
</div>
</div>
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/7c0a3c3645abc9f767d9b437449edff4d0e1aa472b1483c45b26d01d93c3965d.jpg?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">아이폰14pro</h2>
<h2 class="item_cost">100,000원</h2>
<h1 class="item_place">충남 아산시 배방음</h1>
<div class="like_chating">
<span class="like">관심 12</span>
<span> ・ </span>
<span class="chat">채팅 36</span>
</div>
</div>
</div>
<div class="item_row">
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/e71e173af178d80d5c134dbcbe9dd032dd76410552d83e7e7770a6f1594ff18f.jpg?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">이사가느라 가전 팔아요~! 골라...</h2>
<h2 class="item_cost">99원</h2>
<h1 class="item_place">광주 북구 신용동</h1>
<div class="like_chating">
<span class="like">관심 28</span>
<span> ・ </span>
<span class="chat">채팅 20</span>
</div>
</div>
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/d7e2b2bc48a4a3baf62001316228f72a948dcdead02b5a2f665ea188676fe44e.jpg?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">발뮤다 더 토스터, 더 오븐레인지...</h2>
<h2 class="item_cost">100,000원</h2>
<h1 class="item_place">경기도 성남시 분당구 이매동</h1>
<div class="like_chating">
<span class="like">관심 33</span>
<span> ・ </span>
<span class="chat">채팅 31</span>
</div>
</div>
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/e7d0c5184c3271677158ba9ddea950c23f1d8d545ad678d2e809a4efef69bef2.webp?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">캠핑테이블</h2>
<h2 class="item_cost">10,000원</h2>
<h1 class="item_place">경기도 부천시 중동</h1>
<div class="like_chating">
<span class="like">관심 14</span>
<span> ・ </span>
<span class="chat">채팅 15</span>
</div>
</div>
<div class="item">
<img src="https://dnvefa72aowie.cloudfront.net/origin/article/202303/669441b3e3d3df4baba0b3b4b2c305de8b2225c8d2e2ee35eb7dfb700922b17c.webp?q=82&s=300x300&t=crop" style="border-radius: 12px; width:200px">
<h2 class="item_name">메세타 화목난로</h2>
<h2 class="item_cost">30,000원</h2>
<h1 class="item_place">강원도 원주시 단계동</h1>
<div class="like_chating">
<span class="like">관심 19</span>
<span> ・ </span>
<span class="chat">채팅 36</span>
</div>
</div>
</div>
<div class="more_item_wrap">
<button class="more_item_btn">인기매물 더보기</button>
</div>
</div>
<div class="content_5">
<div class="keyword_wrap">
<button class="keyword_title">중고거래 인기검색어</button>
</div>
<div class="keyword_wrap">
<div class="keyword_wrap_row">
<button class="keyword">자전거</button>
<button class="keyword">의자</button>
<button class="keyword">아이폰</button>
<button class="keyword">냉장고</button>
<button class="keyword">노트북</button>
<button class="keyword">패딩</button>
<button class="keyword">아이패드</button>
<button class="keyword">모니터</button>
<button class="keyword">스타벅스</button>
<button class="keyword">책상</button>
</div>
</div>
<hr style="color:#495057">
</div>
</div>
</div>
<script>
function submitForm(event) {
event.preventDefault(); // 기본 제출 이벤트 막기
// 입력된 값 가져오기
const search_input = document.getElementsByClassName("search_input")[0].value;
// 입력된 값 출력
alert(`검색어: ${search_input}`);
}
</script>
</body>
</html>index.css 코드는 다음과 같다.
맨 위는 CSS 초기화 코드이다.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*시작*/
#header{
height: 6.4rem
}
#header_wrap{
height : 100%;
width: 1024px;
margin: auto;
display: flex;
flex-direction: row;
}
#header_content {
display: flex;
justify-content: center;
align-items: center;
}
#header_content form {
display: flex;
flex-direction: row;
justify-content:space-evenly;
align-items: center;
}
img{
display: block;
margin: 0 auto;
}
.header_menu_selected{
color: #ff6f0f;
font-style: normal;
font-weight: 700;
font-size:large;
background-color: white;
border: none;
}
.header_menu{
color: #4d5159;
font-style: normal;
font-weight: 700;
font-size:large;
background-color: white;
border: none;
}
.chat_button{
border: 0.5px solid #b8bcc3;
border-radius: 0.3rem;
font-size: 1.0rem;
font-weight: 600;
margin:auto;
width: 80px;
height: 40px;
display: flex;
justify-content: center;/*수평 가운데 정렬*/
align-items: center; /*수직 가운데 정렬*/
background-color: white;
}
.body_content_1{
height: 700px;
width: 1024px;
margin: auto;
background-color: #fbf7f2;
display: flex;
flex-direction: row;
}
.body_wrap{
padding: 20px;
width: 100%;
}
.big{
font-size: 3.2rem;
line-height: 1.3;
font-weight: 500;
padding-top: 16rem;
margin-bottom: 2.6rem;
letter-spacing: -0.4px;
}
.medium{
font-size: 2.5rem;
line-height: 1.3;
font-weight: 500;
padding-top: 16rem;
margin-bottom: 2.0rem;
letter-spacing: -0.4px;
}
.small{
font-size: 1.0rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.3px;
}
.image_1{
margin-top: 120px;
}
.image_2{
margin-right: 60px;
}
.search_input{
width: 250px;
padding: 10px;
margin-left: 70px;
border-radius: 0.6rem;
border: none;
outline: none;
background-color: #f2f3f6;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.body_content_2{
height: 700px;
width: 1024px;
margin: auto;
background-color: white;
display: flex;
flex-direction: row;
}
.gray_button{
border-radius: 6px;
font-size: medium;
font-weight: 600;
border: none;
display: inline-block;
padding: 1.0rem 1.5rem;
background-color: #F1F3F5;
margin-left: 5px;
transition: background-color 0.3s ease-in-out;
cursor: pointer;
}
.gray_button:hover{
background-color: #dcddde;
}
.body_content_3{
height: 700px;
width: 1024px;
margin: auto;
background-color: #E6F3E6;
display: flex;
flex-direction: row;
}
.body_content_4{
height: 700px;
width: 1024px;
margin: auto;
background-color: #F8F9FA;
display: flex;
flex-direction: column;
}
.row{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.naver{
margin-top: 30px;
}
.naver_medium{
font-weight: 700;
font-size: smaller;
}
.naver_small{
margin-left: 20px;
font-size: smaller;
width: 120px;
}
.top_title{
font-size: 2.5rem;
font-weight: 600;
margin-top: 100px;
text-align: center;
margin-bottom: 100px;
}
.item{
width: 200px;
height: 300px;
flex-grow: 0;
flex-basis: auto;
margin: auto;
}
.item_row{
display: flex;
flex-direction: row;
margin-bottom: 50px;
}
.item_name{
margin-top: 10px;
font-weight: 400;
}
.item_cost{
margin-top: 10px;
font-weight: 700;
}
.item_place{
font-weight: 400;
font-size: smaller;
margin-top: 10px;
}
.like_chating{
display: flex;
flex-direction: row;
color: #868e96;
margin-top: 10px;
}
.like{
font-size: smaller;
}
.chat{
font-size: smaller;
}
.more_item_wrap{
display: flex;
justify-content: center;
}
.more_item_btn{
border: none;
background-color: white;
font-weight: bold;
text-decoration: underline;
font-size: medium;
margin-bottom: 150px;
}
.keyword_wrap{
display: flex;
justify-content: center;
}
.keyword_title{
border: none;
background-color: white;
font-weight: bold;
text-decoration: underline;
font-size: medium;
margin-top: 100px;
margin-bottom: 50px;
}
.keyword_wrap_row{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.keyword{
border: none;
background-color: white;
font-size: medium;
margin-bottom: 50px;
margin-left: 20px;
}결과물
수정하고 싶은 점
이 부분을 구현할 때에 '집 모양 아이콘' 과 '우리동네질문' 그리고 '궁금한게 있을 땐~' 문구를 한 요소로 묶어서 구현했어야 깔끔할텐데
나는 아이콘 한줄, 굵은 글씨 제목 한줄, 소개문구 한줄 .. 이런식으로 구현을 했더니 예쁘게 정렬하기가 쉽지 않았다.
다시 수정한다면 한 요소를 column 으로 정렬하여 3개의 요소를 row 로 정렬하려한다.
마무리하며
다음주에는 이 작은 프로젝트를 좀 더 제대로, 리액트로 다시 구현을 해보려고한다.
부족했던 점을 다시 메우고, 프로젝트를 본격적으로 개발하기전에 구체적으로 요소 배치등을 계획한 뒤에 시작해보려한다.
그럼 좀 더 효율이 오를 수 있을 것 같다.
728x90
반응형
