시험기간 때문에 한 2주정도 HTML수업을 못 들었던 것 같다.
그래서 오늘은 전에 했던 것을 복습하는 시간을 가졌다.
기억이 돌아올듯 하면서 긴가 민가 했다.
조금씩 더 하다보니 기억이 돌아 올 것 같다!
오늘 복습시간에는 버스표 예매 페이지와 회원가입 양식 페이지를 만들었다!
1. 버스표 예메 페이지 만들기
1-1) 결과
1-2) 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>회원 가입 폼</title>
<style type="text/css">
table {
border-collapse:collapse;
}
table, td, th {
border: solid 1px #cccccc;
}
tr {
height: 40px;
text-align: center;
}
td, th {
padding: 5px;
}
.slow {
background-color: #fbdbf2;
color: #0000ff;
text-decoration: underline;
font-weight: bold;
}
.fast {
background-color: #fbdbf2;
color: #ff0000;
text-decoration: underline;
font-weight: bold;
}
#table_title {
height: 30px;
background-color: #eeeeee;
}
#col1 {
width: 90px;
}
#col2, #col3 {
width: 50px;
}
#col4, #col5 {
width: 80px;
}
</style>
</head>
<body>
<h2>버스표 예매</h2>
<table>
<tr id="table_title">
<th>구분</th>
<th>출발</th>
<th>도착</th>
<th>출발시간</th>
<th>소요시간</th>
</tr>
<tr>
<td id = "col1" class="slow">완행</td>
<td id = "col2">서울</td>
<td id = "col3">광주</td>
<td id = "col4">09:00</td>
<td id = "col5">03:00</td>
</tr>
<tr>
<td class = "fast">직행</td>
<td>서울</td>
<td>대구</td>
<td>10:00</td>
<td>03:30</td>
</tr>
<tr>
<td class = "fast">직행</td>
<td>서울</td>
<td>부산</td>
<td>11:00</td>
<td>04:10</td>
</tr>
</table>
</body>
</html>
table 안에 tr을 넣고 th를 하여 맨 위에 있는 구분 출발 도착 출발시간 소요시간을 정해주었다
<table>
<tr id="table_title">
<th>구분</th>
<th>출발</th>
<th>도착</th>
<th>출발시간</th>
<th>소요시간</th>
</tr>위와 같은 코드를 작성하고 id 선택자를 추가하여 테두리를 굵게 표시해주었다!
2. 회원가입 정보 입력 페이지 만들기
2-1) 결과
2-2) 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
#buttons {
margin:20px 0 0 300px;
}
#mem_title {
width: 700px;
height: 25px;
margin: 10px 0 0 20px;
border-bottom: solid 2px #1b894d;
}
#mem_form {
width: 700px;
margin: 0 0 0 20px;
font-size: 12px;
color: #888888;
padding-top: 5px;
}
.row {
height: 30px;
margin: 10px 0 0 0;
border-bottom: solid 1px #cccccc;
}
input {
width: 80px;
height: 16px;
border: solid 1px #cccccc;
}
select {
width: 80px;
height: 20px;
border: solid 1px #cccccc;
font-size: 12px;
}
.col1 {
display: inline-block;
width: 120px;
text-align: right;
}
.col2 {
display: inline-block;
margin-left: 10px;
}
.col2 li {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div id="mem_title"><img src="img/join_title.gif"></div>
<form>
<ul id="mem_form">
<li class="row">
<ul class="item">
<li class="col1"><img src="img/txt_id.gif"></li>
<li class="col2">
<ul>
<li><input type="text"></li>
<li><img src="img/chk_id.gif"></li>
<li>영문, 숫자 조합으로 4~12자 이내</li>
</ul>
</li>
</ul>
</li>
<li class="row">
<ul class="item">
<li class="col1"><img src="img/txt_pw.gif"></li>
<li class="col2">
<ul>
<li><input type="password"></li>
<li>영문, 숫자 조합으로 4~12자 이내</li>
</ul>
</li>
</ul>
</li>
<li class="row" id="pw_confirm">
<ul class="item">
<li class="col1"><img src="img/txt_pw2.gif"></li>
<li class="col2">
<ul>
<li><input type="password"></li>
</ul>
</li>
</ul>
</li>
<li class="row" id="name">
<ul class="item">
<li class="col1"><img src="img/txt_name2.gif"></li>
<li class="col2">
<ul>
<li><input type="text"></li>
</ul>
</li>
</ul>
</li>
<li class="row" id="birthday">
<ul class="item">
<li class="col1"><img src="img/txt_birthday.gif"></li>
<li class="col2">
<ul>
<li><input style="width:40px" type="text"></li>
<li>년 </li>
<li><input style="width:20px" type="text"></li>
<li>월 </li>
<li><input style="width:20px" type="text"></li>
<li>일 </li>
<li><input style="width:10px" type="radio" name="year" checked></li>
<li>음력 </li>
<li><input style="width:10px" type="radio" name="year"></li>
<li>양력</li>
</ul>
</li>
</ul>
</li>
<li class="row" id="email">
<ul class="item">
<li class="col1"><img src="img/txt_email.gif"></li>
<li class="col2">
<ul>
<li><input type="text"></li>
</ul>
</li>
</ul>
</li>
<li class="row">
<ul class="item">
<li class="col1"><img src="img/txt_hp.gif"></li>
<li class="col2">
<ul>
<li><input style="width:30px;" type="text"></li>
<li>-</li>
<li><input style="width:40px" type="text"></li>
<li>-</li>
<li><input style="width:40px" type="text"></li>
</ul>
</li>
</ul>
</li>
<li class="row" id="job">
<ul class="item">
<li class="col1"><img src="img/txt_job.gif"></li>
<li class="col2">
<ul>
<li>
<select>
<option>직업선택</option>
<option>직장인</option>
<option>사업가</option>
<option>학생</option>
<option>기타</option>
</select>
</li>
</ul>
</li>
</ul>
</li>
<li class="row" id="target">
<ul class="item">
<li class="col1"><img src="img/txt_target.gif"></li>
<li class="col2">
<ul>
<li><input style="width:10px;" type="checkbox"></li>
<li>시험대비</li>
<li><input style="width:10px;" type="checkbox"></li>
<li>업무상</li>
<li><input style="width:10px;" type="checkbox"></li>
<li>취미</li>
<li><input style="width:10px;" type="checkbox"></li>
<li>기타</li>
</ul>
</li>
</ul>
</li>
</ul> <!-- mem_form -->
<div id="buttons">
<img src="img/btn_cancel.gif"> <img src="img/btn_ok.gif">
</div>
</form>
</body>
</html>'AfterSchool > html 방과후' 카테고리의 다른 글
| CSS: 절대배치와 float배치(0517) (0) | 2022.05.18 |
|---|---|
| CSS: 블록박스와 인라인 박스개념 및 예시(0512) (0) | 2022.05.13 |
| CSS: 로그인폼 만들기(0421) (0) | 2022.05.10 |
| CSS: 테이블경계선(0419) (0) | 2022.04.19 |
| CSS: 박스와 경계선(0414) (0) | 2022.04.14 |
