<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>중앙HTA 신입 사원 모집 공고</h1>
<p>IT 기획, 편집 부서에서 함께 할 신입 사원을 모집합니다.</p>
<h2>모집 내용</h2>
<ul>
<li>모집 직군 : 편집, 기획 부서</li>
<li>직무 내용 : 도서 프로듀싱 업무(신입 지원 가능)
<ul>
<li>도서 기획, 편집</li>
<li>도서 홍보, 독자 소통</li>
</ul>
</li>
<li>접수 마감일 : 2019년 4월 30일</li>
</ul>
<p>자세한 내용은 모집 공고 게시판을 참고하시기 바랍니다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table, th, td {
border:1px solid black; /* 테두리: 1픽셀 실선 검정색 */
border-collapse: collapse; /* 경계 없애기 */
}
th, td {
padding: 15px; /* 테두리와 콘텐츠 사이 간격을 15px로 설정 */
}
td {
text-align: center;
}
tr:nth-child(2n) {
background-color: #eee;
}
</style>
</head>
<body>
<h1>주요 SNS 사이트 이용자 비율</h1>
<p>주요 SNS 사이트의 서비스 별 이용률을 조사하였습니다.</p>
<h2>주요 SNS 사이트 서비스별 이용률(%)</h2>
<table style="width: 100%;">
<tr>
<th></th>
<th>페이스북</th>
<th>카카오스토리</th>
<th>밴드</th>
<th>인스타그램</th>
<th>트위터</th>
</tr>
<tr>
<td>2017년</td>
<td>77.7</td>
<td>58.3</td>
<td>32.5</td>
<td>16.7</td>
<td>22.1</td>
</tr>
<tr>
<td>2018년</td>
<td>23.7</td>
<td>51.0</td>
<td>40.1</td>
<td>28.1</td>
<td>14.5</td>
</tr>
</table>
<h3>분석 내용</h3>
<ul>
<li>페이스북은 개인정보 유출사고 후 이용률이 급감함</li>
<li>인스타그램 이용률이 증가하면서 트위터의 이용률이 감소함</li>
<li>국내 SNS 이용률은 큰 변동 없음</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>표의 칸 병합하기</h1>
<h2>가로 방향 칸 병합하기</h2>
<table border = "1" style="width: 100%;">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td colspan="4">1</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="2">1</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td colspan="3">1</td>
<td colspan="1">1</td>
</tr>
</table>
<h2>세로 방향 칸 병합하기</h2>
<table border="1" style="width: :100%;">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>1</td>
<td rowspan="3">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
<h2>가로/세로 방향 칸 병합하기</h2>
<table border="1" style="100%;">
<tr>
<td>구분</td>
<td colspan="2">상반기</td>
<td colspan="2">하반기</td>
</tr>
<tr>
<td rowspan="3">영업1팀</td>
<td colspan="2">매입/매출 현황</td>
<td colspan="2">매입/매출 현황</td>
</tr>
<tr>
<td>매입</td>
<td>10억</td>
<td>매입</td>
<td>15억</td>
</tr>
<tr>
<td>매출</td>
<td>20억</td>
<td>매출</td>
<td>17억</td>
</tr>
<tr>
<td colspan="1">비고</td>
<td colspan="4">상반기에 비해서 하반기의 실적이 감소되었음</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" style="width: 100%;">
<tr>
<td colspan="1">이름</td>
<td colspan="1">홍길동</td>
<td colspan="1">연락처</td>
<td colspan="1">010-111-1111</td>
</tr>
<tr>
<td colspan="1">주소</td>
<td colspan="3">서울 종로구</td>
</tr>
<tr>
<td colspan="1">이메일</td>
<td colspan="3">hong@gmail.com</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
thead th {color: red;}
</style>
</head>
<body>
<h1>표의 구조 정의하기</h1>
<p>
thead,tbody,tfoot 태그를 사용하면
표의 제목, 표의 본문, 표의 요약부를 구성할 수 있다.
</p>
<table border="1" style="width: 100%;">
<caption>
현재 예약 가능한 방 안내
</caption>
<thead>
<tr>
<th>숙소명</th>
<th>방 개수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<th>개나리방</th>
<td>1개</td>
<td>100만 원</td>
</tr>
<tr>
<th>벚꽃방</th>
<td>4개</td>
<td>250만 원</td>
</tr>
<tr>
<th>진달래방</th>
<td>4방(욕실 2개)</td>
<td>380만 원</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>창고</th>
<td colspan="2">모든 요금은 2일 1박 기준(인원 추가 시 1인당 50만 원 추가)</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1;
}
</style>
</head>
<body>
<h1>이미지 표시하기</h1>
<!--
img 태그를 사용하면 이미지를 표시할 수 있다.
<img src="이미지 파일의 경로" alt="이미지에 대한 설명"
width="이미지의 폭" height="이미지의 높이"/>
-->
<h2>프로젝트 내의 리소스 사용</h2>
<p>
<img src="images/Koala.jpg" width="200" alt="코알라 사진"/>
<img src="images/Penguins.jpg" width="200" alt="펭귄 사진"/>
<img src="images/Hydrangeas.jpg" width="200" height="200" alt="수국 사진"/>
</p>
<h2>외부 리소스 사용</h2>
<p>
<img src="http://image.iacstatic.co.kr/allkill/item/2019/04/20190419140853551r.jpg" alt="지리산 뱀사골 토종 벌집꿀" />
</p>
</body>
</html>