목록 (List)
순서없는 목록 (Unordered List)
<!DOCTYPE html>
<html>
<body>
<h2>순서없는 목록 (Unordered List)</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
순서있는 목록 (Ordered List)
<!DOCTYPE html>
<html>
<body>
<h2>순서있는 목록 (Ordered List)</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있습니다
ValueDescription
| “1” | 숫자 (기본값) |
| “A” | 대문자 알파벳 |
| “a” | 소문자 알파벳 |
| “I” | 대문자 로마숫자 |
| “i” | 소문자 로마숫자 |
<ol type="I">
<li value="2">Coffee</li>
<li value="4">Tea</li>
<li>Milk</li>
</ol>
start 어트리뷰트로 리스트의 시작값을 지정할 수 있습니다.
<ol start="3">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현합니다.
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
중첩 목록
<!DOCTYPE html>
<html>
<body>
<h2>중첩 목록</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ul>
</body>
</html>
테이블
표(table)를 만들 때 사용하는 태그이다. 과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성한다.
만드는 순서는
1. table태그로 표 자리를 먼저 만든다.
2. tr 태그로 각각의 행을 만든다.
3. td 태그로 각 행마다 셀을 만든다.
tagDescription
| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 (table row) |
| th | 행 내부의 제목 셀 (table heading) |
| td | 행 내부의 일반 셀 (table data) |
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Score</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>테이블 태그의 어트리뷰트는 아래와 같다.
attributeDescription
| border | 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.) |
| rowspan | 해당 셀이 점유하는 행의 수 지정 |
| colspan | 해당 셀이 점유하는 열의 수 지정 |
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>2개의 culumn을 span</h2>
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>2개의 row를 span</h2>
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
<thead>:
<thead> 태그는 HTML 표(테이블)의 표머리(표의 상단 부분)를 정의해. 주로 표의 열 제목을 나타내거나 표에 대한 정보를 요약할 때 사용된다.
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
</thead>
<tbody>
<tr>
<td>영수</td>
<td>25</td>
<td>남성</td>
</tr>
<!-- 다른 데이터 행들 -->
</tbody>
</table>
<tbody>:
<tbody> 태그는 HTML 표(테이블)의 본문 부분을 정의해. 실제 데이터 행들을 이 태그 내에 넣어야 한다.
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
</thead>
<tbody>
<tr>
<td>영수</td>
<td>25</td>
<td>남성</td>
</tr>
<!-- 다른 데이터 행들 -->
</tbody>
</table>
<tfoot>:
<tfoot> 태그는 HTML 표(테이블)의 표밑글(표의 하단 부분)을 정의한다. 보통 표에 대한 요약 정보나 하단 합계를 표시할 때 사용된다.
<table>
<thead>
<tr>
<th>제품</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>사과</td>
<td>2.00</td>
</tr>
<tr>
<td>바나나</td>
<td>1.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총 합계</td>
<td>3.50</td>
</tr>
</tfoot>
</table>
<thead>는 표의 열 제목을, <tbody>는 데이터 행을, 그리고 <tfoot>는 하단 합계나 요약 정보를 나타내는 데 사용된다. 위의 예시 코드에서 이러한 태그들이 각각 표머리, 본문, 그리고 표밑글 부분을 나타내고 있다.
<caption>:
<caption> 태그는 HTML 표(테이블)의 제목을 정의하는 데 사용된다. 표의 상단에 표 제목을 표시할 때 쓰인다.
<table>
<caption>이번 주 판매 현황</caption>
<tr>
<th>상품</th>
<th>판매량</th>
</tr>
<tr>
<td>사과</td>
<td>50</td>
</tr>
<tr>
<td>바나나</td>
<td>30</td>
</tr>
</table>
<figcaption> 태그는 <figure> 요소 내의 콘텐츠(일반적으로 이미지)에 대한 설명을 제공한다. 주로 이미지나 도표와 관련된 설명을 넣을 때 사용된다.
<figure>
<img src="image.jpg" alt="아름다운 풍경">
<figcaption>해변가에서 일몰을 감상하는 풍경</figcaption>
</figure>
<caption>은 표의 제목을, <figcaption>은 이미지나 다른 콘텐츠에 대한 설명을 나타내는 데 사용되어. 위의 예시 코드에서는 이 두 태그가 각각 표와 이미지에 제목과 설명을 제공하고 있다.
<dl> 태그는 정의 목록을 만들 때 사용된다. 정의 목록은 용어와 해당 정의를 함께 나타내야 한다.
예시 코드:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - 웹 페이지 구조를 정의하는 마크업 언어이다.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - 웹 페이지 디자인과 스타일을 정의하는 언어이다.</dd>
<dt>JavaScript</dt>
<dd>웹 페이지에 동적 기능을 추가하는 스크립팅 언어이다.</dd>
</dl>
설명목록 만들기
<dt> 태그는 정의 목록에서 용어(정의되는 단어)를 나타내야 한다.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - 웹 페이지 구조를 정의하는 마크업 언어이다.</dd>
<!-- 다른 용어와 정의들 -->
</dl>
<dd> 태그는 정의 목록에서 해당 용어의 정의를 제공해야 한다. 일반적으로 <dt>로 정의한 용어의 설명을 담고 있다.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - 웹 페이지 구조를 정의하는 마크업 언어이다.</dd>
<!-- 다른 용어와 정의들 -->
</dl>
정의 목록은 용어와 정의를 함께 나타내어 정보를 구조화하고 이해하기 쉽게 돕는다. 위의 예시 코드에서는 HTML, CSS, JavaScript와 그에 따른 정의를 나타내고 있다.
여러열 묶어 스타일 지정하기
<col>:
<col> 태그는 HTML 표의 열에 대한 스타일, 속성, 너비 등을 정의할 때 사용됩니다. 이를 통해 표의 열들에 대한 일괄적인 스타일링이 가능하다.
<table>
<colgroup>
<col style="background-color: lightgray;">
<col style="background-color: lightblue;">
</colgroup>
<tr>
<td>1st 열</td>
<td>2nd 열</td>
</tr>
</table>
위의 코드에서 <colgroup> 태그는 <table> 내에서 열들에 대한 스타일을 정의하고, <col> 태그는 각 열의 스타일을 지정합니다.
<colgroup>:
<colgroup> 태그는 하나 이상의 열을 그룹화하고 스타일을 지정할 때 사용됩니다. 이것은 표 내의 여러 열을 동시에 조작할 수 있도록 돕습니다.
<table>
<colgroup span="2" style="background-color: lightgray;"></colgroup>
<tr>
<td>1st 열</td>
<td>2nd 열</td>
</tr>
</table>
<colgroup> 태그의 span 속성은 그룹화할 열의 수를 지정하며, 해당 열 그룹에 대한 스타일은 style 속성을 통해 정의합니다.
이러한 태그들을 사용하면 표의 열에 대한 스타일링이나 속성 지정을 효율적으로 수행할 수 있습니다. 위의 예시 코드에서는 열과 열 그룹에 스타일을 적용하는 방법을 보여줍니다.
'HTML' 카테고리의 다른 글
| HTML - Form Tag (0) | 2023.10.19 |
|---|---|
| HTML - 이미지 등 멀티미디어 지원 태그 (0) | 2023.10.19 |
| HTML - 하이퍼링크 (0) | 2023.10.18 |
| HTML - 텍스트 관련 태그 (0) | 2023.10.18 |
| HTML - 시맨틱 요소 (0) | 2023.10.18 |