[css]
/* td, th {
border: 1px solid black;
} */
.table-background td, th{
padding: 15px;
border-bottom: 1px solid #c2d3de;
color: gray;
text-align: center;
font-size: 10px;
}
.background-blue {
width: 100%;
height: 370px;
background: skyblue;
padding: 30px;
}
.table-background {
width: 100%;
max-width: 600px;
background: white;
border-radius: 10px;
position: relative;
}
.table-background th:nth-child(1) {
/* 테이블의 1번째 나오는 th애들을 모두 다음과 같이 설정.
1번째 열들의 길이만 늘리기. class를 만들 필요 없음. */
width: 400px;
}
/* .cell-long {
테이블 길이 늘리는 클래스.
테이블은 최소 폭이 있다. 글자 깨지면 안돼서.
여기서 width는 거의 max-width역할.
width: 700px;
} */
.button {
color: white;
background-color: rgb(0, 80, 91);
border-radius: 10px;
font-size: 10px;
padding: 10px;
margin-top: 20px;
position: absolute;
right: 0px;
}
[html]
<!DOCTYPE html>
<html>
<head>
<meta chatset="UTF-8">
<title>CART</title>
<link href="css/shopping_cart.css" rel="stylesheet">
</head>
<body>
<div class="background-blue">
<h4>Your shopping cart</h4>
<!-- 테이블(표) -->
<div class="table-background">
<table>
<thead>
<tr>
<th colspan="2">Item</th>
<th>Amount</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="camera.jpg" width="50px"></td>
<td>카메라</td>
<td>1</td>
<td>€1000</td>
<td>€1000</td>
</tr>
<tr>
<td><img src="lens.jpg" width="50px"></td>
<td>렌즈</td>
<td>1</td>
<td>€1000</td>
<td>€1000</td>
</tr>
<tr>
<td colspan="5" style="text-align:right; color: rgb(0, 80, 91); font-weight: bold; border: none">€ 2000.00</td>
</tr>
</tbody>
</table>
<div>
<button class="button">Choose your payment method</button>
</div>
</div>
<div style="float: left;">
<a href="www.naver.com" style="font-size: 10px;">Edit your shopping cart</a>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS] 웹 폰트(커스텀폰트) 넣는 방법 / anti-aliasing (0) | 2023.11.19 |
|---|---|
| [HTML, CSS] pseudo-class 로 클릭 시 스타일 바꾸기 (0) | 2023.11.19 |
| [HTML, CSS 실습] Contact Form 만들기 (1) | 2023.11.17 |
| [HTML, CSS 실습] 블로그 레이아웃 만들기 (0) | 2023.11.16 |
| [HTML, CSS] 레이아웃 만들기 (float, inline-box) (0) | 2023.11.16 |
