아이템들을 표현 할때 <li> list item
<0l> order list
순서가 있는 정렬 목록
순위를 나타내거나 단계적으로 수행해야하는 것들 (ex. 요리 레시피)
요리 레시피
ol 태그를 했기 때문에 자동적으로 1,2,3,4가 붙은 것
0개 이상의 <li> 태그를 갖고 있어야 함.
<start> 속성
<ol> 태그가 아니더라도
<li> 태그에 value="" 하게 된다면 똑같이 설정을 할 수 있다.
중간에 넣어도 됨.
reversed 를 통하여 역전도 가능
<ul> unodered list
비정렬 목록, 순서 없는 목록
순서 없이 아이템들을 나열할때 (ex.메뉴)
<ol> 태그 안에 <ul> 태그를 넣을 수 있음.
<di>
용어를 정의하거나 설명할때 사용
<dt>(용어)와 <dd>(설명) 태그를 자식으로 갖을 수 있음
주로 용어 사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용
<dl> 태그 안에 <dt> 용어에 대한 <dd>설명이 되어있음.
여러개의 용어<dt>에 대한 설명<dd> 이 1개일 때에도 사용됨.
용어<dt>가 하나이고 여러개의 <dd> 일때에도 사용 가능
<dd></dd> <dd></dd> 등등
<dl> 안 각각의 이름-값 그룹을 <div>로 감싸서 스타일링을 할때 유용하게 할 수도 있음.
<dt>와 <dd> 의 형제로 <div>를 사용 할 순 없음.
표
복잡한 데이터를 행과 열의 형태로 나타낼 수 있는 태그
<table>
-테이블 태그를 이용하여 레이아웃을 만드는것은 지양하는게 좋다. 시멘틱 태그를 이용하여 표현하도록 노력하기.
<tr> table row 가로줄
<th> 굵은글씨, 무언가를 행이나 열을 대표하는 태그
그 무언가를 명시해줘야함. - <th scope="col"></th>
<th> scope="row" 행을 대표하는 것
<td colspan="2"></td>-> 2칸을 차지할때 차지하는 영역을 넓혀서 사용 할 수도 있음.
<td> table data 단순히 데이터들을 말함
table 도 구획을 나눠서 마크업 할 수 있음
table 의 t를 따서
<head>역할을 하는것은 <thead>
<footer> 역할을 하는것은 <tfoot>
<table> 밑에 <thead>, <thead>의 형제 태그로 <tbody>,<tfoot>만 있을 수 있음.
나중에 css를 통하여 thead, tbody, tfoot 영역만 스타일링을 할 수 있음.
<tbody> 부분을 품목별로 따로따로 태그도 가능
<tbody>~~~</tbody>
<tbody>@@@</tbody>
<caption> 표 설명요소
표의 전체를 표현할 수 있는 설명이나 부가적인 요소들을 설명 할떄 사용
<caption>은 <table> 요소의 첫번째 자식이어야함.
<tr> 이나 <thead>가 오기 전에 <cation>이 먼저 와야 함.
<cation>이 밑이나 옆쪽에 오게 하려면 css를 이용해야 함.
<table>이 <figure> 요소의 자식인 경우 <cation> 태그가 아닌
<figcation>을 대신 사용해야 한다.
'제로베이스_정리' 카테고리의 다른 글
| Form 관련 요소 (0) | 2024.04.09 |
|---|---|
| 임베디드요소 (0) | 2024.03.19 |
| 구조를 나타내는 요소 (4) | 2024.03.17 |
| 포매팅/하이퍼링크 (1) | 2024.03.17 |
| 텍스트 요소 (0) | 2024.03.17 |
