🤣🤣🤣제발 이거보고 따라치지말고 혼자 힘으로 해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="cart-background">
<h3>Your shopping cart</h3>
<table class="cart-table">
<thead>
<tr>
<th></th>
<th class="cell-long">Item</th>
<th>Amount</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/camera01.png" style="width: 50px"></td>
<td>카메라</td>
<td>1</td>
<td>7000</td>
<td>7000</td>
</tr>
<tr>
<td><img src="img/camera02.png" style="width: 50px"></td>
<td>카메라</td>
<td>1</td>
<td>7000</td>
<td>7000</td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">총 가격 : 14000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
.cart-background{
width: 100%;
background-color: #c2d3de;
padding: 30px;
}
.cart-table {
width: 100%;
max-width: 700px;
margin: auto;
background: white;
border-radius: 10px;
}
.cart-table td , .cart-table th{
padding: 15px;
border-bottom: 1px solid #c2d3de;
}
/*
.cell-long {
width: 700px;
}
*/
.cart-table th:nth-child(2){
width: 700px;
}
nth-child 셀렉터
.cart-table th:nth-child(2){
width: 700px;
}
여러 요소를 찾은 다음
원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 이걸 뒤에 붙여주면 됩니다.
위의 코드는 그래서 .cart-table 안에 있는 모든 td를 찾은 다음
2번째 나오는 td에만 width를 변경 할 수 있습니다.
.cart-table td:nth-child(even) {
color: red;
}
이러면 짝수로 등장하는 td에만 스타일을 줄 수도 있고
(odd라고 쓰면 홀수입니다)
테두리 색상은 밑에만 넣고 싶으면
td, th {
border-bottom : 1px solid black;
}
셀 블록마다 width를 설정해줄 수 있습니다.
<table>
<tr>
<td class="name">상품명</td>
<td class="price">가격</td>
<td>수량</td>
</tr>
</table>
<style>
.name {
width : 50%
}
.price {
width : 20%
}
</style>
하나의 td에 width를 주어도 전체 열의 width가 변합니다.
td 여러개를 합치고 싶으면
<td colspan="4"></td>
간혹 border-collapse 속성을 table태그에 적용하면 border-radius가 안먹는 경우가 있습니다.
그럴 때 사용할만한 방법들을 소개해드립니다.
table 태그에 border-radius가 안먹을 때 1.
table {
border-collapse : collapse;
border-spacing : 0;
}
(왼쪽위에있는 td) {
border-top-left-radius : 5px;
}
table 태그에 border-radius가 안먹을 때 2.
table {
border-collapse : collapse;
border-radius : 7px;
border-style : hidden;
box-shadow : 0 0 0 1px #666;
}
box-shadow라는 속성을 이용해 테두리를 가짜로 만들어내는 편법입니다.
Last updated