HRD_훈련/실습

[HTML] HTML 실습 1 (25일차)

리드미. 2023. 6. 20. 21:49
728x90
반응형

문제 1

다음 화면을 보고 코드를 작성하시오.

 

 

▶ 코드

<body>
    <table>
        <caption>사과 팔아요~</caption>
        <tr>
            <th>용도</th>
            <th>중량</th>
            <th>갯수</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>선물용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>35,000원</td>
        </tr>
        <tr>
            <td>가정용</td>
            <td>5kg</td>
            <td>18~26과</td>
            <td>47,000원</td>
        </tr>
    </table>
</body>
</html>

 

 

 

 

 

문제 2

다음 화면을 보고 코드를 작성하시오.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5교시 실습 문제</title>
    <style>
        table, th, td{
            border: 1px solid #ccc;
        }
        th, td {padding: 10px 20px;}
    </style>
</head>
<body>
    <h1>수습 국원 지원 양식</h1>
    <table style="text-align: center;">
        <tr>
            <td rowspan="3">개인정보</td>
            <td>이름</td>
            <td width="200"></td>
        </tr>
        <tr>
            <td>학과/학번</td>
            <td></td>
        </tr>
        <tr>
            <td>연락처</td>
            <td></td>
        </tr>
        <tr>
            <td>지원분야</td>
            <td colspan="2"></td>
        </tr>
    </table>
</body>
</html>

 

 

 

 

 

문제 3

다음 화면을 보고 코드를 작성하시오.

 

 

▶ 코드

<!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>
    <h2>방송에 관심 있는 새내기 여러분 환영합니다.</h2>
    <div>
        교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.
        <br>평소 방송에 관심있었던 여러 학우들의 지원바랍니다.
    </div>
    <ul type="ol">
        <li><strong>모집 기간</strong> : 3월2일 ~ 3월 11일</li>
        <li><strong>모집 분야</strong> : 아나운서, PD, 엔지니어</li>
        <li><strong>지원 방법</strong> : 양식 작성 후 이메일 접수</li>
        <i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i>       
    </ul>
    <h3>혜택</h3>
    <ol type="a">
        <li>수습기자 활동 중 소정의 활동비 지급</li>
        <li>정기자로 진급하면 장학금 지급</li>
    </ol>
    <img src="img/mic.jpg" alt="카메라">
</body>
</html>

 

 

728x90
반응형