✅답안과 비교하여 스스로 HTML 문서 작성 개선점 짚어보기 완료(2022.02.09)
[실습1]글자 목록 태그1. ✅
불필요한 줄바꿈이나 들여쓰기는 자칫 코드를 더 복잡하게 보이게 만드는 것 같아 삼가야겠다. 특히 '프로그래밍 언어' 리스트들은 개행 없이 한 줄로 나눠쓰는 것이 알맞다. <ol> 리스트도 들여쓰기 없이 써도 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>[실습1]글자목록태그실습</title>
</head>
<body>
<h1>HTML5 정복</h1>
<h3>담당 강사 : 김햇살</h3>
<p>이메일 : bettermyself@dream.or.kr</p>
<hr>
<ul>
<li>프로그래밍 언어</li>
<ul>
<li><u>Java</u></li>
</ul>
<li>데이터 베이스</li>
<ul>
<li><s>Oracle</s></li>
</ul>
<li>화면 구현</li>
<ol>
<li><mark>HTML5</mark></li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
<li>서버 개발 기술</li>
<ol type="i">
<li><s>JDBC</s></li>
<li>Servlet</li>
<li>JSP</li>
<li>AJAX</li>
</ol>
<li>소프트웨어 모델링</li>
<ol reversed="reversed">
<li>DB_Modeling</li>
<li>UML<sub><unified modeling language></sub></li>
</ol>
<li>프레임워크</li>
<ol type="a">
<li><b>Spring</b></li>
<li><i>MyBatis</i></li>
</ol>
</ul>
</body>
</html>
[실습2]글자 목록 태그2. ✅
인라인 스타일시트는 자칫 수정이 필요할 때 지나친 번거로움이 따를 수 있어 외부 스타일시트로 쓰는 것이 유지보수면에 있어 최선이라고 한다. 실습 문제 풀고 그 다음날 진도에서 배웠다ㅎㅎ... 이 경우는 .html 파일 상단의 <head> 태그 사이에 내부 스타일시트로서 우선 고쳐볼 수 있겠다.
<style>
thead { background-color: aqua; }
tbody { background-color: orange; }
tfoot { background-color: yellow; }
</style>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>[실습2]표태그실습</title>
</head>
<body>
<table border="1px">
<thead style="background-color : aqua;">
<th colspan="5">하수정 보석 컬렉션</th>
</thead>
<tbody style="background-color : orange;">
<tr>
<th rowspan="5">제품리스트</th>
<th>코드</th>
<th>분류</th>
<th>가격</th>
<th>구매가능 개수</th>
</tr>
<tr>
<td>01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr>
<td>01-469</td>
<td>가을</td>
<td>150,000원</td>
<td>1700</td>
</tr>
<tr>
<td>01-470</td>
<td>여름</td>
<td>950,000원</td>
<td>2500</td>
</tr>
<tr>
<td>01-471</td>
<td>봄</td>
<td>120,000원</td>
<td>3200</td>
</tr>
</tbody>
<tfoot style="background-color : yellow;">
<tr>
<th colspan="3">총합</th>
<td>1,420,000원</td>
<td>8468</td>
</tr>
</tfoot>
</table>
</body>
</html>'Frontend > HTML' 카테고리의 다른 글
| [HTML/수업 과제 practice] 폼 관련 태그 (0) | 2022.02.09 |
|---|---|
| [HTML5] 폼 태그 | form | input | type | button (0) | 2022.02.09 |
| [HTML5] 하이퍼링크 태그 | a | href | target (0) | 2022.02.09 |
| [HTML5] 멀티미디어 태그 | img | audio | video (0) | 2022.02.09 |
| [HTML5] 영역 분할 태그 | div | span | iframe | 시맨틱 (0) | 2022.02.09 |
