1. HTML 리스트 태그
* 웹 문서에 목록은 어떤 항목을 나열할 때 뿐 아니라 네비게이션의 목록 또는 텍스트 콘텐츠 목록 등을 나열할 때 CSS와 함께 자주 이용된다.
| <ol> | 순서있는(Ordered List) 목록을 나열한다. |
| <ul> | 순서없는(Unordered List) 목록을 나열한다. |
| <li> | 목록을 표시하며 ul/ol의 하위 목록으로 작성한다. |
* 설명 목록(Description List)은 이름과 값(name & value) 형태로 된 목록을 말한다.
| <dl> | 설명목록은 한쌍의 <dt><dl> 태그를 갖는다. |
| <dt> | 태그와 값 부분을 지정한다. |
| <dd> | 태그로 구성된다. |
- OL 목록 태그 속성
* type - 영문자나 로마 숫자 등으로 순서 속성 병경한다.
* start - 1부터 시작되는 시작 번호를 임의의 숫자로 변경한다.type = "1" 숫자(기본값) type = "a" 영문 소문자 type = "A" 영문 대문자 type = "i" 로마 숫자 소문자 type = "I" 로마 숫자 대문자
type="1" start="4" -> 숫자 4부터 시작
type="A" start="4" -> 영문 D부터 시작
2. 리스트 태그 예시
<body>
<h2>OL 할일 목록</h2>
<ol>
<li>HTML 제1강 : 1월 1일</li>
<li>HTML 제2강 : 2월 1일</li>
<li>HTML 제3강 : 3월 1일</li>
<li>HTML 제4강 : 4월 1일</li>
</ol>
<h2>UL 할일 목록</h2>
<ul>
<li>HTML 제1강 : 1월 1일</li>
<li>HTML 제2강 : 2월 1일</li>
<li>HTML 제3강 : 3월 1일</li>
<li>HTML 제4강 : 4월 1일</li>
</ul>
<h2>OL 할일 목록</h2>
<ol type="a">
<li>HTML 제1강 : 1월 1일</li>
<li>HTML 제2강 : 2월 1일</li>
<li>HTML 제3강 : 3월 1일</li>
<li>HTML 제4강 : 4월 1일</li>
</ol>
<h2>OL 할일 목록</h2>
<ol type="i">
<li>HTML 제1강 : 1월 1일</li>
<li>HTML 제2강 : 2월 1일</li>
<li>HTML 제3강 : 3월 1일</li>
<li>HTML 제4강 : 4월 1일</li>
</ol>
<h2>OL 할일 목록</h2>
<ol type="1" start="4">
<li>HTML 제1강 : 1월 1일</li>
<li>HTML 제2강 : 2월 1일</li>
<li>HTML 제3강 : 3월 1일</li>
<li>HTML 제4강 : 4월 1일</li>
</ol>
<h2>OL 할일 목록</h2>
<ol type="A" start="4">
<li>HTML 제1강 : 1월 1일</li>
<li>HTML 제2강 : 2월 1일</li>
<li>HTML 제3강 : 3월 1일</li>
<li>HTML 제4강 : 4월 1일</li>
</ol>
<h2>DL 설명 목록</h2>
<dl>
<dt>선물용 3KG</dt>
<dd>소과 13~16과</dd>
<dd>중과 10~12과</dd>
</dl>
<dl>
<dt>선물용 5KG</dt>
<dd>소과 15~19과</dd>
</dl>
</body>3. HTML의 테이블 태그
https://tadaktadak-it.tistory.com/62?category=1020641
[HTML] 테이블 태그, hr 태그
1. 테이블 - 표 내용 혹은 내용 내용 ... ... - tr : 행(table row) - th : 컬럼명, 컬럼제목(table header) - td : 열, 내용(table data) - 기본적으로 테이블을 만들면 테두리가 없다. 그래서 table 태그..
tadaktadak-it.tistory.com
| <table> | 웹 문서에서 표 형식의 문서를 만들기 위한 태그 |
| <caption> | table caption로 테이블 요약 설명을 표시 |
| <tr> | table row의 약자로 표의 행 표시 |
| <td> | table data의 약자로 표의 열 표시(<tr> 태그 하위 태그) |
| <tbody> | table body로 표에서 본문 영역을 나타내기 위한 태그로 사용 |
| <thead> | table head로 표에서 제목 줄을 가지고 있는 경우 제목 줄을 표시 |
| <th> | table header의 약자로 표의 헤더를 표시(<td> 대신 사용) |
* table 태그에 border = "숫자" 라는 속성을 주면 자동으로 테이블 테두리가 생긴다.
* <caption>
<table> 태그의 안에 작성해야 하며 딱 하나만 작성 가능하다.
<caption> 태그를 이용하면 테이블 상단에 짧은 글을 붙일 수 있다.
* <colgroup>
생긴 column의 스타일을 미리 설정할 수 있다.
<colgroup>
<col width="200px">
...
</colgroup>
* colspan과 rowspan으로 원하는 좌우, 상하 셀을 병합 시킬 수 있다.
<td colspan = "2"></td>
<td rowspan = "2"></td>
* <tr> 안에 <th>,<td>를 적절하게 배치를 해줌으로 수직 테이블 수평 테이블을 설정할 수 있다.
4. 테이블 태그 예시
<body>
<h2>테이블 태그 사용예(단순 사용)</h2>
<table>
<tr>
<td>섹션 1</td>
<td>섹션 2</td>
</tr>
<tr>
<td>섹션 3</td>
<td>섹션 4</td>
</tr>
</table>
<h2>테이블 태그 사용예(thead, tbody 사용)</h2>
<table>
<thead>
<tr>
<th>학교</th>
<th>창립년도</th>
</tr>
</thead>
<tbody>
<tr>
<td>서울대학교</td>
<td>1946</td>
</tr>
<tr>
<td>고려대학교</td>
<td>1905</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>개인정도</caption>
<colgroup>
<col width="200px"/>
<col width="300px"/>
<col width="400px"/>
</colgroup>
<tr>
<th colspan="2">이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍</td>
<td>길동</td>
<td>30</td>
</tr>
<tr>
<td>김</td>
<td>유신</td>
<td>24</td>
</tr>
</table>
<h2>수직 테이블</h2>
<table class="t1">
<colgroup>
<col width="200px"/>
</colgroup>
<tr>
<th>이름</th>
<td>홍 길동</td>
<td>김 유신</td>
</tr>
<tr>
<th>나이</th>
<td>24</td>
<td>30</td>
</tr>
<tr>
<th>주소</th>
<td>경기도 성남시</td>
<td>서울 동작구</td>
</tr>
</table>
</body>
<style>
.t1 th { text-align: left; }
.t1 th, .t1 td { border: 1px solid black; border-spacing: 0; }
</style>'FrontEnd > HTML' 카테고리의 다른 글
| [HTML] HTML 오디오, 비디오, 멀티미디어 대체 태그 (0) | 2022.09.15 |
|---|---|
| [HTML] HTML 입력 폼 태그, 이미지 태그 (0) | 2022.09.15 |
| [HTML] HTML 시맨틱, 레이아웃, 텍스트 태그 (0) | 2022.09.15 |
| [HTML] HTML의 개요, 구성요소, 문서구조 (0) | 2022.09.14 |