<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web shop</title>
<!-- 외부스타일 시트 연동 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<h1>
<img src="./image/shop.png" alt="shop" width="50" height="50">
<a href="./index.html"> WEB SHOP</a>
</h1>
</header>
<nav>
<ul>
<li><a href="./index.html">HOME</a></li>
<li><a href="./about.html">ABOUT US</a></li>
<li><a href="./news.html">NEWS</a></li>
<li><a href="./account.html">MY ACCOUNT</a></li>
<li><a href="./contents.html">CONTENTS</a></li>
</ul>
</nav>
<aside class="left">
<h4>카테고리</h4>
<ul>
<li><a href="./computer.html" target="iframe1">컴퓨터</a></li>
<li><a href="./clothing.html" target="iframe1">의류</a></li>
<li><a href="./music.html" target="iframe1">음악</a></li>
<li><a href="./movies.html" target="iframe1">영화</a></li>
<li><a href="./sports.html" target="iframe1">스포츠/레저</a></li>
<li><a href="./interier.html" target="iframe1">가구/인테리어</a></li>
<li><a href="./food.html" target="iframe1">식품</a></li>
</ul>
</aside>
<section>
<article>
<iframe name="iframe1" src="./computer.html" frameborder="0" width="450" height="500"></iframe>
</article>
</section>
<aside class="right">
<div id="shopcart">
<h4>Shopping Cart</h4>
현재 쇼핑카트에 물품이 없습니다.<br>
<a href="./shopcart.html">쇼핑카트 보기</a>
</div>
<div id="login">
<h4>Log In</h4>
<form action="./php/login.php" method="post" enctype="application/x-www-form-urlencoded">
아이디
<input type="text"> <br>
패스워드
<input type="password"> <br>
<input type="submit" value="로그인">
<input type="reset" value="초기화">
</form>
<a href="./register.html" target="_blank">회원가입</a>
<a href="./forgetpw.html" target="_blank">비밀번호분실</a>
</div>
</aside>
<footer>
Copyright © 2023 Web Shop
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.product{
width: 200px;
float: left;
}
</style>
</head>
<body>
<div class="product">
<img src="./image/computer.png" alt="computer" width="100" height="100">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi in minima, nesciunt similique tempora ab quod exercitationem ducimus eveniet quibusdam saepe maiores architecto! Vero corrupti architecto sed dolor. Ratione, laudantium.
</p>
<input type="button" value="쇼핑카트에 추가하기">
</div>
<div class="product">
<img src="./image/notebook.png" alt="notebook" width="100" height="100">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi in minima, nesciunt similique tempora ab quod exercitationem ducimus eveniet quibusdam saepe maiores architecto! Vero corrupti architecto sed dolor. Ratione, laudantium.
</p>
<input type="button" value="쇼핑카트에 추가하기">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.product{
width: 200px;
float: left;
}
</style>
</head>
<body>
<div class="product">
<img src="./image/tshirt.png" alt="tshirt" width="100" height="100">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi in minima, nesciunt similique tempora ab quod exercitationem ducimus eveniet quibusdam saepe maiores architecto! Vero corrupti architecto sed dolor. Ratione, laudantium.
</p>
<input type="button" value="쇼핑카트에 추가하기">
</div>
<div class="product">
<img src="./image/tshirt.png" alt="tshirt" width="100" height="100">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi in minima, nesciunt similique tempora ab quod exercitationem ducimus eveniet quibusdam saepe maiores architecto! Vero corrupti architecto sed dolor. Ratione, laudantium.
</p>
<input type="button" value="쇼핑카트에 추가하기">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h4>음원 파일 선택</h4>
<audio controls>
<source src="./audio/old_pop.mp3" type="audio/mpeg">
</audio>
<button onclick="">쇼핑카트에 추가하기</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<style>
h4, video{
padding: 0; margin: 0;
}
</style>
<h4>movie select</h4>
<video controls width="300" height="200">
<source src="./video/movie.mp4" type="video/mp4">
<source src="./video/movie.ogv" type="video/ogg">
<source src="./video/moview.webm" type="video/webm">
</video>
<br>
<button>쇼핑카트에 추가하기</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>register</title>
<link rel="stylesheet" href="./css/register.css">
</head>
<body>
<div id="page=wrap">
<form method="post" action="process.jsp">
<fieldset>
<legend>회원정보입력</legend>
<label for="name">아이디</label>
<input type="text" name="name" id="text1">
<button>중복검사</button> <br>
<label for="password">패스워드</label>
<input type="password" name="password1"> <br>
<label for="password">패스워드확인</label>
<input type="password" name="password2"> <br>
<label for="neme">이름</label>
<input type="text" name="name"> <br>
<label for="tel">휴대폰 번호</label>
<input type="tel" name="tel"> <br>
<label for="email">이메일</label>
<input type="email" name="email"> <br>
<label for="dob">생일</label>
<input type="date" name="dob"> <br>
<label for="url">홈페이지</label>
<input type="url" name="url"> <br>
<input type="radio" name="gender" value="Male">
남성 <br>
<input type="radio" name="gender" value="Female">
여성 <br>
</fieldset>
<input type="submit" name="submit" value="제출">
<input type="reset" name="reset" value="초기화">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>쇼핑 카트</title>
<link rel="stylesheet" href="./css/shopcart.css">
</head>
<body>
<form action="#">
<table border="1">
<caption>shopping cart</caption>
<tr>
<th>품목</th>
<th>가격</th>
<th>수량</th>
<th>합계</th>
</tr>
<tr>
<td>컴퓨터 세트</td>
<td>2,000,000원</td>
<td><input type="number" min="0" step="1" value="0"></td>
<td><input type="text" size="6" value="0"></td>
</tr>
<tr>
<td>티셔츠</td>
<td>50,000원</td>
<td><input type="number" min="0" step="1" value="0"></td>
<td><input type="text" size="6" value="0"></td>
</tr>
<tr>
<td>음악파일</td>
<td>1,000원</td>
<td><input type="number" min="0" step="1" value="0"></td>
<td><input type="text" size="6" value="0"></td>
</tr>
<tr>
<td>영화파일</td>
<td>5,000원</td>
<td><input type="number" min="0" step="1" value="0"></td>
<td><input type="text" size="6" value="0"></td>
</tr>
</table>
<input type="button" value="계산">
<input type="submit" value="구매">
<input type="reset" value="초기화">
</form>
<a href="./index.html">back to home</a>
</body>
</html>
'CSS' 카테고리의 다른 글
| Web App: 반응형웹02 (1) | 2023.10.30 |
|---|---|
| Web App: 반응형웹01 (0) | 2023.10.30 |
| CSS-D5 (0) | 2023.10.30 |
| CSS-D04 (0) | 2023.10.27 |
| CSS-D03 (0) | 2023.10.26 |