Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

Sily의 개발 블로그!

HTML5 - 7. 목록(List)와 표(Table) 형식 표현을 위한 태그 본문

PoiemaWeb/HTML5

HTML5 - 7. 목록(List)와 표(Table) 형식 표현을 위한 태그

sily224 2022. 7. 4. 12:46

1. 목록 (List)

1.1 순서없는 목록 (Unordered List)

<!DOCTYPE html>
<html>
  <body>
    <h2>순서없는 목록 (Unordered List)</h2>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </body>
</html>

순서없는 목록 (Unordered List)

  • Coffee
  • Tea
  • Milk

 

 

1.2 순서있는 목록 (Ordered List)

<!DOCTYPE html>
<html>
  <body>
    <h2>순서있는 목록 (Ordered List)</h2>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  </body>
</html>

 

순서있는 목록 (Ordered List)

1. Coffee

2. Tea

3. Milk

 

type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다

“1” 숫자 (기본값)
“A” 대문자 알파벳
“a” 소문자 알파벳
“I” 대문자 로마숫자
“i” 소문자 로마숫자 
<ol type="I">
  <li value="2">Coffee</li>
  <li value="4">Tea</li>
  <li>Milk</li>
</ol>

 

Ⅱ.Coffee

Ⅳ.Tea

Ⅴ.Milk

 

 

start 어트리뷰트로 리스트의 시작값을 지정할 수 있다.

<ol start="3">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

3.Coffee

4.Tea

5.Milk

 

reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다.

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

3.Coffee

2.Tea

1.Milk

 

1.3 중첩 목록

<!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>
 

목록 태그는 내비게이션 메뉴를 만들 때 자주 사용된다.

 

중첩 목록

  • Coffee
  • Tea
    1. Black tea
    2. Green tea
  • Milk

 

 

2. 테이블

표(table)를 만들 때 사용하는 태그이다. 과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성한다.

 

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>

 

테이블 태그의 어트리뷰트는 아래와 같다.

+ border: 1px solid black; : 테두리 선을 1PX, 검정색으로 지정
        border-collapse: collapse; : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. (border-collapse : separate는 기본값으로 위 표를 의미)

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>

 

참고: https://poiemaweb.com/html5-tag-list-table

'PoiemaWeb > HTML5' 카테고리의 다른 글

HTML 5 - 9. 사용자와의 커뮤니케이션을 위한 폼 태그  (0) 2022.07.04
HTML 5 - 8. 이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그  (0) 2022.07.04
HTML5 - 6. HTML의 핵심 개념인 Hyperlink  (0) 2022.07.04
HTML5 - 5. 텍스트 관련 태그  (0) 2022.07.04
HTML5 - 4. 웹페이지의 구성하는 기본 태그  (0) 2022.07.04
'PoiemaWeb/HTML5' Related Articles more