728x90
반응형
▣ 실행결과
지난번에 이어서 <body> 태그 내에서 자주 사용되는 필수적이고 기본적인 태그들과 그 속성에 대하여 살펴보겠습니다. 위의 사진은 이번 내용을 직접 작성하여 실행한 결과입니다.
□ 리스트(Lists)
<!-- Unordered list -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered list -->
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
리스트에는 기본적으로 비순서(Unordered)형과 순서(Ordered)형이 있습니다.
<ul style="list-style: none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
비순서형은 글머리 기호를 style 속성을 이용하여 설정할 수 있고, 다양한 특수기호의 형태로 적용이 가능합니다. 그리고 순서형은 글머리 기호를 숫자나 문자의 형태로 type 속성을 이용하여 설정할 수 있으며, 순서대로 자동 부여 됩니다.
<!-- Nested list -->
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
이외에 리스트 속에 또 다른 리스트가 들어가 있는 중첩된(Nested) 형태도 있으며, 이때 글머리 기호는 서로 다르게 자동 부여됩니다.
반응형
□ 테이블(Tables)
<hr>
<!-- Table -->
<table>
<caption>Table 1</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>jdoe@example.com</td>
</tr>
<tr>
<td>Jeff</td>
<td>Wilson</td>
<td>jeff@example.com</td>
</tr>
</tbody>
</tfoot>
<tr>
<td></td>
<td>Total</td>
<td>3</td>
</tr>
</tfoot>
</table>
<table> 태그는 '표'를 생성하는 HTML 요소로써, 머리(<thead>), 몸통(<tbody>), 발(<tfoot>) 그리고 행(<tr>)으로 구성되어 있습니다. 이외에 표의 제목(<caption>)을 넣을 수도 있으며 이때 표의 제목은 반드시 <table> 태그 다음에 위치해야 합니다. 머리 또는 첫 번째 행의 속성 이름들은 헤더(<th>)로 입력되며, 그 외에 몸통이나 발에는 데이터(<td>)를 입력하는 것이 일반적인 형태입니다.
이제 기억나는 대로 아래의 내용보다 적거나 많게 아니면 각자 만들고 싶은 형태로 리스트와 표를 직접 손으로 작성해 보겠습니다.
728x90
반응형
'HTML & CSS > HTML5' 카테고리의 다른 글
| [HTML] TIL6 : 엔티티의 종류 / 의미론적 태그의 역할 (0) | 2021.04.06 |
|---|---|
| [HTML] TIL5 : 블럭-레벨 및 인라인 요소의 특징 / 클래스 및 아이디 속성 활용 (0) | 2021.04.06 |
| [HTML] TIL4 : 기본 태그의 종류와 속성(3/3) - 입력 양식(폼) (0) | 2021.04.05 |
| [HTML] TIL2 : 기본 태그의 종류와 속성(1/3) - 주제, 단락, 앵커, 이미지 (0) | 2021.04.04 |
| [HTML] TIL1 : 웹 페이지의 기본 구조 해부 - html, 헤드, 바디 (0) | 2021.04.04 |
댓글