table(표),nth-child 셀렉터

기본적인 table HTML 구성 

설명하다

 

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

table태그 내에 tr은 row, td는 column을 의미합니다. 

내가 원하는 만큼 row, column을 넣어주면 표가 완성됩니다. 

tbody, thead는 그냥 헤드부분 영역구분을 위해 사용하며 td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리됩니다. 

 

 

 

 

테이블 셀 내에서 상하정렬할 땐 vertical-align 

td, th {
  vertical-align : middle;
}

vertical-align 속성을 이용해 테이블 내에서의 상하정렬을 하실 수 있습니다.

top, bottom, middle 사용가능

 

 

 

 

 

inline 요소 간 상하정렬할 땐 vertical-align 

<p>
  <span style="font-size : 50px">Greetings</span>   <span style="font-size : 20px">안녕</span>
</p>

display : inline 혹은 inline-block 요소들을 나란히 배치하면 상하정렬이 이상한 경우가 있습니다.

특히 큰 이미지와 글,

또는 큰 글씨옆에 있는 작은 글씨

이런걸 나란히 배치했을 때 서로 높이가 맞지 않는 경우가 많은데

이럴 때 margin-top 이런거 대신 쓰는 속성입니다.

위의 예제에서 <span>안녕</span> 여기에 vertical-align : top 이런거 넣어서 실험해보십시오. 

 

top, middle, bottom 말고도 super, sub, px 단위로 사용가능합니다. 

(table 안에선 top, middle, bottom만 사용가능합니다)

 

 

 

 

display : table 

설명하다

 

.box {
  display : table;
  display : table-row;
  display : table-cell;
}

가끔 div로 이루어진 요소들을 테이블화 시키고 싶을 때가 있습니다

그럴 땐 table태그로 변하길 원하는 요소에 display : table을 적어주신 뒤에

tr로 변하길 원하는 요소엔 display : table-row,

td로 변하길 원하는 요소엔 display : table-cell 을 넣어주면 됩니다. 

하지만 그럴 일은 거의 없기 때문에 참고로만 알아둡시다. 

 

오늘 배울 내용 : nth-child 셀렉터 

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

여러 요소를 찾은 다음

원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 이걸 뒤에 붙여주면 됩니다.

위의 코드는 그래서 .cart-table 안에 있는 모든 td를 찾은 다음

2번째 나오는 td에만 color를 줄 수 있습니다. 

테이블에서 원하는 순서의 셀에 스타일줄 때 가끔 유용하게 사용합니다.

 

 

 

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

이러면 짝수로 등장하는 td에만 스타일을 줄 수도 있고

(odd라고 쓰면 홀수입니다)

 

 

 

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

이러면 3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있습니다.

3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일을 줄 수 있습니다. 

 

 

 

 

 

포인트1. 테두리 색상은 밑에만 넣고 싶으면

td, th {
  border-bottom : 1px solid black;
}

border-bottom 쓰면 됩니다 

 

 

 

 

포인트2. 셀 블록마다 width를 설정해줄 수 있습니다.

설명하다

 

<table>
  <tr>
    <td class="name">상품명</td>
    <td class="price">가격</td>
    <td>수량</td>
  </tr>
</table>

설명하다

 

.name {
  width : 50%
}
.price {
  width : 20%
}

하나의 td에 width를 주어도 전체 열의 width가 변합니다.

나름 편리한 점이라고 볼 수 있겠습니다.

 

 

 

포인트3. td 여러개를 합치고 싶으면

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

colspan에 원하는 숫자를 넣으면 그 숫자만큼 옆의 셀을 합쳐줍니다. 

 

 

 

 

 

 

간혹 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라는 속성을 이용해 테두리를 가짜로 만들어내는 편법입니다.

box-shadow는 그림자 넣는 속성입니다.