참고풀이 결과]
문제]
다음 소스코드를 참고하여 실행 결과 화면과 같은 직원 채용 페이지를 만들어 보자. 이 작업을 통해 태그 선택자 body, 태그 선택자와 클래스 선택자의 활용법을 익히고 텍스트와 관련된 CSS 속성을 알 수 있다,
- 소스코드 -
<!DOCTYPE>
<html lang="kor">
<head>
<mata charset="utf-8">
<title>직원 채용</title>
</head>
<body>
<h1>직원 채용</h1>
<h3>- 채용 인원 : 00명</h3>
<h3>- 지원 자격</h3>
<ul>
<li><span class="red">학력 제한 없음</span></li>
<li>남자에 한하여 병역을 필하거나 면제받은 분</li>
<li>해외여행 및 신원보증에 결격사유가 없는 분</li>
<li>외국어 능통자 및 관련 자격증 소지자 우대</li>
</ul>
<p>※ 당사는 전형 과정 중 성별, 연령에 차별을 두지 않습니다.</p>
<h3>- 지원 서류</h3>
<ol>
<li><span class="blue">이력서</span>(양식을 다운로드하여 사용)</li>
<li><span class="blue">자기소개서</span>(별도의 양식 없음)</li>
<li><span class="blue">주민등록등본</span></li>
<li><span class="blue">최종 졸업 증명서</span></li>
</ol>
<h3>- 원서 접수 : 이메일 접수</h3>
<p>※ <span class="red">2021년 12월 20일까지 접수</span>를 받으며
채용 시 조기 마감될 수 있습니다.</p>
</body>
</html>
참고 풀이]
<!DOCTYPE>
<html lang="kor">
<head>
<mata charset="utf-8">
<title>직원 채용</title>
<style>
body{
font-family:"바탕";
color:#444444;
}
h1{
font-size:30px;
color:#000000;
}
h3{
font-size:20px;
color:#222222;
}
.red{
color:#ff0000;
font-weight:bold;
}
.blue{
color:#0000ff;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>직원 채용</h1>
<h3>- 채용 인원 : 00명</h3>
<h3>- 지원 자격</h3>
<ul>
<li><span class="red">학력 제한 없음</span></li>
<li>남자에 한하여 병역을 필하거나 면제받은 분</li>
<li>해외여행 및 신원보증에 결격사유가 없는 분</li>
<li>외국어 능통자 및 관련 자격증 소지자 우대</li>
</ul>
<p>※ 당사는 전형 과정 중 성별, 연령에 차별을 두지 않습니다.</p>
<h3>- 지원 서류</h3>
<ol>
<li><span class="blue">이력서</span>(양식을 다운로드하여 사용)</li>
<li><span class="blue">자기소개서</span>(별도의 양식 없음)</li>
<li><span class="blue">주민등록등본</span></li>
<li><span class="blue">최종 졸업 증명서</span></li>
</ol>
<h3>- 원서 접수 : 이메일 접수</h3>
<p>※ <span class="red">2021년 12월 20일까지 접수</span>를 받으며
채용 시 조기 마감될 수 있습니다.</p>
</body>
</html>
대한민국의 아름다운 영토, 독도의 겨울
'프로그램 > HTML5 & JavaScript 1000제' 카테고리의 다른 글
| HTML5 24제] HTML & CSS for Beginner Chapter 07. 배경 색상 지정하기 (0) | 2021.11.05 |
|---|---|
| HTML5 23제] HTML & CSS for Beginner Cpapter 06. 회사 소개 페이지 만들기 (0) | 2021.11.05 |
| HTML5 21제] HTML & CSS for Beginner Chapter 05. 연습문제 01. (0) | 2021.10.29 |
| HTML5 20제] HTML & CSS for Beginner Chapter 04. 연습문제 02. 강의 시간표 완성하기 (0) | 2021.10.22 |
| HTML5 19제] HTML & CSS for Beginner Chapter 04. 연습문제 01. 시간표 완성하기 (0) | 2021.10.22 |
댓글