목록과 표

이인재·2022년 7월 6일
0

HTML / CSS

목록 보기
2/15

<ul>, <ol>

<ol>

  • 정렬된 목록
  • 보통 숫자 목록으로 표현
  • type 속성 사용해 숫자, 영문, 로마자로 설정 가능
  • reversed 속성으로 숫자나 영문 등을 역전시킬 수 있음
  • start 속성으로 시작하는 순서를 변경 가능(li에 value를 줘도 같음)
    	<ol start="4"> = <li vlaue="4">

<ul>

  • 비정렬 목록
  • 깊이에 따라 bullet point 달라짐 (CSS로 변경 가능)

<dl>, <dt>, <dd>

<dl>

  • 용어를 정의하거나 설명하는 목록
  • <dt>(용어), <dd>(설명) 태그를 자식으로 가짐

<table>, <tr>, <th>, <td>

<tr>(table row)

<th> (table head)

  • 행이나 열을 대표하는 명칭 (굵은 글씨)
  • scope 속성 사용 가능 (행, 열을 대표하는 지 명시) 스크린리더용!
    ex) scope = "col" / scope = "row"

<td> (table data)


<thead>, <tbody>, <tfoot>

  • <tr>만 단순히 나열된 것처럼 보이지 않도록 사용
  • <thead>, <tbody>, <tfoot> 자식으로 <tr> 사용
  • 구획을 나누어 스타일링하기 용이

<caption>

  • 표의 설명 또는 제목 나타냄.
  • <table> 요소의 첫 번째 자식이어야 한다!!
  • <table> 가 아닌 곳에 설명을 붙이려면 <figure>로 감싸서 <figcaption>을 대신 사용

0개의 댓글