✿∘˚˳°∘°
39일차/40일차 : [실습]팀프로젝트 본문
20230119
- 사과마켓(유저거래홈페이지-과일만) 만들기
- 내가 한 파트 : 마이페이지(전체) / 마이페이지(내정보) / 나의 판매 목록
1. 마이페이지(전체)
<!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="css/appl_common.css">
<link rel="stylesheet" href="css/mypage.css">
</head>
<body>
<div class="wrap">
<div class="header">
<div class="header-top">
<div class="header-main">
<div class="logo"><a href="사과마켓[메인].html">사과마켓</a></div>
<div class="menu">
<ul>
<li><a href="product.html">판매상품</a></li>
<li><a href="사과마켓-내주변상점.html">동네상점</a></li>
<li><a href="sale.html">판매하기</a></li>
<li><a href="사과마켓-친구초대.html">친구초대</a></li>
<li><a href="cCenter-main.html">고객센터</a></li>
</ul>
</div>
<div class="serch-box">
<form action="serch.html" method="post" id="search-frm">
<div class="serch-input-box">
<input type="text" name="검색" placeholder=" 상품이나 동네를 검색해보세요.">
</div>
<div class="btn-box">
<input type="submit" name="버튼" value="검색">
</div>
</form>
<div class="link-wrap">
<a href="#">로그인</a>
<a href="#">회원가입</a>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<h1>MYPAGE</h1>
<div class="content-top">
<div class="content-top-left">
<ul>
<li><img src="image/user.png"></li>
<li><a>야호</a>
<a href="내정보.html"><img src="image/apple.png"></a></li>
<li><a href="판매목록.html">판매물품</a></li>
</ul>
</div>
<div class="content-top-right">
<div class="applePay-box">
<div class="pay">
<span class="pay-text">사과페이머니<img src="image/apple.png"></span>
<span>10,000원</span>
<div class="pay-button">
<button type="button">충전</button>
<button type="button">송금</button>
</div>
</div>
</div>
<div class="my-menu">
<div class="icon-wrap">
<div class="icon 1">
관심목록
<img src="image/heart.png">
</div>
<div class="icon 2">
판매내역
<img src="image/sellicon.png">
</div>
<div class="icon 3">
구매내역
<img src="image/buy-icon.png">
</div>
<div class="icon 4">
쿠폰함
<img src="image/coupon.png">
</div>
</div>
</div>
<div class="my-intro">안녕하세요. 마이페이지 입니다.</div>
</div>
</div>
<div class="content-bottom">
<div class="bt-menu">
<ul class="top-menu">
<li><a href="#">나의 글/댓글</a></li>
<li><a href="#">최근 본 상품</a></li>
<li><a href="사과마켓-내가받은거래후기.html">거래 후기</a></li>
<li><a href="#">1:1 문의</a></li>
</ul>
</div>
<div class="menu-content-wrap">
<div class="bt-menu-content-type">
<a href="#">글목록</a>
<a href="#">댓글목록</a>
</div>
<div class="bt-menu-content">
<a href="#">안녕안녕</a>
<a href="#">게시글 입니다.</a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="foot-header">
<p>(주)사과마켓</p>
<p>담당자 : 김범진 김홍미 신혜빈 정은아 허샛별</p>
<p>주소 : 서울시 영등포구 당산동</p>
<p>전화번호 : 02-4343-4545</p>
<div class="foot-logo">
<h2>사과마켓</h2>
</div>
</div>
<div class="foot-bottom">
<ul class="link">
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">위치기반서비스 이용약관</a></li>
</ul>
<div class="sns-icon">
<img src="image/인스타그램.png" width="35px">
<img src="image/페이스북.png" width="35px">
<img src="image/유튜브.png" width="35px">
</div>
</div>
</div>
</div>
</body>
</html>body{
margin: 0;
}
@font-face{
font-family: jalnan;
src: url(../ygot_font/JalnanOTF.otf);
}
.content{
overflow: hidden;
padding-top:150px;
}
.content>h1{
font-family: jalnan;
text-align: center;
margin-top: 60px;
color:#820000;
}
.content-top{
width: 800px;
height: 300px;
border: 1px solid #f2deba;
margin: 100px auto;
overflow: hidden;
border-radius: 5px;
}
.content-top-left{
float: left;
width:300px;
height: 300px;
background-color:#faecd6;
border-right: 1px solid #f2deba;
opacity: 100%;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.content-top-left>ul{
list-style-type: none;
}
.content-top-left>ul>li{
text-align: center;
padding-top: 15px;
padding-right: 40px;
}
.content-top-left>ul>li img{
width: 20px;
height: 20px;
}
.content-top-left>ul>li>img{
width: 100px;
height: 100px;
}
.content-top-left>ul>li>a{
font-family: jalnan;
color: black;
font-size: 20px;
font-weight: bold;
}
.content-top-left>ul>li:last-child{
padding-top:30px;
}
.content-top-left>ul>li:last-child>a{
font-family: jalnan;
line-height: 10px;
background-color: #820000;
padding: 10px;
font-size: 15px;
border-radius: 5px;
cursor: pointer;
color: white;
}
.content-top-right{
float: right;
width: 500px;
height: 300px;
}
.applePay-box{
width: 100%;
height: 80px;
background-color: white;
box-sizing: border-box;
padding: 10px;
}
.pay{
overflow: hidden;
}
.pay-text{
font-family: jalnan;
font-weight: bold;
font-size: 20px;
display: block;
}
.pay-text>img{
width: 15px;
height: 15px;
}
.pay-button{
float: right;
}
.pay-button>button{
font-family: jalnan;
width: 70px;
height: 30px;
margin-left: 10px;
background-color: #820000;
border: none;
border-radius: 20px;
color: white;
font-weight: bold;
font-size: 16px;
}
.my-menu{
width: 100%;
background-color: white;
box-sizing: border-box;
}
.icon-wrap{
margin: 0 auto;
overflow: hidden;
padding: 10px 30px;
border-top: 1px solid #f2deba;
border-bottom: 1px solid #f2deba;
background-color: #faecd6;
}
.icon{
font-family: jalnan;
width: 90px;
box-sizing: border-box;
float: left;
padding: 10px;
text-align: center;
line-height: 20px;
margin: 0 10px;
color: #820000;
font-weight: bold;
}
.my-menu img{
width: 20px;
height: 20px;
padding-top: 8px;
}
.my-intro{
width: 100%;
height: 128px;
padding: 20px;
box-sizing: border-box;
background-color: white;
}
.content-bottom{
width: 900px;
margin: 90px auto;
}
.bt-menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.top-menu{
width: 100%;
overflow: hidden;
background-color: #820000;
}
.bt-menu>ul>li{
float: left;
}
.bt-menu>ul>li>a{
font-family: jalnan;
text-decoration: none;
font-size: 16px;
display: block;
width: 150px;
height: 50px;
line-height: 50px;
background-color: #820000;
color: #faecd6;
font-weight: bold;
text-align: center;
}
.top-menu>li>a:hover{
background-color: white;
color:#820000;
}
.bt-menu-content-type{
width: 100%;
height: 50px;
padding-left: 30px;
box-sizing: border-box;
line-height: 50px;
border-bottom: 2px solid #820000;
}
.menu-content-wrap a{
text-decoration: none;
display: inline-block;
width: 80px;
font-family: jalnan;
font-weight: bold;
cursor: pointer;
color:#e0e0e0;
}
.bt-menu-content-type>a:focus{
color:#820000;
}
.bt-menu-content{
height: 100px;
padding-left: 30px;
box-sizing: border-box;
padding-top: 20px;
}
.bt-menu-content>a{
width: 800px;
display: block;
color:black;
font-weight: lighter;
padding-top:10px;
}
.bt-menu-content>a:hover{
color:#4e6c50;
}
2. 마이페이지(내정보) - 수정예정
<!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="css/appl_common.css">
<link rel="stylesheet" href="css/myinfo.css">
</head>
<body>
<div class="header">
<div class="header-top">
<div class="header-main">
<div class="logo"><a href="사과마켓[메인].html">사과마켓</a></div>
<div class="menu">
<ul>
<li><a href="product.html">판매상품</a></li>
<li><a href="사과마켓-내주변상점.html">동네상점</a></li>
<li><a href="sale.html">판매하기</a></li>
<li><a href="사과마켓-친구초대.html">친구초대</a></li>
<li><a href="cCenter-main.html">고객센터</a></li>
</ul>
</div>
<div class="serch-box">
<form action="serch.html" method="post" id="search-frm">
<div class="serch-input-box">
<input type="text" name="검색" placeholder=" 상품이나 동네를 검색해보세요.">
</div>
<div class="btn-box">
<input type="submit" name="버튼" value="검색">
</div>
</form>
<div class="link-wrap">
<a href="#">로그인</a>
<a href="#">회원가입</a>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<h1>MYPAGE</h1>
<div class="info-wrap">
<div class="content-top">
<div class="img-box">
<img src="image/user.png">
</div>
<div class="simple-info">
<ul>
<li><a>야호</a></li>
<li><a>#230120</a><a>MVIP</a></li>
<li><a>프로필 변경</a></li>
</ul>
</div>
</div>
<div class="content-bottom">
<div class="detail-info">
<table>
<tr>
<th colspan="3">내프로필</th>
</tr>
<tr>
<th>이름</th>
<td width="500px" ></th>
</tr>
<tr>
<th>전화번호</th>
<td></th>
</tr>
<div class="sns">
<tr>
<th>Email</th>
<td></td>
</tr>
</div>
</table>
</div>
<div class="info-menu">
<ul>
<li><a href="#">활동 배지</a></li>
<li><a href="#">받은 매너 평가</a></li>
<li><a href="#">받은 거래 후기</a></li>
<li><a href="#">본인인증</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="foot-header">
<p>(주)사과마켓</p>
<p>담당자 : 김범진 김홍미 신혜빈 정은아 허샛별</p>
<p>주소 : 서울시 영등포구 당산동</p>
<p>전화번호 : 02-4343-4545</p>
<div class="foot-logo">
<h2>사과마켓</h2>
</div>
</div>
<div class="foot-bottom">
<ul class="link">
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">위치기반서비스 이용약관</a></li>
</ul>
<div class="sns-icon">
<img src="image/인스타그램.png" width="35px">
<img src="image/페이스북.png" width="35px">
<img src="image/유튜브.png" width="35px">
</div>
</div>
</div>
</body>
</html>body{
margin: 0;
}
@font-face{
font-family: jalnan;
src: url(../ygot_font/JalnanOTF.otf);
}
.content{
padding: 150px;
}
.content>h1{
font-family: jalnan;
text-align: center;
margin-top: 60px;
color:#820000;
}
.info-wrap{
width: 800px;
margin: 0 auto;
}
.content-top{
width: 600px;
height: 200px;
margin: 0 auto;
padding: 50px 80px;
box-sizing: border-box;
}
.img-box>img{
width: 100px;
height: 100px;
}
.simple-info>ul{
list-style-type: none;
margin: 0 auto;
}
.simple-info>ul>li{
padding: 3px;
}
.simple-info>ul>li:first-child>a{
font-size: 20px;
font-weight: bold;
color: black;
}
.simple-info>ul>li:last-child>a:hover{
cursor: pointer;
font-weight: bold;
}
.content-top>div{
float: left;
}
.content-bottom{
height: 600px;
border-top: 2px dashed #820000;
}
.detail-info{
width: 80%;
height: 300px;
background-color: #820000;
margin: 50px auto;
}
table{
width: 100%;
height: 80%;
background-color: #820000;
}
th{
font-family: jalnan;
font-size: 15px;
color:#820000;
background-color: #faecd6;
}
tr:first-child{
background-color: #faecd6;
}
tr{
border-bottom: 1px solid #820000;
}
td{
background-color: white;
}
.info-menu{
width: 100%;
background-color: antiquewhite;
margin: 0 auto;
}
.info-menu>ul{
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid #820000;
}
.info-menu>ul>li{
width: 100%;
height: calc(100%/4);
padding: 15px;
padding-left: 0;
box-sizing: border-box;
}
.info-menu>ul>li>a{
font-family: jalnan;
text-decoration: none;
color: #4e6c50;
padding-left: 25px;
font-weight: bold;
}
.info-menu>ul>li:nth-child(2n){
background-color: white;
}
.info-menu>ul>li:nth-child(2n)>a{
color:#820000;
}
3. 판매목록
<!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="css/appl_common.css">
<link rel="stylesheet" href="css/sell-list.css">
</head>
<body>
<div class="header">
<div class="header-top">
<div class="header-main">
<div class="logo"><a href="사과마켓[메인].html">사과마켓</a></div>
<div class="menu">
<ul>
<li><a href="product.html">판매상품</a></li>
<li><a href="사과마켓-내주변상점.html">동네상점</a></li>
<li><a href="sale.html">판매하기</a></li>
<li><a href="사과마켓-친구초대.html">친구초대</a></li>
<li><a href="cCenter-main.html">고객센터</a></li>
</ul>
</div>
<div class="serch-box">
<form action="serch.html" method="post" id="search-frm">
<div class="serch-input-box">
<input type="text" name="검색" placeholder=" 상품이나 동네를 검색해보세요.">
</div>
<div class="btn-box">
<input type="submit" name="버튼" value="검색">
</div>
</form>
<div class="link-wrap">
<a href="#">로그인</a>
<a href="#">회원가입</a>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-top-wrap">
<div class="nav">
<ul>
<li><a href="#">판매중</a></li>
<li><a href="#">판매완료</a></li>
<li><a href="#">숨김</a></li>
</ul>
</div>
</div>
<div class="sell-list">
<h1>LIST</h2>
<div class="product">
<a href="#">
<div class="img-box">
<img src="image/salesimg1.jpg">
</div>
<div class="sell-info">
<div class="pd-name"><a>24인치 딸기</a></div>
<div class="pd-price"><a>270,000원</a></div>
<div class="pd-addr"><a>서울시 동작구</a></div>
<div class="view-icon">
<img src="image/eye.png"> 0
<img src="image/heart-gray.png"> 0
</div>
<div class="upload-date"><a>2023-01-20</a></div>
</div>
</a>
</div>
<div class="product">
<a href="#">
<div class="img-box">
<img src="image/salesimg2.jpg">
</div>
<div class="sell-info">
<div class="pd-name"><a>레라임</a></div>
<div class="pd-price"><a>970,000원</a></div>
<div class="pd-addr"><a>서울시 동작구</a></div>
<div class="view-icon">
<img src="image/eye.png"> 0
<img src="image/heart-gray.png"> 0
</div>
<div class="upload-date"><a>2023-01-20</a></div>
</div>
</a>
</div>
<div class="product">
<a href="#">
<div class="img-box">
<img src="image/salesimg3.jpg">
</div>
<div class="sell-info">
<div class="pd-name"><a>귤</a></div>
<div class="pd-price"><a>170,000원</a></div>
<div class="pd-addr"><a>서울시 동작구</a></div>
<div class="view-icon">
<img src="image/eye.png"> 0
<img src="image/heart-gray.png"> 0
</div>
<div class="upload-date"><a>2023-01-20</a></div>
</div>
</a>
</div>
<div class="product">
<a href="#">
<div class="img-box">
<img src="image/salesimg4.jpg">
</div>
<div class="sell-info">
<div class="pd-name"><a>체리</a></div>
<div class="pd-price"><a>560,000원</a></div>
<div class="pd-addr"><a>서울시 동작구</a></div>
<div class="view-icon">
<img src="image/eye.png"> 0
<img src="image/heart-gray.png"> 0
</div>
<div class="upload-date"><a>2023-01-20</a></div>
</div>
</a>
</div>
<div class="product">
<a href="#">
<div class="img-box">
<img src="image/salesimg5.jpg">
</div>
<div class="sell-info">
<div class="pd-name"><a>금사과</a></div>
<div class="pd-price"><a>50,000원</a></div>
<div class="pd-addr"><a>서울시 동작구</a></div>
<div class="view-icon">
<img src="image/eye.png"> 0
<img src="image/heart-gray.png"> 0
</div>
<div class="upload-date"><a>2023-01-20</a></div>
</div>
</a>
</div>
<div class="product">
<a href="#">
<div class="img-box">
<img src="image/salesimg6.jpg">
</div>
<div class="sell-info">
<div class="pd-name"><a>애플망고</a></div>
<div class="pd-price"><a>1,000원</a></div>
<div class="pd-addr"><a>서울시 동작구</a></div>
<div class="view-icon">
<img src="image/eye.png"> 0
<img src="image/heart-gray.png"> 0
</div>
<div class="upload-date"><a>2023-01-20</a></div>
</div>
</a>
</div>
</div>
</div>
<div class="footer">
<div class="foot-header">
<p>(주)사과마켓</p>
<p>담당자 : 김범진 김홍미 신혜빈 정은아 허샛별</p>
<p>주소 : 서울시 영등포구 당산동</p>
<p>전화번호 : 02-4343-4545</p>
<div class="foot-logo">
<h2>사과마켓</h2>
</div>
</div>
<div class="foot-bottom">
<ul class="link">
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">위치기반서비스 이용약관</a></li>
</ul>
<div class="sns-icon">
<img src="image/인스타그램.png" width="35px">
<img src="image/페이스북.png" width="35px">
<img src="image/유튜브.png" width="35px">
</div>
</div>
</div>
</body>
</html>body{
margin: 0;
}
@font-face{
font-family: jalnan;
src: url(../ygot_font/JalnanOTF.otf);
}
.content{
width: 1200px;
margin: 0 auto;
padding: 150px;
}
.content-top{
width: 100%;
box-sizing: border-box;
overflow: hidden;
border-bottom: 1px solid #820000;
}
.sel-logo{
width: 200px;
height: 85px;
float: left;
text-align: center;
}
.user-icon{
width: 100px;
height: 85px;
float: right;
}
.user-icon>img{
width: 50px;
height: 50px;
margin: 20px;
}
.nav{
width: 100%;
background-color: #820000;
}
.nav ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.nav>ul{
overflow: hidden;
border-bottom: 1px solid #820000;
}
.nav>ul>li{
float: left;
}
.nav>ul>li>a{
font-family: jalnan;
display: block;
width: 150px;
height: 40px;
text-decoration: none;
color: #faecd6;
font-size: 17px;
line-height: 40px;
text-align: center;
}
.nav>ul>li>a:focus{
background-color: #faecd6;
color:#820000;
font-weight: bold;
}
.sell-list{
overflow: hidden;
}
.sell-list>h1{
font-family: jalnan;
text-align: center;
margin-top: 60px;
color:#820000;
}
.product{
float: left;
width: 300px;
border: 1px solid #f2deba;
border-radius: 10px;
margin: 50px 48px;
}
.product>a{
text-decoration: 0;
color: black;
display: block;
padding: 30px;
box-sizing: border-box;
padding-bottom: 0px;
}
.img-box{
width: 100%;
margin: 0 auto;
}
.img-box>img{
width: 100%;
padding-bottom: 10px;
border-radius: 5px;
}
.view-icon>img{
width: 15px;
height: 15px;
}
.sell-info>div{
padding-bottom: 2px;
margin-left: 30px;
font-size: 19px;
}
.pd-price{
font-weight: bold;
}
.pd-addr>a{
font-size: 12px;
}
.view-icon, .upload-date{
color: #e0e0e0;
font-size: 3px;
}
.upload-date>a{
float: right;
padding-right: 10px;
margin-bottom: 20px;
font-size: 15px;
}
[ 후기 ] ---------------------------------------------------------------------------------------------------------------------------------------
후기 너무 오랜만에 쓴다ㅠㅠㅠㅠㅠ 이번주는 진짜 너무너무너무너무 정신없고 바빳다.
팀플 할때는 너무힘들어서 매일 울고싶었는데 막상 완성본을 보니까 너무 마음에들고 뿌듯해서 뭔가 할만한것 같았다ㅎ
CSS가 의외로 어려워서 놀랐고 다들 잘하는데 나만 못하는게 굉장히 자괴감이 들었지만~~ 열심히 복습해보니까
이제 어느정도는 만들 수 있게 됐다. 오늘로 HTML/CSS수업이 끝났는데 금방 잊어버릴 것 같아서 복습을 자주해야겠다.
'국비수업 > 프로젝트' 카테고리의 다른 글
| 81일차 ~ 110일차 : FINAL-PROJECT (0) | 2023.06.26 |
|---|---|
| 62일차 ~ 72일차 : SEMI-PROJECT(+UML) (0) | 2023.03.14 |
| 30일차 : 팀프로젝트 - SHOP프로그램 구현 (0) | 2023.01.07 |
Comments