4. 목록과 테이블

4.1 순서 있는 목록

순서 있는 목록 (ol) 태그

<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

<ol type="A">
    <li>알파벳 A</li>
    <li>알파벳 B</li>
</ol>

<ol start="5">
    <li>5번부터 시작</li>
    <li>6번 항목</li>
</ol>

실제 브라우저에서 보여지는 모습:

  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
  1. 알파벳 A
  2. 알파벳 B
  1. 5번부터 시작
  2. 6번 항목

4.2 순서 없는 목록

순서 없는 목록 (ul) 태그

<ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>

<ul style="list-style-type: square;">
    <li>사각형 불릿</li>
    <li>사각형 불릿</li>
</ul>

실제 브라우저에서 보여지는 모습:

  • 항목 1
  • 항목 2
  • 항목 3
  • 사각형 불릿
  • 사각형 불릿

4.3 중첩 목록

목록 안에 목록 넣기

<ul>
    <li>메뉴 1
        <ul>
            <li>서브메뉴 1-1</li>
            <li>서브메뉴 1-2</li>
        </ul>
    </li>
    <li>메뉴 2
        <ul>
            <li>서브메뉴 2-1</li>
            <li>서브메뉴 2-2</li>
        </ul>
    </li>
</ul>

실제 브라우저에서 보여지는 모습:

  • 메뉴 1
    • 서브메뉴 1-1
    • 서브메뉴 1-2
  • 메뉴 2
    • 서브메뉴 2-1
    • 서브메뉴 2-2

4.4 기본 테이블

테이블 기본 구조

<table border="1">
    <tr>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
    <tr>
        <td>내용 1</td>
        <td>내용 2</td>
    </tr>
</table>

실제 브라우저에서 보여지는 모습:

제목 1 제목 2
내용 1 내용 2

4.5 테이블 확장

테이블의 다양한 속성

<table border="1">
    <caption>학생 성적표</caption>
    <thead>
        <tr>
            <th>이름</th>
            <th>국어</th>
            <th>영어</th>
            <th>수학</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>90</td>
            <td>85</td>
            <td>95</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">평균: 90점</td>
        </tr>
    </tfoot>
</table>

실제 브라우저에서 보여지는 모습:

학생 성적표
이름 국어 영어 수학
홍길동 90 85 95
평균: 90점

4.6 실습 과제

다음 요구사항을 만족하는 웹 페이지를 만들어보세요:

  1. 제목: "나의 일주일 계획표"
  2. 요일별 할 일 목록 (순서 있는 목록 사용)
  3. 주간 식단표 (테이블 사용)
  4. 주간 목표 (순서 없는 목록 사용)
  5. 각 섹션에 적절한 제목 사용

예시 결과:

나의 일주일 계획표

요일별 할 일

  1. 월요일
    • 아침 운동
    • HTML 공부
  2. 화요일
    • 영어 공부
    • 프로젝트 회의

주간 식단표

요일 아침 점심 저녁
월요일 샐러드 비빔밥 닭가슴살
화요일 토스트 김치찌개 샐러드

주간 목표

  • HTML 기초 완성하기
  • 매일 30분 운동하기
  • 영어 단어 50개 외우기

4.7 퀴즈

다음 문제를 풀어보세요:

  1. 순서 있는 목록을 만들 때 사용하는 태그는 무엇인가요?
  2. 순서 없는 목록을 만들 때 사용하는 태그는 무엇인가요?
  3. 테이블의 행을 만들 때 사용하는 태그는 무엇인가요?
  4. 테이블의 제목 셀을 만들 때 사용하는 태그는 무엇인가요?
  5. 테이블에서 여러 열을 합칠 때 사용하는 속성은 무엇인가요?

정답:

  1. <ol> 태그
  2. <ul> 태그
  3. <tr> 태그
  4. <th> 태그
  5. colspan