01. 텍스트 태그와 목록 태그를 사용한 문제
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
1. 제목은 가장 큰 제목부터 단계별로 작아지는 태그를 사용한다.
2. 텍스트 단락에 줄 바꿈이 있다.
3. 목록 부분은 '순서 없는 목록'으로 작성한다.
4. 목록 내용 중 굵게 표시한 부분과 이탤릭체로 표시한 부분은 중요하지 않지만 다른 텍스트와 구별하기 위한 것이다.
5. '혜택'내용은 '순서 있는 목록'으로 표시하되, 숫자는 알파벳 소문자를 사용한다.
6. 문서 마지막에 이미지는 삽입 안 해도 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문제 1</title>
</head>
<body>
// 코드를 작성하세요
</body>
</html>결과 화면
A. 해설
1. 제목은 가장 큰 제목부터 단계별로 작아지는 태그를 사용한다.
--> '수습 국원 모집', '방송에 . . . 환영합니다', '혜택'을 각각 <h1>, <h2>, <h3> 태그를 사용한다.
2. 텍스트 단락에 줄 바꿈이 있다.
--> '교내 방송국 . . . 지원 바랍니다.' 부분을 <p>태그를 이용하고, '상관없습니다.' 부분 다음에 <br>태그를 사용한다.
3. 목록 부분은 '순서 없는 목록'으로 작성한다.
--> <ul>, <li>태그를 사용하여 나타낸다.
4. 목록 내용 중 굵게 표시한 부분과 이탤릭체로 표시한 부분은 중요하지 않지만 다른 텍스트와 구별하기 위한 것이다.
--> 굵게 표시한 부분은 <b>태그, 이탤릭체로 표시한 부분은 <i>태그를 사용한다.
5. '혜택'내용은 '순서 있는 목록'으로 표시하되, 숫자는 알파벳 소문자를 사용한다.
--> <ol type="a">, <li>태그를 사용한다.
6. 문서 마지막에 이미지는 삽입 안해도 된다.
--> 삽입한다면 <img src="이미지 경로" alt="">태그를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문제 1</title>
</head>
<body>
<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공에 상관없습니다. <br>
방송에 관심 있는 여러 학우의 지원 바랍니다.</p>
<ul>
<li><b>모집 기간 :</b> 3월 2일 ~ 3월 11일</li>
<li><b>모집 분야 :</b> 아나운서, PD, 엔지니어</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
<h3>혜택</h3>
<ol type="a">
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ol>
<img src="images/mic.jpg" alt="">
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠문제 풀이 > HTML 문제 풀이' 카테고리의 다른 글
| 04. <input> 태그를 사용한 문제 II (0) | 2022.03.07 |
|---|---|
| 03. <input> 태그를 사용한 문제 I (0) | 2022.03.07 |
| 02. 표 태그를 사용한 문제 (0) | 2022.02.11 |