□ <div>태그는 division 약자로 html문서 중 특정부분을 지정할 때 사용
□ css, javascript로 특정부분을 효과를 적용할 때 사용
□ <table>태그는 표구현시 사용하는 태그이며, 작성시 아래 태그들을 활용해 표 작성
○ thead : 컬럼명들이 위치할 부분이자 영역
○ th : 컬럼명(값)
○ tbody : 행 또는 데이터 값들이 위치할 부분이자 영역
○ tr : 행 영역
○ td : 행과 열의 값
- <table>태그 사용시 영역확장 ※병합이 아닌 확장임
- colspan : 열 영역확장 (정수 숫자입력하여 확장)
- rowspan : 행 영역확장 (정수 숫자입력하여 확장)
○ tfoot : 마지막 행이자 테이블의 마지막을 의미
<!--(emmet 단축키) html:5 입력 후 tab 키를 치면 아래와 같은 기본 코드(기본 템플릿)가 자동생성됨-->
<!DOCTYPE html> <!--해당 문서가 HTML을 알리며 부라우저가 랜더링하지 않도록 하는 부분-->
<html lang="en"> <!--언어설정으로 한국어는 'ko'로 설정-->
<head> <!--헤더부분 : 문서를 대표하는 제목태그로 title과 meta 태그를 사용함-->
<!--meta태그 : 문서 전반에 걸친 정보 표시. name으로 description, keywords, author 등을 많이 사용함-->
<meta charset="UTF-8">
<meta name = "description" content= "첫 실습 코드"> <!--검색 키워드-->
<!--<meta name = "keywords" content= "html/css">-->
<!--<meta name = "author" content= "DH.KIM">-->
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!--인터넷 익스플로러 IE 최신 표준 모드로 랜더링되는 태그. 호환성 이슈로 반드시 기재해야함-->
<!--viewport : 현재 화면에 보여지고 잇는 직사각형 영역으로 웹 브라우저 상에서는 현재 창에서 문서를 볼 수 있는 화면의미-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<!--CSS파일을 적용 및 연동하기위해 link 태그사용. 주로 css파일과 아이콘 파일을 가져오기 위해 사용-->
<link rel = "stylesheet" href = "C:/Publishing/src/test_style.css">
<!--css코드를 html문서에 작성할 때 사용. css 코드는 link로 가져오거나 style태그를 사용해 활용-->
<style>
table, tr, td {
background-color: black;
color:chartreuse;
border: solid;
}
</style>
<title>테스트입니다</title> <!--웹 헤더시트 명-->
</head>
<body> <!--바디부분-->
<!--테이블 태그-->
<!--확장 : colspan td태그에서 열 확장 -->
<!--확장 : rowspan td태그에서 행 확장 -->
<div>
<h1>
테이블 편집(전)
</h1>
<table>
<thead><!--컬럼명. 컬럼(열)들을 가진 행 표시. 즉, 컬럼명들이 위치할 부분임-->
<th>필드1</th><!--컬럼명-->
<th>필드2</th><!--컬럼명-->
<th>필드3</th><!--컬럼명-->
<th>필드4</th><!--컬럼명-->
<th>필드5</th><!--컬럼명-->
</thead>
<tbody><!--행 또는 행의 데이터 값들이 위치할 부분임-->
<tr><!--행 영역-->
<td>1</td><!--행과열에 대한 값-->
<td>2</td><!--행과열에 대한 값-->
<td>3</td><!--행과열에 대한 값-->
<td>4</td><!--행과열에 대한 값-->
<td>5</td><!--행과열에 대한 값-->
</tr>
<tr><!--행 영역-->
<td>6</td><!--행과열에 대한 값-->
<td>7</td><!--행과열에 대한 값-->
<td>8</td><!--행과열에 대한 값-->
<td>9</td><!--행과열에 대한 값-->
<td>10</td><!--행과열에 대한 값-->
</tr>
<tr><!--행 영역-->
<td>11</td><!--행과열에 대한 값-->
<td>12</td><!--행과열에 대한 값-->
<td>13</td><!--행과열에 대한 값-->
<td>14</td><!--행과열에 대한 값-->
<td>15</td><!--행과열에 대한 값-->
</tr>
<tfoot><!--표의 마지막 행영역 표시태그-->
<tr>
<td>마지막열1</td><!--행과열에 대한 값-->
<td>마지막열2</td><!--행과열에 대한 값-->
<td>마지막열3</td><!--행과열에 대한 값-->
<td>마지막열4</td><!--행과열에 대한 값-->
<td>마지막열5</td><!--행과열에 대한 값-->
</tr>
</tfoot>
</tbody>
</div>
<div>
<table>
<h1>
테이블 편집(후)
</h1>
<thead><!--컬럼명. 컬럼(열)들을 가진 행 표시. 즉, 컬럼명들이 위치할 부분임-->
<th>필드1</th><!--컬럼명-->
<th>필드2</th><!--컬럼명-->
<th>필드3</th><!--컬럼명-->
<th>필드4</th><!--컬럼명-->
<th>필드5</th><!--컬럼명-->
<th>필드6</th><!--컬럼명-->
</thead>
<tbody><!--행 또는 행의 데이터 값들이 위치할 부분임-->
<tr><!--행 영역-->
<td>1</td><!--행과열에 대한 값-->
<td colspan="2">2</td><!--colspan을 사용해 2만큼 확장-->
<td colspan="3">3</td><!--행과열에 대한 값-->
</tr>
<tr><!--행 영역-->
<td rowspan="2">6</td><!--rowspan을 사용해 2만큼 확장-->
<td rowspan="3">7</td><!--rowspan을 사용해 3만큼 확장-->
<td>8</td><!--행과열에 대한 값-->
<td>9</td><!--행과열에 대한 값-->
<td rowspan="3">10</td><!--rowspan을 사용해 3만큼 확장-->
<td>11</td><!--행과열에 대한 값-->
</tr>
<tr><!--행 영역-->
<td>11</td><!--행과열에 대한 값-->
<td>12</td><!--행과열에 대한 값-->
<td>13</td><!--행과열에 대한 값-->
</tr>
<tr><!--행 영역-->
<td>16</td><!--행과열에 대한 값-->
<td>17</td><!--행과열에 대한 값-->
<td>18</td><!--행과열에 대한 값-->
<td>19</td><!--행과열에 대한 값-->
</tr>
<tfoot><!--표의 마지막 행영역 표시태그-->
<tr>
<td>마지막열1</td><!--행과열에 대한 값-->
<td>마지막열2</td><!--행과열에 대한 값-->
<td>마지막열3</td><!--행과열에 대한 값-->
<td>마지막열4</td><!--행과열에 대한 값-->
<td>마지막열5</td><!--행과열에 대한 값-->
<td>마지막열6</td><!--행과열에 대한 값-->
</tr>
</tfoot>
</tbody>
</table>
</div>
</body>
</html>'HTML&CSS > HTML' 카테고리의 다른 글
| <form>,<input>태그 (0) | 2023.11.07 |
|---|---|
| 리스트 : <ol>,<ul>,<li>태그 / img 태그 (0) | 2023.11.05 |
| <p>태그, <a>태그 (0) | 2023.11.05 |
| <h>~</h>태그 (0) | 2023.11.05 |
