<aside> ☝ 늘 헤깔리던 vertical-align 속성, 초간단 정리

</aside>

1.inline/inline-block 요소 간의 수직 정렬 2.테이블 셀 요소 내부의 수직 정렬

• 기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.

2.테이블 셀 요소 내부의 수직 정렬

• 전체 소스 코드는 길어서 아래에 첨부

<td class="selected">
	<p>자차카타</p>
</td>

vertical-align 속성을 사용하지 않은 default 값인 middle인 상태

제일 왼쪽 셀에 글자가 많아지면서 자연스럽게 셀의 길이가 늘어난 상태가 되고 다른 셀의 글자가 자동으로 가운데로 들어가 있음

<td class="selected" style="vertical-align: top;">
	<p>자차카타</p>
</td>

vertical-align: top; 을 하게되면, 셀 안의 글자가 위로 정렬

<td class="selected" style="vertical-align: bottom;">
	<p>자차카타</p>
</td>

vertical-align: bottom; 을 하게되면, 셀 안의 글자가 아래로 정렬

참고로 table에서는 top, middle, bottom 속성만 사용 할 수 있음

• 아래는 table 전체 예제 코드

<style>
	table {border-collapse: collapse;}
  th,td {border: 1px solid black;}
  .selected {background-color: lightblue;}
</style>
<table>
	<tr>
		<th>
	    <p>가나다라</p>
      <p>마바사아</p>
      <p>자차카타</p>
    </th>
	  <td class="selected" style="vertical-align: middle;">
			<p>자차카타</p>
    </td>
    <td>abcd</td>
	</tr>
  <tr>
	  <th>efgh</th>
    <td>ijkl</td>
    <td>mnop</td>
  </tr>
</table>