웹/HTML
[HTML] img, table
Judith Hopps
2023. 1. 6. 09:25
반응형
img
: html 문서에 이미지를 넣습니다.
- 속성)
| src | 원본파일 경로 | 절대경로 또는 상대경로 |
| alt | 대체 텍스트 | 스크린 리더, 원본파일 무효시(텍스트 설명이며 필수X) |
| title | 툴팁 | alt의 대체제나 반복이 되어서는 안됨 |
| width | 너비 | 픽셀 단위의 정수 |
| height | 높이 | 픽셀 단위의 정수 |
table
: html 문서에 이미지를 넣습니다.
- 속성)
태그설명비고
| <table> | 테이블 | |
| <caption> | 표 설명 또는 제목 | 선택사항 |
| <tr> | 테이블의 행 | |
| <td> | 테이블의 데이터 셀 |
| <thead> | 테이블의 헤더 부분 | <tbody> 앞에 와야 함 |
| <tbody> | 테이블의 본문 | 본 내용을 담음 |
| <tfoot> | 테이블의 푸터 부분 | <tbody> 뒤에 와야 함 |
| <th> | 열 또는 행의 헤더 | scope 속성으로 row, col 중 선택 |
| colspan | 열 병합 |
| rowspan | 행 병합 |
| <colgroup> | 표에 열을 묶어서 속성 부여 | <caption>보다 뒤, 그 외 요소보다 앞에 와야 함 |
| <col> | 열의 묶음 | span 속성으로 열 수 지정 |
- 기본 틀)
<table>
<caption>설명</caption>
<thead>
<tr>
<th span="col"></th>
<th span="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th span="row"></th>
<td></td>
<td></td>
</tr>
<tr>
<th span="row"></th>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
- emmet)
table>caption{설명}+thead>tr>th[span="col"]*2^^tbody>(tr>th[span="row"]+td*2)*2^tfoot>tr>th[scope="row"]+td*2
- 일주일 table
<table>
<cabtion></cabtion>
<colgroup>
<col class="weekend" />
<col span="5" />
<col class="weekend" />
</colgroup>
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
참고)
emmet을 이용하면 빠르게 작성 가능
emmet의 소개는 다음 포스트를 참고해주세요.
반응형