대학교 전공시간에 배운 강의 내용을 정리하는 글이 될것이다. 모르는 내용이나 궁금했던 내용들도 더 찾아본뒤 작성할 예정이다.
(과제의 내용이나 실습된 내용이 주된 내용이 될것이다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>web 커피 메뉴</h1>
<hr>
<h2>아메리카노 5000원</h2>
<p>에스프레소에 물을 추가한 것입니다.</p>
<h2>카페오레 6000원</h2>
<p>에스프레소에 우유를 넣은 커피입니다.</p>
<h2>카푸치노 6000원</h2>
<p>커피 위에 우유 거품을 얹은 커피입니다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>과목별 참고도서 목록</h2>
<ul>
<li>IT기술의 이해</li>
<ol type="1">
<li>최윤철,임순번,한탁돈 공저, 컴퓨터와 IT기술의 이해</li>
<li>D.Morley,C.parker,Understanding Computers 15th Ed.</li>
<li>G.Shelly, M.Vermaat,Disovering Computers</li>
</ol>
<li>웹프로그래밍</li>
<ol type="1">
<li>임순범,박희민 공저, HTML5 웹프로그래밍 입문</li>
<li>최윤철, 임순범 공저, 소셜미디어 시대의 인터넷 이해</li>
<li>B.McLaughlin, What is HTML5</li>
</ol>
</ul>
<h2>지정도서</h2>
<dl>
<dt>지정도서 서비스란?</dt>
<dd>수업에 필요한 주교재 및 참고문헌 등의 필수도서를 도서관 1층 대출/지정도서실에서 별도로 비치하여 관리하는 제도</dd>
<dt>신청기간</dt>
<dd>매년 1월과 6월 둘째주 학겨 홈페이지에 공지</dd>
</dl>
</body>
</html>ol,ul,li는 html에서 목록을 표시할때 사용하는 태그이다.
<ol> (Ordered List, 순서 있는 목록)
<ul>(Urdered List, 순서 없는 목록)
<li>(List Item, 목록 항목)
물론 ul를 사용하고도 css를 통해 순서를 만들어줄수는 있다.
dl,dt,dd는 설명하는 목록을 만들떄 사용하는 태그이다.
<dl> (Description List/Definition List,정의 목록)
<dt> (Definition Term, 정의할 항목)
<dd> (Definition Description, 정의 설명)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px">
<tr>
<th>책 제목</th>
<th>저자</th>
<th>출판사</th>
</tr>
<tr>
<td>HTML5 웹프로그래밍 입문</td>
<td>임순범,박희민</td>
<td>생능</td>
</tr>
<tr>
<td>소셜미디어 시대의 인터넷활용</td>
<td>최윤절,임순범</td>
<td>생능</td>
</tr>
<tr>
<td>What Is HTML5?</td>
<td>B.McLaughlin</td>
<td>O`Reilly</td>
</tr>
</table>
</body>
</html>table: 하나의 테이블은 선언한다.
tr:각각의 행을 만든다.
th:보통 열의 제목에 주로 사용된다.
td:테이블의 데이터셀을 나타낸다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px">
<caption>과목별 추천 도서</caption>
<thead>
<tr>
<th>과목</th>
<th>책제목</th>
<th>저자</th>
<th>출판사</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합계</th>
<th colspan="3">3권</th>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="3">웹프로그래밍</td>
<td>HTML5 웹프로그래밍 입문</td>
<td>임순범,박희민</td>
<td>생능</td>
</tr>
<tr>
<td>소셜미디어 시대의 인터넷 이해</td>
<td>최윤절,임순범</td>
<td>생능</td>
</tr>
<tr>
<td>What Is HTML5?</td>
<td>B.McLaughlin</td>
<td>O`Reilly</td>
</tr>
</tbody>
</table>
</body>
</html>caption:표의 설명 제목(필수 작성은 아님)
thead:표의 머리글 부분 정의
tbody:표의 본문 부분 정의
tfoot:표의 바닥글 부분 정의,결과 값 도출이 필요할 때 주로 사용한다.
rowspan:위아래 row의 셀 병합
colspan:옆칸의 column의 셀 병함
'front-end > html' 카테고리의 다른 글
| html 3,4주차 강의 (0) | 2024.10.15 |
|---|---|
| Emmet (0) | 2024.08.03 |
