border-collapse
표 테두리(border)를 분리(separated)할지 합칠지(collapsed)를 결정합니다.td
에 높이와 넓이 120px씩 주었다.th
태그는 컬럼 제목을 표시하기 위한 thread 태그로 th 태그에는vertical-align
태그 내부 내용이 수직 방향으로 어디에 정렬할지를 지정한다. 같은 베이스 라인(baseline)에서 가장 높은 요소에 윗선이 맞춰진다. top, middle, bottom
출처 : deepbm.log
td
th
의 첫번째 글자 색을 빨간색으로 변경nth-last-child(1)
의 경우 td의 자식중 마지막 요소를 지정td:nth-child(1), th:nth-child(1) {color:red;}
td:nth-last-child(1), th:nth-last-child(1) {color:blue;}
적용하면 이런 모습 ↓ 토,일에 색 지정
가로 방향으로 한 줄을 다 차지하는 태그를 block태그라고 하고,
그렇지 않은 태그를 inline 태그라고 부릅니다.
- block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>
- inline 요소
<span>, <a>, <i>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>
block
block은 height와 width 값을 지정 할 수 있다.
block은 margin과 padding을 지정 할 수 있다.
inline
width와 height를 명시 할 수 없다.
margin은 위아래엔 적용 되지 않는다.
padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.
inline-block
줄바꿈이 이루어지지 않는다.
block처럼 width와 height를 지정 할 수 있다.
만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
출처 : https://seungwoohong.tistory.com/23
출처 : 이승진 교수님 수업