<table>
<caption>
<strong> Modern Browser </strong>
<p> 국내에서 자주 사용하는 modern browser </p>
</caption>
<tr>
<th> ... </th>
<th> ... </th>
</tr>
<tr>...</tr>
<tr>...</tr>
</table>
2. <figcaption> 태그 사용하기
설명글을 붙이고 싶은 대상을 <figure>로 감싼 후 <figcaption>태그를 이용해 제목이나 설명 글을 입력함.
<figcaption>태그를 <table>태그보다 앞에 사용하면 표 위에 제목이 표시되고 </table>태그보다 뒤에 사용하면 표 아래에 제목이 표시됨
<figure>
<figcaption>
<p> 국내에서 자주 사용하는 <b>modern browser </b> </p>
</figcaption>
<table>
<tr>
<th>...</th>
<th>...</th>
</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</figure>
aria-describedby 속성 - 표에 대한 설명 제공하기
아래 그림의 빨간색 네모 박스에 해당함
<p id="summary">다음 표는 HTMl5를 지원하는 모던(Modern Browser)를 정리한 것입니다.
최신 버전일수록 HTML5를 좀더 많이 지원하기 때문에 최신 버전을 다운로드하는 것이 좋습니다. </p>
<table aria-describedby="summary">
<caption>Modern Browser</caption>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>...</tr>
<tr>...</tr>
</table>
<thead>,<tbody>,<tfoot> 태그 - 표 구조 정의하기
일부 표에서는 표 아래쪽에 합계나 요약 내용을 표시하기도 함
-> 제목이 있는 부분 <thead>, 실제 내용이 있는 본문 <tbody>, 요약 부분이 있는 부분 <tfoot> 으로 나누기
<col>,<colgroup> 태그 - 여러 열 묶어 스타일 지정하기
<col> : 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할때 사용 (닫는 태그 없음)
만약, 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 이용해 몇개를 묶어줄 지 지정 가능
<colgroup> : 여러열을 묶어 스타일 적용 가능, <colgroup> 안에 묶는 열의 개수 만큼 <col>을 넣으면 됨
cf) <col>과 <colgroup> 태그는 <caption> 태그뒤와 <tr>,<td> 태그 전에 사용해야함
문서를 저장한 폴더 안에 <images>라는 폴더를 만들고 "first"라는 이름으로 그림을 저장했고,
<img src="images/first.jpg"> 를 통해 이미지를 불러왔다.
HTML 문서 기본구조
<!DOCTYPE html> <!--현재 문서가 HTML5 언어로 작성된 웹문서-->
<html lang="ko">
<head> <!-- <head>~</head> : 웹 브라우저가 웹문서를 해석하기 위해 필요한 정보들을 입력
문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시 X
스타일 및 스크립트 등이 포함됨 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음만드는 HTML 문서</title>
</head>
<body> <!-- <body>~</body> : 실제로 웹 브라우저 화면에 나타날 내용 -->
<h1> 변명 </h1>
<p>변명 중에서도<br>
가장 어리석고 못난 변명은<br>
"시간이 없어서"라는 변명이다.</p>
<img src="images/first.jpg">
</body>
</html> <!-- <html>~</html> : 웹문서의 시작과 끝 -->
<meta name="keyword" content="html5,웹표준"> <!-- 해당 문서의 키워드 -->
<meta name="description" content="html5를 통해 웹표준 공부하기"> <!-- 해당 문서의 설명 -->
<meta name="author" content="Bosun Kwak"> <!-- 해당 문서의 소유자 또는 제작자 -->
