semanticcss.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>시맨틱 태그-CSS</title>
<style>
/*
*/
header {
background: #f6f5ef;
margin: 5px auto;
/* background-image: url('./images/logo.jpg'); */
}
header > nav {
display: inline-block;
width: 60%;
height: 100%;
border: 1px solid;
position: absolute;
top: 0px;
right: 0px;
}
section {
background-color: #eef2f3;
width: 1100px;
height: 500px;
margin-bottom: 5px;
position: relative;
}
section > div {
width: 60%;
height: 100%;
float: left;
}
section > div > article.one {
background-color: #b3ffd9;
width: 400px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
}
section > div > article.two {
background-color: #1e3932;
color: white;
width: 400px;
height: 200px;
position: absolute;
top: 250px;
left: 0px;
}
section > div > aside {
width: 80px;
height: 100%;
float: right;
}
header > nav.small {
display: none;
}
@media screen and (min-width: 641px) and (max-width: 960px) {
header > nav.small {
display: inline-block;
}
header > nav.large {
display: none;
}
}
footer {background-color: #2c2a29; color: #fff;}
header, footer {height: 100px;}
</style>
</head>
<body>
<header>
<h1>STARBUCKS</h1>
<nav class="large">
<ul>
<li><a href="login.html">로그인</a></li>
<li><a href="signup.html">회원가입</a></li>
<li><a href="productlist.html">상품목록</a></li>
<li><a href="viewcart.html">장바구니</a></li>
</ul>
</nav>
<nav class="small">
<ul>
<li><a href="login.html">로그인</a></li>
<li><a href="signup.html">회원가입</a></li>
</ul>
</nav>
</header>
<section>
<div>
<article class="one"><!-- 본문 내용-->
스타벅스만의 특별한 혜택, 스타벅스 <mark>리워드</mark>
스타벅스 회원이세요? 로그인을 통해 나만의 리워드를 확인해보세요.
스타벅스 회원이 아니세요? 가입을 통해 리워드 혜택을 즐기세요.
</article>
<article class="two"><!-- 본문 내용-->
가을의 시작을 함꼐할 애니버서리 블렌드. 묵직한 바디감과 스파이시한 끝맛이 매력적인 애니버서리 블렌드를 만나보세요.
</article>
<aside><!-- 광고 -->
나의큐피트를 받아줘
<div>
<img src="https://image.istarbucks.co.kr/upload/banner/floatingbnr/Mn0ecH_20220711153123340.png" alt="B2B 기업 구매 페이지" class="pc-badge">
</div>
</aside>
</div>
</section>
<footer>
사업자등록번호 : 201-81-21515 주식회사 에스씨케이컴퍼니 대표이사 : 손정현 TEL : 1522-3232 개인정보 책임자 : 이찬우
ⓒ 2023 Starbucks Coffee Company. All Rights Reserved.
</footer>
</body>
</html>
prodcutdetail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.producdetail {
box-sizing: border-box;
width: 100%;
height: 300px;
}
div.productdetail > div.productdetail_img {
width: 35%;
float: left;
}
div.productdetail>div.productdetail_info {
width: 76%;
float: right;
}
div.productdetail>div.productdetail_info>form>ul {
list-style-type: none;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="productdetail">
<div class="productdetail_img">
<img src="images/americano.jpg" alt="">
</div>
<div class="productdetail_info">
<h1>아메리카노</h1>
<hr>
<form action="">
<input type="hidden" name="prod_no" value="C0001">
<ul>
<li>강렬한 에스프레소샷에 뜨거운 물의 조화</li>
<li>가격 : 1,000</li>
<li>수량: <input name="quantity" type="number" min="1" max="10"></li>
<li><input type="submit" value="장바구니 넣기"></li>
</ul>
</form>
</div>
</div>
</body>
</html>
viewcart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.viewcart {
box-sizing: border-box;
width: 100%;
height: 300px;
}
div.viewcart > table {
width: 50%;
border-collapse: collapse;
/* border: 1px solid; */
}
div.viewcart > table, div.viewcart > table td, div.viewcart > table th {
border: 1px solid;
}
div.viewcart > table td.prod_price,
div.viewcart > table td.quantity,
div.viewcart > table td.amount,
div.viewcart > table td.total_amount {
text-align: right;
}
div.viewcart > table td.total_amount {
font-weight: bold;
color: red;
border-color: black;
}
</style>
</head>
<body>
<div class="viewcart">
<h1>장바구니</h1>
<table>
<tr>
<th>상품번호</th>
<th>상품명</th>
<th>가격</th>
<th>수량</th>
<th>금액</th>
</tr>
<tr>
<td>C0001</td>
<td>아메리카노</td>
<td class="prod_price">3,500</td>
<td class="quantity">3</td>
<td class="amount">9,000</td>
</tr>
<tr>
<td>C0002</td>
<td>바닐라라떼</td>
<td class="prod_price">4,500</td>
<td class="quantity">1</td>
<td class="amount">4,500</td>
</tr>
<tr>
<td colspan="5" class="total_amount">총 금액: 13,500</td>
</tr>
</table>
<form action="">
<input type="submit" value="주문하기">
</form>
</div>
</body>
</html>
vieworder.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div.vieworder {
box-sizing: border-box;
width: 100%;
height: 300px;
}
div.vieworder > table {
border-collapse: collapse;
}
div.vieworder > table, div.vieworder>table td {
border: 1px solid;
}
</style>
</head>
<body>
<div class="vieworder">
<h1>주문내역</h1>
<table>
<tr>
<th>주문번호</th>
<th>주문일자</th>
<th>상품번호</th>
<th>상품명</th>
<th>가격</th>
</tr>
<tr>
<td>15</td>
<td>23/09/11</td>
<td>C0001</td>
<td>아메리카노</td>
<td>3,500</td>
</tr>
</table>
</div>
</body>
</html>
'자바웹개발' 카테고리의 다른 글
| 톰캣 설치 및 web 프론트엔드 구현 (0) | 2023.09.17 |
|---|---|
| 테이블 설계 (0) | 2023.09.16 |
| 댓글가능게시판 구현 (0) | 2022.05.22 |
