카테고리 없음
html을 사용한 쇼핑몰 만들기
popal_kh
2023. 2. 27. 12:08
2022년에 쇼핑몰 사이트를 만들었었습니다.
버튼만 만들고 누르면 따로 이동이 되는 사이트는 아닙니다 @@
사진은 인터넷을 찾아 마음에 드는 것만 넣었습니다.!
html을 배우던 책을 참고하여 만들었는데 엄청 신기했습니다.
네이버 블로그 120_oy를 가시면 제가 만든 더 많은 자료들이 있습니다.
아두이노나, c등 여러 포토폴리오들이 있으니 한번 씩 봐주시면 감사하겠습니당 ㅎㅎ
여기서 css삽입이 안 되어서 사진과 글자들이 티스토리에 입력이 되지 않습니다. ㅠㅠ
코드 복사해서 넣어보시면 첫 화면 처럼 쇼핑몰 웹 페이지가 보이실 겁니다 !!!!!!!!!
(아래와 같은 사이트)
코드는 아래와 같습니다.
(CSS)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body {
background-color: #f7f7f7;
}
#main-section {
height: 100vh;
background-image: url("./images/main.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.Service-name {
display: inline-block;
font-size: 20px;
font-weight: bold;
color: white;
}
.navigation {
z-index: 1000;
position: fixed;
width: 100%;
height: 60px;
background-color: rgba(127,127,127,.7);
padding: 0 40px;
align-items: center;
display:flex;
}
.category-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.left-category-container {
margin-left: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.category {
font-size: 18px;
color:white;
margin-left: 12px;
}
.category > a {
color: inherit;
}
.right-category-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
#main-item-container {
position: relative;
}
.item-data-container {
background-color: white;
display: inline-block;
width: 250px;
border: 1px solid #e5e5e5;
}
.item-data-inner {
padding: 15px;
}
.item-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
font-weight: bold;
}
.item-body > h4 {
font-weight: normal;
text-align: left;
}
.icon-bundle {
align-items: center;
}
.item-expires-container {
border-top:1px solid #e5e5e5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 5px 15px;
font-weight: normal;
}
.item-expires-dday {
display:flex;
flex-direction: row;
align-items: center;
}
.left-day {
color: #fe9090;
margin: 0 6px;
}
.item-expires-container h4 {
font-weight: normal;
}
.grid-container {
width: 1160px;
margin: 0 auto;
}
.col-lg-1 {
width: 250px;
margin: 20px;
padding: 0;
float: left;
}
.grid-container::after {
content: '';
display:block;
clear:left;
}
.aside-item-container {
margin: 20px;
border: 1px solid #f5f5f5;
background-color: white;
display: flex;
flex-direction: row;
}
.item-img{
height: auto;
width: 250px;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
width: 250px
}
.footer
{
height: 100px;
text-align: center;
background-color: #848484
}
.footer p{
font-size: 14px;
padding: 38px;
color: #ffffff
}(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel ="stylesheet" href="./style.css">
<title>Shopping mall</title>
</head>
<body>
<section id="main-section">
<nav class="navigation">
<h1 class="Service-name">Shopping mall</h1>
<div class="category-container">
<ul class="left-category-container">
<li class="category"><a href="#">이용방법</a></li>
<li class="category"><a href="#">구입하기</a></li>
<li class="category"><a href="#">마이페이지</a></li>
<li class="category"><a href="#">고객센터</a></li>
</ul>
<ul class="right-category-container">
<li class="category"><a href="#">Sign-in</a></li>
<li class="category"><a href="#">Sign-UP</a></li>
<li class="category"><img src="./images/search_icon_white.png" alt="검색"></li>
</ul>
</div>
</nav>
</section>
<aside class="aside-item-container">
<div class="arrow"></div>
<ul class="grid-container">
<li class="item col-lg-1"> <!--여기서 부터 제품 여리여리한 분위기 원피스 시작 1열1-->
<img class="item-img" src="./images/style1.JPG"></img>
<div class="item-data-container">
<div class="item-data-inner">
<div class="item-header">
<h3>여리여리한 분위기</h3>
<h5>원피스</h5>
</div>
<div class="item-body">
<h4>10%세일</h4><br>
<div class="icon-bundle">
<img src="./images/button1.jpg" alt="상세보기">
<img src="./images/button2.jpg" alt="장바구니">
<img src="./images/button3.jpg" alt="주문하기">
</div>
</div>
</div>
<div class="item-expires-container">
<h4>By 2022.07.07</h4>
<div class="item-expires-dday">
<img src="./images/timer.png" alt="timer icon">
<h4 class="left-day">5</h4><h4>Days</h4>
</div>
</div>
</div>
</li> <!--여기까지 제품 여리여리한 분위기 원피스 끝-->
<li class="item col-lg-1"> <!--여기서 부터 제품 도트패턴 스타일 원피스 시작 1열1-->
<img class="item-img" src="./images/style2.JPG"></img>
<div class="item-data-container">
<div class="item-data-inner">
<div class="item-header">
<h3>도트패던 스타일 </h3>
<h5>원피스</h5>
</div>
<div class="item-body">
<h4>10%세일</h4><br>
<div class="icon-bundle">
<img src="./images/button1.jpg" alt="상세보기">
<img src="./images/button2.jpg" alt="장바구니">
<img src="./images/button3.jpg" alt="주문하기">
</div>
</div>
</div>
<div class="item-expires-container">
<h4>By 2017.05.01</h4>
<div class="item-expires-dday">
<img src="./images/timer.png" alt="timer icon">
<h4 class="left-day">5</h4><h4>Days</h4>
</div>
</div>
</div>
</li> <!--여기까지 제품 도트패션 스타일 원피스 끝-->
<li class="item col-lg-1"> <!--여기서 부터 제품 봄봄 원피스 시작 1열1-->
<img class="item-img" src="./images/stlye03.JPG"></img>
<div class="item-data-container">
<div class="item-data-inner">
<div class="item-header">
<h3>봄봄봄</h3>
<h5>원피스</h5>
</div>
<div class="item-body">
<h4>10%세일</h4><br>
<div class="icon-bundle">
<img src="./images/button1.jpg" alt="상세보기">
<img src="./images/button2.jpg" alt="장바구니">
<img src="./images/button3.jpg" alt="주문하기">
</div>
</div>
</div>
<div class="item-expires-container">
<h4>By 2017.05.01</h4>
<div class="item-expires-dday">
<img src="./images/timer.png" alt="timer icon">
<h4 class="left-day">5</h4><h4>Days</h4>
</div>
</div>
</div>
</li> <!--여기까지 제품 봄봄봄 원피스 끝-->
<li class="item col-lg-1"> <!--여기서 부터 제품 숄카라 원피스 시작 1열1-->
<img class="item-img" src="./images/style4.JPG"></img>
<div class="item-data-container">
<div class="item-data-inner">
<div class="item-header">
<h3>품격있는 숄카라</h3>
<h5>원피스</h5>
</div>
<div class="item-body">
<h4>10%세일</h4><br>
<div class="icon-bundle">
<img src="./images/button1.jpg" alt="상세보기">
<img src="./images/button2.jpg" alt="장바구니">
<img src="./images/button3.jpg" alt="주문하기">
</div>
</div>
</div>
<div class="item-expires-container">
<h4>By 2017.05.01</h4>
<div class="item-expires-dday">
<img src="./images/timer.png" alt="timer icon">
<h4 class="left-day">5</h4><h4>Days</h4>
</div>
</div>
</div>
</li> <!--여기까지 제품 품격있는 숄카라 원피스 끝-->
</ul>
</aside>
<footer class="footer">
<p>Copyright (C) Shopping mall Company. All rights reserved</p>
</footer>
</body>
</html>