[HTML/CSS] Table 레이아웃 숙제 : Cart 페이지 만들기

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 nth-child 셀렉터

:nth-child(n) : 여러 요소 중 원하는 n번째 요소만 스타일을 주고 싶을 때 사용

.cart-table td:nth-child(2) {
  color: red;
}

.cart-table 안에 있는 모든 td를 찾은 다음 2번째 나오는 td에만 color

.cart-table td:nth-child(even) {
  color: red;
}

• even : 짝수
• odd : 홀수

.cart-table td:nth-child(3n+0) {
  color: red;
}

이러면 3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있음
3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일을 줄 수 있음

💫 셀 합치기

• 가로 셀 합치기

<td colspan="4"></td>

<td colspan="n"> : n만큼 가로로 셀 합치기

• 세로 셀 합치기

<td rowspan='2'></td>

<td rowspan='n'> : n만큼 세로로 셀 합치기

💫 table 테두리 둥글게

• 1번째 방법

table {
  border-collapse : collapse;
  border-spacing : 0;
}

(왼쪽위에있는 td) {
  border-top-left-radius : 5px;
}

• 2번째 방법

table {
  border-collapse : collapse;
  border-radius : 7px;
  border-style : hidden;
  box-shadow : 0 0 0 1px #666;
}