[HTML/CSS] 2. HTML 실습

Mar 10, 2025

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>
    <h2>📃 일주일 시간표 요약</h2>
    <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>
    <table border="1">
        <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>
</body>
</html>

입력 양식 만들기


<!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>
    <form>
        <div>
            이름: 
            <input type="text" placeholder="이름" name="이름">
        </div>
        <div>
            성별: 
            <input type="radio" name="성별" value="남자" checked>남자
            <input type="radio" name="성별" value="여자">여자
            <input type="radio" name="성별" value="그외">그 외        
        </div>
        <div>
            좋아하는 색:
            <input type="checkbox" name="색상" value="붉은색" checked>붉은색
            <input type="checkbox" name="색상" value="파란색">파란색
            <input type="checkbox" name="색상" value="노란색">노란색
            <input type="checkbox" name="색상" value="초록색">초록색
        </div>
        <div>
            혈액형: 
            <select name="혈액형" >
                <option value="모름" selected>모름</option>
                <option value="A">A형</option>
                <option value="B">B형</option>
                <option value="O">O형</option>
                <option value="AB">AB형</option>
            </select>
        </div>
        <textarea name="메시지" placeholder="메시지 입력"></textarea>
        <div>
            <input type="submit" value="전송">
        </div>
    </form>
</body>
</html>

See more posts

[HTML/CSS] 2. HTML 실습

학교 시간표 만들기

입력 양식 만들기

More articles

[HTML/CSS] 4. CSS 선택자

[HTML/CSS] 3. CSS 기본

[프로그래머스] (MySQL) 6. 이름이 있는 동물의 아이디

[프로그래머스] (MySQL) 5. 성분으로 구분한 아이스크림 총 주문량