[HTML/CSS] 쓸데 많은 Table 레이아웃과 vertical-align속성

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

💫 기본적인 table HTML 구성

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

• <tr> : row
• <td> : column
• <tbody>, <thead> : head 영역 구분을 위해 사용
• <th> : 기본적으로 제목처럼 굵게 처리

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

td, th {
  vertical-align : middle;
}

• table 내에서 세로 정렬 할 때 top, bottom, middle 사용 가능
• inline/inline-block 요소 간의 세로 정렬 할 때 사용
• 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

💫 오늘의 숙제 : Cart 페이지 만들기

See the Pen
Untitled by dozzs (@dozzs)
on CodePen.