(14) HTML 태그 - t

<table> : 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용함.

이러한 테이블은 <table> 요소와 자식 요소인 하나 이상의 <tr>, <th>, <td> 요소들로 구성됩니다.

<tr> 요소는 테이블의 각 행(row)을 정의하고, <th> 요소는 각 열의 제목을 정의합니다. 또한, <td> 요소는 하나의 테이블 셀(cell)을 정의합니다.

 

또한, 다음과 같은 요소들을 사용하여 좀 더 복잡한 테이블을 정의할 수도 있습니다.

- <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody>

 

예전에는 종종 HTML 테이블을 사용하여 HTML 문서의 레이아웃을 정의하기도 했지만, 이제는 <div> 요소나 의미 요소들을 사용한 후 CSS를 이용하여 페이지의 레이아웃을 정의하고 있습니다.

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

 

 

 

 

<tbody> : HTML 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용함.

<tbody> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tfoot> 요소와 함께 사용됩니다.

브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.

 

<tbody> 요소는 <table> 요소의 자식 요소로써, 반드시 모든 <caption>, <colgroup>, <thead> 요소 다음에 위치해야 합니다. 또한, <tbody> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.

<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있습니다.

<table>
    <thead>
        <tr>
            <th>출장비 내역</th>
            <th>금액</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>교통비</td>
            <td>45000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>총 합계</td>
            <td>103000</td>
        </tr>
    </tfoot>
</table>

 

 

 

 

<td> : HTML 테이블에서 하나의 데이터 셀(cell)을 정의할 때 사용함.

HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있으며, 하나는 <th> 요소를 사용한 헤더 정보를 저장하는 헤더 셀과 또 다른 하나는 <td> 요소를 사용한 일반적인 데이터를 저장하는 데이터 셀입니다.

 

<th> 요소 내의 텍스트는 기본적으로 굵은 폰트로 중앙 정렬되며, <td> 요소 내의 텍스트는 일반적인 두께의 폰트로 좌측 정렬됩니다.

colspan 속성과 rowspan 속성을 사용하면 콘텐츠를 여러 셀에 걸쳐 나타낼 수 있습니다.

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

 

 

 

<template> : 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용함.

<template> 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다. 하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다.

 

<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다. 만약 <template> 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다.

<template>
    <h3>모나리자</h3>
    <img src="/examples/images/img_monalisa.png" alt="모나리자">
</template>

 

 

 

<textarea> : 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용함.

텍스트 입력 영역에는 개수의 제한 없이 문자를 입력할 수 있으며, 입력된 문자는 고정폭 글꼴로 렌더링됩니다.

텍스트 입력 영역의 크기는 <textarea> 요소의 cols 속성과 rows 속성으로 지정할 수 있으며, CSS에서 height 속성과 width 속성을 사용하면 더욱 손쉽게 지정할 수 있습니다.

<form action="/examples/media/action_target.php" method="get">
    <textarea name="opinion" cols="30" rows="5"></textarea><br>
    <input type="submit">
</form>

 

 

 

 

<tfoot> : HTML 테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용함.

<tfoot> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tbody> 요소와 함께 사용됩니다.

브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.

 

<tfoot> 요소는 <table> 요소의 자식 요소로써, 반드시 모든 <caption>, <colgroup>, <thead>, <tbody> 요소 다음에 위치해야 합니다. 또한, <tfoot> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.

<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있습니다.

<table>
    <thead>
        <tr>
            <th>출장비 내역</th>
            <th>금액</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>교통비</td>
            <td>45000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>총 합계</td>
            <td>103000</td>
        </tr>
    </tfoot>
</table>

 

 

 

<th> : HTML 테이블에서 제목이 되는 헤더 셀(headercell)을 정의할 때 사용함.

HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있으며, 하나는 <th> 요소를 사용한 헤더 정보를 저장하는 헤더 셀과 또 다른 하나는 <td> 요소를 사용한 일반적인 데이터를 저장하는 데이터 셀입니다.

 

<th> 요소 내의 텍스트는 기본적으로 굵은 폰트로 중앙 정렬되며, <td> 요소 내의 텍스트는 일반적인 두께의 폰트로 좌측 정렬됩니다.

colspan 속성과 rowspan 속성을 사용하면 콘텐츠를 여러 셀에 걸쳐 나타낼 수 있습니다.

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

 

 

 

<thead> : HTML 테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용함.

