04.25 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step06_ol.html</title>
<style>
.my-ol{
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h1>순서 있는 목록(ordered list) ol 요소</h1>
<h2>공부할 순서 입니다</h2>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<h2>공부할 순서 입니다</h2>
<ol class="my-ol">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>ol 태그
ol (ordered list)은 1, 2, 3, 4... 같은 규칙적인 순서를 표현할 때 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step07_dl.html</title>
<style>
/*
가운데 정렬되는 width 가 고정된 컨테이너를 만들기 위해서는
width 가 결정이 되어야 하고, 좌우 마진이 auto 이면 된다.
*/
.container{
width: 768px;
margin-left: auto;
margin-right: auto;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="container">
<h1>정의형 목록 (definition list) dl 요소</h1>
<dl>
<dt>제목</dt>
<dd>자세한 내용...</dd>
<dt>HTML</dt>
<dd>Hyper Text Markup Language 의 약자 입니다.</dd>
<dt>css</dt>
<dd>Design 적인 요소를 결정 합니다.</dd>
<dt>javascript</dt>
<dd>language 적인 요소를 담당 합니다.</dd>
</dl>
</div>
</body>
</html>dl 태그
dl (definition list) 태그는 정의형 목록을 지정하며, dl에는 목록을 dt에는 용어를 dd에는 내용을 작성한다.
dd 에 내용을 삽입하면 자동으로 들여쓰기가 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step08_table.html</title>
<style>
.collapse{
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>표(table) 형식으로 정보를 출력하기</h1>
<table>
<tr> <!-- table row -->
<th>번호</th> <!--table header-->
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>1</td> <!-- table data -->
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</table>
<table border="1">
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>1</td>
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</table>
<table border="1" class ="collapse">
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>1</td>
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</table>
</body>
</html>table 태그
table을 사용하여 표를 만들 수 있다.
tr은 table row를 뜻하고, th는 헤더, td는 데이터를 의미한다.
border를 통해서 선이 2줄 있는 표를 만들 수 있고, collapse는 선이 1줄 있는 표를 보여준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step08_table2.html</title>
</head>
<body>
<h1>table 요소 사용하기</h1>
<table border="1">
<caption>회원목록</caption>
<colgroup>
<col width="100">
<col width="200">
<col width="300">
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</tbody>
</table>
<h1>tfoot 이 있는 table</h1>
<table border="1" class="my-table">
<caption>GS25 현금, 카드 매출 내역</caption>
<colgroup>
<col width="200">
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>상품명</th>
<th>현금</th>
<th>카드</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합계</th>
<td>4,300원</td>
<td>800원</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>삼각김밥</td>
<td>800</td>
<td>0</td>
</tr>
<tr>
<td>도시락</td>
<td>3,500</td>
<td>0</td>
</tr>
<tr>
<td>박카스</td>
<td>0</td>
<td>800</td>
</tr>
</tbody>
</table>
</body>
</html>이 테이블에서
caption => 표 제목
thead => 머리말
tfoot => 꼬리말
tbody => 본문
으로 작성하였고,
colgroup을 통해 열을 그룹화하여 각 열에 스타일을 지정하였다.
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td colspan="2">9</td>
<!-- colspan "가로로 합칠 컬럼의 갯수"-->
</tr>여기서 colspan="2" 속성은 열을 2칸 병합하고
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td rowspan="2">10</td>
<!-- rowspan = "세로로 합칠 컬럼의 갯수"-->
</tr>rowspan은 행을 2칸 병합한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step09_form.html</title>
</head>
<body>
<div class="container">
<!--
form 은 클라이언트가 입력하거나 선택한 정보를 서버에 전송할 양식이다
action = "서버에 전송할 경로"
현재는 서버가 없기 때문에 action 을 테스트 할수는 없다.
양식 작성법만 학습할 예정
-->
<h1>폼(form) 요소 작성하기</h1>
<form action="login.jsp">
<!--
label 의 for 속성의 값과
input 의 id 속성의 값과 동일하게 작성이 되어야 된다.
name 속성의 값은 서버에서 필요한 값이다.
-->
<label for="email">이메일</label>
<input type="text" id="email" name="email">
<label for="pwe">비밀번호</label>
<input type="password" id="pwd" name="pwd">
<button type="submit">로그인</button>
</form>
</div>
<div class="container">
<h1>form 요소를 줄을 맞춰서 출력하기</h1>
<form action="login.jsp">
<table>
<tr>
<td><label for="email">이메일</label></td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td><label for="pwd">비밀번호</label></td>
<td><input type="password" id="pwd" name="pwd"></td>
</tr>
<tr>
<td></td>
<td><button type="submit">로그인</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>form
폼 요소를 작성하기 위해서는 용도에 맞는 타입을 지정해주는것이 중요하다.
input type 에는 많은 속성 값들이 존재하는데
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step09_form3.html</title>
</head>
<body>
<div class="container">
<h1>html5 에서 추가된 폼 요소</h1>
<p>
웹 브라우저의 종류와 버전별로 지원이 될수도 있고 안될수도 있다.
<a href="http://caniuse.com">여기서 확인</a>
</p>
<form action="insert.jsp">
색상 선택 <input type="color" name="color">
<br>
범위 선택 <input type="range" name="range" min="0" max="100" step="10" value="50">
<br>
날짜 선택 <input type="date" name="date">
<br>
시간 선택 <input type="time" name="time">
<br>
날짜, 시간 선택 <input type="datetime-local" name="datetime">
<br>
숫자 <input type="number" name="number" min="0" max="10" step="1">
<br>
이메일 <input type="email" name="email">
<br>
<button type="submit">저장</button>
</form>
</div>
</body>
</html>
이번에 사용한 속성값은
color => 색을 지정할 수 있는 입력 필드를 정의
range => 범위를 지정하는 슬라이드 바를 형성
date => 날짜 지정
time => 시간 선택
datetime-local => 날짜 및 시간을 동시에 지정
number => 숫자만 입력할 수 있는 입력 필드 정의
email => 이메일 주소를 입력하는 입력 필드 정의
button submit => 제출 버튼을 정의
그 외에 checkbox, radio 등이 있다.
<fieldset>
<legend>취미 정보 선택</legend>
<label>
<input type="checkbox" name="hobby" value="soccer"> 축구
</label>
<label>
<input type="checkbox" name="hobby" value="baking" checked> 바이킹
</label>
<label>
<input type="checkbox" name="hobby" value="piano" checked> 피아노
</label>
<label>
<input type="checkbox" name="hobby" value="etc"> 기타
</label>
</fieldset>
하고 싶은말
<br>
<textarea name="comment" rows="10">안녕하세요
김구라
해골
원숭이
</textarea> <!-- 개행 기호 들여쓰기 해석-->폼(form) 요소에서는 이미 저장된 값을 출력한 체로 응답을 해야할 경우가 있다.
가입된 회원의 정보를 보는 경우, DB에 먼저 저장된 내용을 출력해 주어야 한다.
이 때 기본값을 설정해주는데 checkbox 타입에서 checked 바이킹과 피아노 option value에 selected로 설정된 피아니스트 같은 경우 웹페이지를 열었을 때 선택하지 않아도 체크되어 있는 것을 확인할 수 있다.
