Table 실습
🤣🤣🤣제발 이거보고 따라치지말고 혼자 힘으로 해보기<!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>nth-child 셀렉터
여러 요소를 찾은 다음
원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 이걸 뒤에 붙여주면 됩니다.
위의 코드는 그래서 .cart-table 안에 있는 모든 td를 찾은 다음
2번째 나오는 td에만 width를 변경 할 수 있습니다.
이러면 짝수로 등장하는 td에만 스타일을 줄 수도 있고
(odd라고 쓰면 홀수입니다)
테두리 색상은 밑에만 넣고 싶으면
셀 블록마다 width를 설정해줄 수 있습니다.
하나의 td에 width를 주어도 전체 열의 width가 변합니다.
td 여러개를 합치고 싶으면
간혹 border-collapse 속성을 table태그에 적용하면 border-radius가 안먹는 경우가 있습니다.
그럴 때 사용할만한 방법들을 소개해드립니다.
table 태그에 border-radius가 안먹을 때 1.
table 태그에 border-radius가 안먹을 때 2.
box-shadow라는 속성을 이용해 테두리를 가짜로 만들어내는 편법입니다.
Last updated