1) ul.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>목록태그</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>목록태그</h1>
<h2>순서가 있는 리스트(ordered list)</h2>
<ol>
<li>사과</li>
<li>귤</li>
<li>딸기</li>
</ol>
<h2>순서가 없는 리스트(unordered list)</h2>
<ul>
<li>사과</li>
<li>귤</li>
<li>딸기</li>
</ul>
<h2>정의 리스트(description list)</h2>
<p>정의 리스트는 용어와 그에 대한 정의를 모아놓은 리스트로 <dl>태그로 시작합니다.</p>
<dl>
<dt>호박</dt>
<dd>-박과의 한해살이 덩굴성 채소</dd>
<dt>상추</dt>
<dd>-국화과의 한해살이 또는 두해살이 풀</dd>
</dl>
</body>
</html>
2) text.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>텍스트 관련 태그</title>
</head>
<body>
<h1>텍스트 관련 태그</h1>
<p><strong>그린컴퓨터</strong> 아카데미</p>
<p><em>그린컴퓨터</em> 아카데미</p>
<p><mark>그린컴퓨터</mark> 아카데미</p>
<p><small>그린컴퓨터</small> 아카데미</p>
<p>그린컴퓨터 <sub>아카데미</sub></p>
<p>그린컴퓨터 <sup>아카데미</sup></p>
<p><ins>그린컴퓨터</ins> 아카데미</p>
<p><del>그린컴퓨터</del> 아카데미</p>
</body>
</html>3) table.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>테이블 태그</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
</tr>
</table>
<h2>3행 4열 테이블 만들기</h2>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>제목셀</th>
<th>제목셀</th>
<th>제목셀</th>
<th>제목셀</th>
</tr>
<tr>
<td colspan="2">2행 1열 2열</td>
<td>2행 3열</td>
<td rowspan="2">2행 4열 + 3행 4열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
</body>
</html>4) 예제1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>예제1</h1>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>장학명</th>
<th>선발대상</th>
<th>비고</th>
</tr>
<tr>
<th>희망장학<br>(구,가사장학)</th>
<td colspan="2">국가장학금을 신청하여 결정된 학자금지원구간 0~3구간 학생</td>
</tr>
<tr>
<th>우수장학<br>(구,성적우수<br>역량강화장학)</th>
<td>-학기당 1회 이상지도교수 상담 필수(직전학기)<br>-직전학기 12학점 이수, 3.5이상<br>-학부(과)별 지표에 따라 선발</td>
<td>*성적 이외의 학부(과)별 지표는 학과 홈페이지 참고<br>*선발결과 관련 학과사무실로 문의</td>
</tr>
</table>
<h1>예제2</h1>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>장학명</th>
<th>신청시기</th>
<th>신청방법</th>
<th>제출서류</th>
</tr>
<tr>
<td>복지장학</td>
<td rowspan="4">12월 / 6월</td>
<td rowspan="5">uwins - 장학신청<br>(매학기 신청)</td>
<td>장애인증명서/가족관계증명서</td>
</tr>
<tr>
<td>공무원본인장학</td>
<td>재직증명서</td>
</tr>
<tr>
<td>행복나눔명예장학</td>
<td>신청서</td>
</tr>
<tr>
<td>행복나눔장학</td>
<td>신청서</td>
</tr>
<tr>
<td>가족장학</td>
<td>5월 / 11월</td>
<td>가족관계증명서</td>
</tr>
<tr>
<td>국가유공자본인장학</td>
<td rowspan="3">입학금<br>납부 전</td>
<td rowspan="2">학생복지팀 제출</td>
<td>교육지원대상자증명서</td>
</tr>
<tr>
<td>국가유공자자녀장학</td>
<td>대학수업료등 면제대상자증명서</td>
</tr>
<tr>
<td>교직원자녀장학 (교직원이 신청)</td>
<td>UWIN-원스탑</td>
<td>신청서, 재직증명서, 가족관계증명서</td>
</tr>
</table>
<h2>테이블에서 콘텐츠를 하나의 그룹으로 묶을 때 사용<thead><tbody><tfoot></h2>
<table border="1" cellspacing="0" cellpadding="10">
<caption>출장비 내역</caption>
<thead>
<tr>
<th>출장비 내역</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr>
<td>교통비</td>
<td>93,000원</td>
</tr>
<tr>
<td>식대비</td>
<td>6,000원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총합계</td>
<td>99,000원</td>
</tr>
</tfoot>
</table>
<h1>테이블 전체의 마크업</h1>
<table border="1" cellspacing="0" cellpadding="10">
<caption>본사 부서별 연락처</caption>
<tr>
<th colspan="2">부서명</th>
<th>전화번호(02+)</th>
<th>팩스번호(02+)</th>
</tr>
<tr>
<th colspan="2">종합상황실</th>
<td>310-1300~1304</td>
<td>310-1300~1304</td>
</tr>
<tr>
<th rowspan="2">비서실</th>
<th>비서실장</th>
<td>310-1110</td>
<td rowspan="2">314-8184(사장)<br>312-7894(감사)</td>
</tr>
<tr>
<th>비서실</th>
<td>314-8184(사장)<br>312-7894(감사)</td>
</tr>
<tr>
<th rowspan="3">홍보실</th>
<th>홍보실장</th>
<td>310-1110</td>
<td rowspan="3">314-8184</td>
</tr>
<tr>
<th>홍보부</th>
<td>314-1112</td>
</tr>
<tr>
<th>국제협력부</th>
<td>314-1113</td>
</tr>
</table>
</body>
</html>
5) img.html
<img src="../images/dog.jpg" alt="강아지" width="400">
<p>
<video controls width="400" autoplay muted loop><!-- muted적용해야 autoplay가 적용됨 -->
<source src="../images/dog2.mp4" type="video/mp4">
</video>
</p>
'노력이 좋아서' 카테고리의 다른 글
| <step13>'css_text, boxmodel, table' (0) | 2022.04.06 |
|---|---|
| <step12> 'html_div/ form/ select/ input' (0) | 2022.04.05 |
| <step10> '웹 시안, 앱 시안' (1) | 2022.04.01 |
| <step9> '웹 시안' (0) | 2022.03.31 |
| <step8> 'Photoshop' (0) | 2022.03.30 |