📖Today I Learned
✅Tabular data
✔<table>
: 테이블 생성, 제목(caption)과 행(tr), 열(col), 셀(td), 셀의 제목(th)
<caption> : 테이블의 제목이나 설명, <table>요소의 첫번째 자식
<thead> <tbody> <tfoot> : 머리글, 본문, 바닥 글
- 테이블 레이아웃에 영향X , CSS 사용하여 스타일 지정가능
<tr> : 테이블의 행을 나눌 때
<th> : 행, 열의 머리말 (글씨 굴게, 가운데 정렬)
<td> : 셀을 분리할 때 사용, HTML 요소의 모든 종류 포함 가능
<colspan="셀의 개수"> : 열간 병합(가로 방향으로 셀 병합)
<rowspan="셀의 개수"> : 행간 병합(세로 방향으로 셀 병합)
<colgroup> <col> : 한 열에 공통적인 스타일 주기 가능
<style>
.구분 {
width: 20%;
}
.이름 {
width: 50%;
}
.판매량 {
width: 20%;
}
</style>
<colgroup>
<col class="구분" />
<col class="이름" />
<col class="판매량" />
</colgroup><scope> : <th>요소에 <td>와의 연결 관계 설정
- row: 행 방향 진행
- col: 열 방향 진행
✅HTML Living Standard
HTML Living Standard (html.spec.whatwg.org) Multipage Version
✅HTML 정리
- 시맨틱한 마크업으로 코딩한다?
- 사람이나 기계 (특히 검색엔진) 가 해당 마크업을 읽고 그 의도를 알 수 있는 코드로 작성하세요. - h1 ~ h6는 익명 영역을 생성
- mata에 "og:title"
- open Graph Protocol(Facebook...)
- https://ogp.me/
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>- meta에 "twitter.description"
- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup - Entity code https://entitycode.com/
- table : div만으로도 table을 만들 수도 있으나 요즘은 사용하지 않습니다.
