[HTML] 3. 학교 시간표 만들기

김주희

Mar 10, 2025

Contents

학교 시간표 만들기 문제 분석 코드 작성

✏️

학교 시간표 만들기

주어진 그림에 맞추어 학교 시간표를 HTML 파일로 제작해보자.

문제 분석

열 병합 : rowspan

행 병합 : colspan

오전의 수학, 사회, 과학, 국어의 경우 열 병합

점심시간, 프로젝트 수업의 경우 행 병합

코드 작성


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>📚 학교 시간표</h1>
    <hr>
    <p>
    <h2>📑 일주일 시간표 요약</h2>
    </p>
    <ul>
        <li>수학: 3시간</li>
        <li>국어: 3시간</li>
        <li>영어: 4시간</li>
        <li>과학: 3시간</li>
        <li>사회: 3시간</li>
        <li>체육: 2시간</li>
        <li>미술: 3시간</li>
        <li>음악: 2시간</li>
        <li>프로젝트 수업: 3시간</li>
    </ul>
    <div>
        <table border = "2">
            <tr>
                <th>시간</th>
                <th>월요일</th>
                <th>화요일</th>
                <th>수요일</th>
                <th>목요일</th>
                <th>금요일</th>
            </tr>
            <tr>
                <td>9:00 - 10:00</td>
                <td rowspan = "2">수학</td>
                <td>영어</td>
                <td rowspan = "2">과학</td>
                <td>체육</td>
                <td>미술</td>
            </tr>
            <tr>
                <td>10:00 - 11:00</td>
                <td rowspan = "2">사회</td>
                <td>음악</td>
                <td rowspan = "2">국어</td>
            </tr>
            <tr>
                <td>11:00 - 12:00</td>
                <td>영어</td>
                <td>미술</td>
                <td>수학</td>
            </tr>
            <tr>
                <td>12:00 - 13:00</td>
                <td colspan = "5">점심시간</td>
            </tr>
            <tr>
                <td>13:00 - 14:00</td>
                <td> 과학</td>
                <td> 음악</td>
                <td> 사회</td>
                <td> 국어</td>
                <td> 영어</td>
            </tr>
            <tr>
                <td>14:00 - 15:00</td>
                <td>미술</td>
                <td colspan = "3">프로젝트 수업</td>
                <td>체육</td>
            </tr>
        </table>
    </div>
</body>
</html>

See more posts

[HTML] 3. 학교 시간표 만들기

학교 시간표 만들기

문제 분석

코드 작성

More articles

[CSS] 5. CSS Display

[CSS] 4. CSS 선택자

[HTML] 2. HTML 실습

[HTML] 1. HTML 기본