<thead> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <tbody>, <tfoot> 요소와 함께 사용됩니다.

브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.

 

<thead> 요소는 <table> 요소의 자식 요소로써, 반드시 모든 <caption>, <colgroup> 요소 다음에 위치해야 합니다. 또한, <thead> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.

<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있습니다.

<table>
    <thead>
        <tr>
            <th>출장비 내역</th>
            <th>금액</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>교통비</td>
            <td>45000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>총 합계</td>
            <td>103000</td>
        </tr>
    </tfoot>
</table>

 

 

 

<time> : 사람이 읽을 수 있는(human-readable) 형태의 날짜와 시간 데이터를 정의할 때 사용함.

<time> 요소는 대부분의 웹 브라우저에서 특별한 형태로 랜더링되지는 않지만, 검색 엔진의 검색 결과 향상이나 알림 및 스케줄과 같은 사용자 기능을 위해 날짜와 시간 데이터를 기계가 읽을 수 있는(machine-readable) 형태로 변환해주는 datetime 속성을 포함할 수 있습니다

 

<time> 요소의 datetime 속성값으로 유효한 데이터는 다음과 같습니다.

- 24시간 형태로 표현된 시간 데이터

- 그레고리력(Gregorian calendar)으로 표현되는 날짜 데이터 (선택사항으로 시간 및 시간대 데이터를 포함할 수 있음)

- 유효한 기간 데이터

<p>이번 콘서트는 <time datetime="2019-04-19T20:00:00">4월 19일 저녁 8시</time>부터 시작합니다.</p>

 

 

 

<title> : 해당 문서의 제목(title)을 정의할 때 사용함.

이러한 <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭의 제목으로 사용되며, 즐겨찾기 등록 시 해당 페이지에 대한 즐겨찾기 이름으로 사용됩니다. 또한, 검색 엔진에 의한 검색 결과 페이지에서도 해당 페이지의 제목으로 나타납니다.

 

모든 HTML 문서에는 <title> 요소가 필요하지만, 두 개 이상의 <title> 요소를 포함할 수는 없습니다. 만약 HTML 문서에 <title> 요소가 존재하지 않으면, 해당 문서는 HTML 유효성 검사를 통과하지 못 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 문서의 제목입니다.</title>
</head>
<body>
    HTML 문서의 콘텐츠(contents) 영역입니다.
</body>
</html>

 

 

 

<tr> : 테이블에서 셀들로 이루어진 하나의 행(row)을 정의할 때 사용함.

<tr> 요소는 하나 이상의 <th> 요소(data cell)나 <td> 요소(header cell)를 포함할 수 있습니다.]

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

 

 

 

<track> : <audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(text track)을 정의할 때 사용함.

<track> 요소는 자막 파일이나 캡션 파일, 또는 미디어가 재생되는 동안 화면에 보일 텍스트를 포함한 파일 등을 명시하는데 사용됩니다.

<video style="width:576px; height:360px" controls>
    <source src="sample_video_mp4.mp4" type="video/mp4">
    <source src="sample_video_ogg.ogg" type="video/ogg">
    <track src="sub_kr.vtt" kind="subtitles" srclang="ko" label="Korean">
    <track src="sub_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

 

 

 

<tt> : 텔레타이프 텍스트(teletype text)를 나타낼 때 사용함.

<tt> 요소는 텔레타이프(teletype)나 텍스트 전용 화면, 라인 프린터와 같은 고정폭 디스플레이에 표시될 고정폭 글꼴(monospace font)로 표현되는 인라인 텍스트를 생성합니다.

 

HTML5에서는 <tt> 태그를 더 이상 지원하지 않으며, 목적에 따라 다음과 같은 요소나 CSS를 대신 사용해야 합니다.

 

키보드 입력을 나타낼 경우에는 <kbd> 요소를, 변수를 나타낼 경우에는 <var> 요소를, 컴퓨터 코드의 일부분을 나타낼 경우에는 <code> 요소를, 컴퓨터 프로그램의 샘플이나 인용 출력을 나타낼 경우네는 <samp> 요소를 대신 사용해야 합니다.

<p><tt>이 텍스트는 고정폭 글꼴 텍스트입니다.</tt></p>

 

 

 

 

 

 

 

 

 

 

 

공부를 목적으로 정리한 게시글입니다.

출처 - http://www.tcpschool.com/html-tags/intro