20240731수업
지난 포스팅에서 다뤘던 input type태그, table태그, a태그 등을 이용하여 로그인창과 회원가입창을 구현해보겠습니다.
로그인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
table, td{
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 60%;
margin: 0 auto;
}
td{
padding: 5px 10px;
text-align: center;
}
.input1 {
width: 100%;
}
</style>
</head>
<body>
<form action="https://www.nate.com" method="POST">
<table>
<caption><h3>로그인</h3></caption>
<tr>
<td>아이디</td>
<td><input type="text" name="userid" class="input1" /></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="passwd" class="input1" /></td>
</tr><br>
<tr>
<td colspan="2">
<input type="submit" value="로그인" />
<input type="reset" value="초기화" />
</td>
</tr>
</table>
</form>
</body>
</html>See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.
회원가입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
background-image: url('images/paper.gif');
background-repeat: repeat;
}
</style>
</head>
<body>
<form action="memreg.jsp" method="POST">
<!-- input타입은 항상 form태그(또는 a태그나 js)를 포함해서 작업 (submit이 있을때)-->
<table border="0" width="850">
<caption><h3>회원가입</h3></caption>
<tr>
<td>이름</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>주민번호</td>
<td>
<input type="text" name="nationalid1" />
- <input type="text" name="national2" /></td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" name="userid" /></td>
</tr>
<tr>
<td>비밀번호</td>
<td style><input type="password" name="passwd" /></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" name="email1" />
@ <input type="text" name="emil2" /></td>
<td>
<select size>
<!-- name필요x -->
<option selected value=" ">직접 입력</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="daum.net">daum.net</option>
<option value="kakap.com">kakao.com</option>
</select></td>
</tr>
<tr>
<td>우편번호</td>
<td><input type="text" name="zipcode" maxlength="5"/></td>
</tr>
<tr>
<td>주소</td>
<td>
<input type="text" name="address" /><br>
<input type="text" name="address" /></td>
</tr>
<tr>
<td>핸드폰번호</td>
<td>
<select name="tel1">
<option>선택</option>
<option>010</option>
<option>011</option>
<option>013</option>
<option>016</option>
<option>017</option>
<option>018</option>
<option>019</option>
</select>
-<input type="text" name="tel2" maxlength="4"/>
-<input type="number" name="tel3" maxlength="4"/>
<!-- 클라이언트 html을 유일하게 조작할 수 있는 js를 통해 maxlength가 안먹는 문제를 해결할 수 있음. -->
</td>
</tr>
<tr>
<td>직업</td>
<td><select name="job" size="4">
<option value="student">학생</option>
<option value="computer/internet">컴퓨터/인터넷</option>
<option value="press">언론</option>
<option value="public">공무원</option></td>
</tr>
<tr>
<td>메일/SMS정보 수신</td>
<td>
<input type="radio" name="sms" id="on" value="smson" checked/>
<label for="smson">수신</label>
<input type="radio" name="sms" id="off" value="smsoff" />
<label for="smsoff">수신 거부</label>
</td>
</tr>
<tr>
<td>관심분야</td>
<td>
<input type="checkbox" name="coffee"id="coffee1" value="coffee1" />
<label for="coffee1">생두</label>
<input type="checkbox" name="coffee"id="coffee2" value="coffee2" />
<label for="coffee2">원두</label>
<input type="checkbox" name="coffee"id="coffee3" value="coffee3" />
<label for="coffee3">로스팅</label>
<input type="checkbox" name="coffee"id="coffee4" value="coffee4" />
<label for="coffee4">핸드드립</label>
<input type="checkbox" name="coffee"id="coffee5" value="coffee5" />
<label for="coffee5">에스프레소</label>
<input type="checkbox" name="coffee"id="coffee6" value="coffee6" />
<label for="coffee6">창업</label>
</td>
</tr>
<tr>
<td>자기소개</td>
<td>
<textarea name="intro" rows="5" style="width: 600px; height: 150px;"></textarea>
<!-- rows="5":글자 cols="80":80자 -->
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="회원가입"/>
<input type="reset" value="원래대로"/>
</form>
</body>
</html>
See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.
name을 쓰는이유:서버에 보낼때 query string이나 form에 담아서 보내야 하기 때문
background-image: url("") ""안에 이미지 링크나 ' '안에 파일 주소 넣으면됨.
background-repeat은 x축이나 y축으로 반복시키거나 전체 벡터로 반복가능
query parameters( 물음표 뒤에 = 로 연결된 key value pair 부분)을 url 뒤에 덧붙여서 추가적인 정보를 서버 측에 전달하는 것이다. 클라이언트가 어떤 특정 리소스에 접근하고 싶어하는지 정보를 담는다.
위 링크를 메모장에 복사+붙여넣기 하면 다음과 같이 나온다.
한글은 인코딩되서 코드화되서 위 이상한언어로바뀐다음에 사이트에서 다시 바꿔서 한글로 인코딩된다.
live server:5500의 의미는 라이브서버가 (예를들어)마우스포트(엔진:80)을 비켜가서 5500으로 나오는 것이다.
'HTML|CSS' 카테고리의 다른 글
| [html/css]링크 버튼 만들기,vertical align (0) | 2024.08.03 |
|---|---|
| [html/css] 다양한 표현 방식 (0) | 2024.08.03 |
| [html/css] Input type (0) | 2024.08.02 |
| [html/css] table태그 (표 만들기), reset css(스타일 시트 초기화) (0) | 2024.08.01 |
| [html/css] a 태그(문서or링크 연결),padding과 margin의 차이 (0) | 2024.08.01 |