본문 바로가기
AfterSchool/html 방과후

CSS: 버스표 예매 페이지와 회원가입 양식 만들기(0510)

by 노 코딩 노 라이프 2022. 5. 12.

시험기간 때문에 한 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>년&nbsp;</li>
            <li><input style="width:20px" type="text"></li>
            <li>월&nbsp;</li>
            <li><input style="width:20px" type="text"></li>
            <li>일&nbsp;</li>
            <li><input style="width:10px" type="radio" name="year" checked></li>
            <li>음력&nbsp;</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">&nbsp;<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)  (1) 2022.05.10
CSS: 테이블경계선(0419)  (0) 2022.04.19
CSS: 박스와 경계선(0414)  (0) 2022.04.14

관련글

티스토리툴바