강의를 참고해 간단한 웹페이지를 만듭니다.
간단한 웹페이지를 구현하기 위해 대표적으로 "회원가입 양식"을 만들어봅니다.
Introduction
겉으로 보여지는 양식은 주로 <body> 태그 안에서 만들어집니다.
필요한 요소 : 아이디 / 비밀번호 / 비밀번호 확인 / 이름 / 성별 / 전화번호 / 이메일 / 자기소개
요소 별 특정사항 : 아이디 ~ 이름까지는 label 태그와 input태그로 text 형식으로 구현할 수 있습니다.
다만, 성별 / 전화번호 / 이메일 / 자기소개를 구현하기 위해서는 특정한 태그를 사용해야합니다.
└ 성별 : label 태그와 radio input 타입으로 선택할 수 있게 만들어줍니다.
└ 전화번호 : select 태그로 하위 option에 지역번호를 넣어주어 가장 처음 지역번호를 선택할 수 있게 지정합니다.
└ 이메일 : 전화번호와 마찬가지로 select 태그로 하위 option에 여러 개의 이메일 주소 형식을 지정합니다.
└ 자기소개 : textarea 태그를 사용하여 위의 요소들보다 많은 텍스트를 입력할 수 있게 만들고,
cols=너비(가로) / rows = 높이(세로) 를 설정해주어 입력 폼 양식을 완성합니다.
전체 코드 (sign_up.html)
<!DOCTYPE html>
<html>
<head>
<title>sign_up.html</title>
</head>
<body>
<form>
<h2>회원 가입 양식</h2>
<table>
<tr>
<td><label for="userid">- 아이디</label></td>
<td><input type="text" id="Id"></td>
</tr>
<tr>
<td><label for="password">- 비밀번호</label></td>
<td><input type="password" id="pw" name=pw>
</tr>
<tr>
<td><label for="passwordcheck">- 비밀번호 확인</label></td>
<td><input type="password" id="PwCheck" name=pwcheck>
</tr>
<tr>
<td><label for="name">- 이름</label></td>
<td><input type="text" id="Name" name=name>
</tr>
<tr>
<td><label for="gender">- 성별</label></td>
<td><input type="radio" name="gender" value="female">여성 <input type="radio" name="gender" value="male">남성
</tr>
<tr>
<td><label for="number">- 전화번호</label></td>
<td><select id="txtMobile">
<option value="02"> 02 </option>
<option value="031"> 031 </option>
<option value="032"> 032 </option>
<option value="033"> 033 </option>
<option value="041"> 041 </option>
<option value="042"> 042 </option>
<option value="043"> 043 </option>
<option value="044"> 044 </option>
<option value="051"> 051 </option>
<option value="052"> 052 </option>
<option value="053"> 053 </option>
<option value="054"> 054 </option>
<option value="055"> 055 </option>
<option value="061"> 061 </option>
<option value="062"> 062 </option>
<option value="063"> 063 </option>
<option value="064"> 064 </option>
</select> -
<input type="tel" name="Tel"> - <input type="tel" name="Tel">
</tr>
<tr>
<td><label for="email">- 이메일</label></td>
<td><input type="email" name="Email"> @
<select id="emailselect">
<option value="first"> 선택 </option>
<option value="gmail"> gmail.com </option>
<option value="naver"> naver.com </option>
<option value="daum"> daum.net </option>
<option value="nate"> nate.com </option>
</select>
</tr>
<tr>
<td><label for="introduce">- 자기소개서</label></td>
<td><textarea name="introduce" cols="50" rows="5"></textarea>
</tr>
</table>
</form>
</body>
</html>Result
HTML의 기초적인 태그 문법을 통해 간단한 회원가입 사이트를 만들어보았습니다.
여기서는 기본적인 요소들로만 이루어져있지만 다른 요소도 넣어 다양하게 활용기 가능합니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS 기초] 간단한 홈페이지 디자인 만들기 (Homepage Design) (0) | 2022.04.27 |
|---|---|
| [CSS 기초] 절대 위치 / 상대 위치 (absolute / relative) (0) | 2022.04.26 |
| [CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline) (0) | 2022.04.25 |
| [CSS 기초] 선택자 (클래스선택자 / 구조선택자) 예제 (0) | 2022.04.11 |
| [HTML 기초] 간단한 홍보책자 만들기 (0) | 2022.04.10 |
