<구현 화면>
<Css>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>회원가입 양식</title>
<style type="text/css">
div.container{
}
}
width: 800px;
text-align: center;
padding: 30px;
border-bottom: 1px solid black;
margin: auto;
}
table{
height: 300px;
width: 900px;
border-top: 3px solid black;
margin-right: auto;
margin-left: auto;
}
td{
border-bottom: 1px dotted black;
}
caption{
text-align: left;
}
.col1 {
background-color: #e8e8e8;
padding: 10px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
.col2 {
text-align: left;
padding: 5px;
}
.but1 {
height: 25px;
width: 80px;
color: white;
background-color: black;
border-color: black;
}
.but2 {
height: 27px;
width: 120px;
color: white;
background-color: black;
border-color: black;
}
.but3 {
height: 35px;
width: 150px;
background-color: white;
border: 2px solid black;
}
.but4{
height: 35px;
width: 150px;
background-color: white;
border: 2px solid black;
}
.but1:hover {
background-color: #b9b9b9;
color: black;
border: 2px solid black;
}
.but2:hover {
background-color: #b9b9b9;
color: black;
border: 2px solid black;
}
.but3:hover {
background-color: black;
color: white;
border: 2px solid black;
}
.but4:hover {
background-color: black;
color: white;
border: 2px solid black;
}
p{
font-size: 0.7em;
}
.g{
font-size: 0.7em;
}
.c{
font-size: 0.7em;
}
.a{
font-size: 0.7em;
}
.num{
color: red;
}
</style>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
<Javascript>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<script>
function formCheck(form) {
//유효성 검사
if(form.name.value == "") {
alert('이름을 입력하세요.');
form.name.focus() ;
return ;
}
alert('아이디를 입력하세요.');
return ;
}
alert('비밀번호를 입력하세요.');
return ;
}
alert('비밀번호는 10 ~ 16자 사이로 입력하세요.');
return ;
}
alert('비밀번호 확인을 입력하세요.');
return ;
}
alert('e-mail을 입력하세요.');
return ;
}
alert('e-mail을 입력하세요.');
return ;
}
alert('e-mail을 입력하세요.');
return ;
}
alert('학년을 선택하세요.');
return;
}
alert('반을 선택하세요.');
return;
}
alert('회원가입이 완료되었습니다.') ;
}
</script>
</head>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
<Html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<body>
<form method="post" action="">
<div class="container">
<div class="insert">
<table>
<caption><h2>회원가입 양식</h2></caption>
<tr>
<td class="col1">이름</td>
<td class="col2"><input type="text" name="name" maxlength="5"></td>
</tr>
<tr>
<td class="col1">아이디</td>
<td class="col2">
<input type="text" name="id" maxlength="10">
<input class='but1' type="button" value="중복확인" onclick="">
</td>
</tr>
<tr>
<td class="col1">비밀번호</td>
<td class="col2">
<input type="password" name="pwd" maxlength="16">
<p>※비밀번호는 <span class="num">문자, 숫자, 특수문자(~!@#$%^&*)의 조합
10 ~ 16자리</span>로 입력이 가능합니다.</p>
</td>
</tr>
<tr>
<td class="col1">비밀번호 확인</td>
<td class="col2"><input type="password" name="pwdCheck" maxlength="16"></td>
</tr>
<tr>
<td class="col1">이메일</td>
<td class="col2">
<input type="text" name="mailid">
<span class="a">@</span>
<input type="text" name="email">
<select name="mailslc">
<option value="self" selected>직접입력</option>
</select>
<input class='but2' type="button" value="이메일 중복확인" onclick="">
</td>
</tr>
<tr>
<td class="col1">학년/반</td>
<td class="col2"><select name="grade">
<option value="slc1" selected>선택</option>
<option value="g1">1</option>
<option value="g2">2</option>
<option value="g3">3</option>
<option value="g4">4</option>
<option value="g5">5</option>
<option value="g6">6</option>
</select>
<span class="g">학년</span>
<select name="cls">
<option value="slc2" selected>선택</option>
<option value="c1">1</option>
<option value="c2">2</option>
<option value="c3">3</option>
<option value="c4">4</option>
<option value="c5">5</option>
</select>
<span class="c">반</span>
</td>
</tr>
</table>
</div>
<div class="create">
<input class="but3" type="button" value="가입취소" onclick="">
</div>
</div>
</form>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
1. html(콘텐츠) 작성
페이지의 콘텐츠를 작성하기 위해 페이지의 영역을 분할한다. 큰 구조부터 세세한 부분으로 범위를 좁혀가며 작성한다.
2. css(시각적 효과) 작성
역시 골격부터 세운 뒤 디테일한 부분을 수정한다. 각 영역의 width, height, border 세 가지는 기본적으로 가장 먼저 생각한다.
3. script(동적 효과, 유효성 검사) 작성
회원가입 양식 중 입력하지 않은 정보가 있는 경우, 경고 메시지가 발생한다. 모든 정보를 빠짐없이 입력한 뒤 회원가입 버튼을 누르면 회원가입 성공 메시지가 발생하고, 회원가입 양식이 리셋된다.
'20.03 ~ 20.08 국비교육 > HTML・CSS' 카테고리의 다른 글
| EditPlus 설치 및 html의 기초 (0) | 2020.04.13 |
|---|---|
| html/css 1. 무작정 만들어보기 (0) | 2020.04.09 |