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

문정준

Mar 07, 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>학교 시간표</title>
</head>

<body>
    <h1>📚 학교 시간표</h1>
    <hr>
    <p>
    <h3>📑 일주일 시간표 요약</h3>
    </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>09: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>

결과

Contents

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>학교 시간표</title> </head> <body> <h1>📚 학교 시간표</h1> <hr> <p> <h3>📑 일주일 시간표 요약</h3> </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>09: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>