- join.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
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="hk"> <!-- 제작자 정보 -->
<meta name="keywords" content="webcafe, 웹접근성"> <!-- 페이지 키워드 -->
<meta name="description" content="html5 css3 소개"> <!-- 페이지 설명 -->
<meta name="robots" content="all">
<link rel="shortcut icon" href="images/common/webcafe.ico">
<title>회원가입</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/join.css">
</head>
<body>
<!-- 건너뛰기 링크 시작 (웹 접근성)-->
<a id="skipNav" href="#contentsArea">본문 바로가기</a>
<!-- 건너뛰기 링크 종료 -->
<!-- wrapper 영역 시작 -->
<div id="wrapper">
<!-- 헤더 영역 시작 (로고, 메인메뉴) -->
<header>
<h1 class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</h1>
<ul class="infoLink">
<li><a href="index.html">홈</a></li> <!-- 링크 모음이므로 nav 이용 X -->
<li><a href="#">로그인</a></li>
<li><a href="join.html">회원가입</a></li>
<li><a href="#">사이트맵</a></li>
<li><a href="#">ENGLISH</a></li>
</ul>
<nav role="navigation"> <!-- role: (웹 접근성) 구조 정보 전달 -->
<h2 class="hidden">메인 메뉴</h2> <!-- hidden 클래스 모두 숨기기 예정 -->
<ul class="mainMenu">
<li><a href="#">HTML에 대해</a>
<ul class="aboutHTML">
<li><a href="#">HTML5 소개</a></li>
<li><a href="#">레퍼런스 소개</a></li>
<li><a href="#">활용 예제</a></li>
</ul>
</li>
<li><a href="#">CSS에 대해</a>
<ul class="aboutCSS">
<li><a href="#">CSS 소개</a></li>
<li><a href="#">CSS2 VS CSS3</a></li>
<li><a href="#">CSS 애니메이션</a></li>
<li><a href="#">CSS Framework</a></li>
</ul>
</li>
<li><a href="#">웹 표준</a>
<ul class="webStandard">
<li><a href="#">웹 표준이란</a></li>
<li><a href="#">W3C</a></li>
<li><a href="#">HTML5의 현재와 미래</a></li>
</ul>
</li>
<li><a href="#">웹 접근성</a>
<ul class="webAccessibility">
<li><a href="#">웹 접근성의 개요</a></li>
<li><a href="#">장애 환경의 이해</a></li>
<li><a href="#">장차법</a></li>
<li><a href="#">웹 접근성 품질마크</a></li>
</ul>
</li>
<li><a href="#">묻고 답하기</a>
<ul class="qna">
<li><a href="#">묻고 답하기</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">1대1 질문</a></li>
<li><a href="#">웹표준</a></li>
<li><a href="#">웹접근성</a></li>
</ul>
</li>
<li><a href="#">자료실</a>
<ul class="archive">
<li><a href="#">공개 자료실</a></li>
<li><a href="#">이미지 자료실</a></li>
<li><a href="#">웹표준 자료실</a></li>
<li><a href="#">웹접근성 자료실</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- 헤더 영역 종료 -->
<!-- 비주얼 영역 시작 (이미지)-->
<div id="visual">
<p>Web Standard & Accessibility</p>
</div>
<!-- 비주얼 영역 종료 -->
<!-- 메인 콘텐츠 영역 시작 -->
<div id="contentsArea">
<!-- 회원가입 영역 시작 -->
<section id="memberArea">
<p class="location">Home > 자료실 >
<strong>이미지 자료</strong></p>
<h2>회원가입</h2>
<p class="formSign"><strong class="require">필수
</strong>는 반드시 입력해야 하는 항목입니다.</p>
<form action="join.jsp" method="post"
id="joinForm" name="joinForm">
<fieldset>
<legend>회원가입 정보 입력 폼</legend>
<p>
<label for="name">성명<strong class="require">필수</strong></label>
<input type="text" name="name" id="name" required placeholder="홍길동">
<!-- name: 백엔 (서버 전송) id:프엔 -->
</p>
<p>
<label for="id">
아이디<strong class="require">필수</strong>
</label>
<input type="text" name="id" id="id" required placeholder="Guest">
<a href="pop_idCheck.html" class="idCheck">ID 중복 확인</a>
</p>
<p>
<label for="pass">
비밀번호<strong class="require">필수</strong>
</label>
<input type="text" name="pass" id="pass" required placeholder="영문/숫자 6~10자 이내">
</p>
<p>
<label for="confirmPass">
비밀번호 확인<strong class="require">필수</strong>
</label>
<input type="password" id="confirmPass" name="confirmPass" required>
</p>
<p>
<label for="address" class="labelAddress">주소</label>
<a href="find_zipcode.html" class="findZipcode">우편번호 찾기</a>
<input type="tel" id="zipcode" name="zipcode"
maxlength="5" size="6" title="우편번호">
<input type="text" name="address" id="address"
maxlength="100" size="60" placeholder="예) 서울시 종로구 관철동 11번지">
</p>
<p>
<label for="tel">연락처</label>
<input type="tel" id="tel" name="tel" maxlength="11" size="20"
title="하이픈(-)은 입력할 수 없습니다." placeholder="예)01012345678">
</p>
<p>
<label for="email">이메일<strong class="require">필수</strong></label>
<input type="email" name="email" id="email" size="30" required
placeholder="예)aaa@gmail.com">
</p>
<p class="mailing">
<em>메일링 리스트 가입</em>
<span>메일링 리스트에 가입하시면 WebCafe의
뉴스레터를 받아보실 수 있습니다.</span>
<input type="radio" id="mailingOk" name="mailing"
value="Yes" checked><label for="mailingOk">예</label>
<input type="radio" id="mailingNo" name="mailing"
value="No"><label for="mailingNo">아니오</label>
</p>
<div class="btnJoinArea">
<button type="submit" class="btnOk">회원가입</button>
<button type="reset" class="btnCancel">취소</button>
</div>
</fieldset>
</form>
</section>
<!-- 회원가입 영역 종료 -->
<!-- 트위터 영역 시작 -->
<aside id="twitterArea" title="HTML5 관련 글">
<h2>twitter</h2>
<article class="twitterArticle">
<img src="images/seulbinim.jpg" alt="seulbinim">
<a href="http://twitter.com/seulbinim"
class="twitterUserName" title="seulbinim의 트위터로 연결">seulbinim</a>
<p>한국정보화진흥원에서 <mark>HTML5</mark>교육을 무료로 합니다.
<mark>HTML5</mark>교육에 관심있는 분들은 한국정보화진흥원으로
문의하시길 바랍니다.</p>
<time datatime="2021-09-03" class="twitterDate">2021년 09월 03일</time>
</article>
<article class="twitterArticle">
<img src="images/miheeya.jpg" alt="miheeya">
<a href="http://twitter.com/miheeya"
class="twitterUserName" title="miheeya의 트위터로 연결">miheeya</a>
<p><mark>HTML5</mark>도 XHTML1.0이나 HTML4.01과 같은 마크업언어입니다.
<mark>HTML5</mark>를 사용한다고 해서 웹표준을 준수하지 않는다거나
웹접근성이 떨어지는 것이 아닙니다.</p>
<time datatime="2021-09-03" class="twitterDate">2021년 09월 03일</time>
</article>
</aside>
<!-- 트위터 영역 종료 -->
</div>
<!-- 메인 콘텐츠 영역 종료 -->
<!-- 슬로건 영역 시작 -->
<div id="slogan">
<h2>Web Cafe 슬로건</h2>
<p>
<q cite="http://www.w3.org/WAI/">The power of the Web
is in its universality, Access by everyone regardless
of disability is an essential aspect.</q>
Tim Berners-Lee, W3C Director and Invertor of the World Wide Web.
</p>
<footer class="hidden"> <!-- 출처 명시용 -->
출처: World Wide Web Consortium - http://w3.org/WAI/
</footer>
</div>
<!-- 슬로건 영역 종료 -->
<!-- 푸터 영역 시작 -->
<footer id="footer">
<div id="footerInner">
<a href="#" class="footerLogo">
<img src="images/footer_logo.png" alt="WebCafe">
</a>
<a href="#" class="techLogoArea">
<img src="images/html5_logo.png" alt="">
<img src="images/css3_logo.png" alt="">
</a>
<section class="guide">
<h2 class="hidden">사이트 이용안내</h2>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">개인정보 보호정책</a></li>
<li><a href="#">이메일 주소 무단 수집거부</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">site map</a></li>
</ul>
</section>
<address>
<span>서울시 마포구 상수동 123-12 한주빌딩 5층</span>
<span>· 전화: 02-234-5678</span>
<span>· E-MAIL: <a href="mailto:webmaster@webcafe.com">
webmaster@webcafe.com
</a></span>
</address>
<p class="copyright">
Copyright since © 2010 by Web Cafe
</p>
</div>
</footer>
<!-- 푸터 영역 종료 -->
</div>
<!-- wrapper 영역 종료 -->
</body>
</html>
|
cs |
- join.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
@charset "utf-8";
/* memberArea 영역 시작 */
#memberArea{
width: 630px;
margin-right: 30px;
position: relative;
}
.location{
position: absolute;
top: 18px;
right: 30px;
}
.location strong{
color: #51a41e;
}
#memberArea h2{
font-size: 1.5em;
font-family: "NanumEX";
color: #ff3c00;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
border-bottom: 2px solid#ff6738;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.formSign{
text-align: right;
margin: 30px 0 10px;
}
.require{ /*필수*/
display: inline-block;
width: 10px;
height: 12px;
white-space: nowrap;
text-indent: 10px;
overflow: hidden; /*글자 숨기기*/
}
.require::before{
font-family: "webcafeIcon";
content: "s";
color: #ff4802;
position: relative;
left: -10px; /*indent 영향 -> 왼쪽 이동시키기*/
}
#joinForm{
border-top: 2px solid #ccc;
}
#joinForm p {
border-bottom: 1px solid #ccc;
overflow: hidden;
position: relative;
}
#joinForm label, .mailing em{
float: left;
width: 120px;
padding: 13px 20px;
margin-right: 10px;
font-weight: bold;
color: #666;
background: #fffcef;
}
#joinForm .mailing label{
float: none;
padding: 0;
width: auto;
background: none;
}
#joinForm input{
margin: 10px 0;
}
#joinForm input:not([type="radio"]){ /*라디오X*/
border: 1px solid #aaa;
height: 18px;
padding-left: 5px;
}
#joinForm input[type=radio]{ /*라디오O*/
margin:0;
}
a.idCheck, a.findZipcode{
font-family: "NanumEX";
font-size: 0.9em;
background-color: #fe8389;
color: #fff;
padding: 3px 15px;
margin-left: 5px;
border-radius: 20px;
text-shadow: 1px 1px 1px #ed676c,
1px -1px 1px #ed676c;
}
a.findZipcode{
position: absolute;
left: 230px;
top: 12px;
}
input#address{
display: block;
margin: 0;
}
.labelAddress{
height: 50px;
line-height: 50px;
}
.mailing em{
font-style: normal;
height: 35px;
line-height: 35px;
}
.mailing span{
display: block; /*한줄 차지 -> 예 아니오 따로 배치*/
margin: 10px 0;
}
.btnJoinArea{
text-align: center;
margin: 15px 0;
}
.btnJoinArea button{
font-family: "NanumEX";
font-size: 1.2em;
color: #fff;
padding: 8px 20px;
border: 0;
margin: 0 5px;
border-radius: 3px;
letter-spacing: 1px;
}
.btnOk{
background: linear-gradient(to bottom, rgba(98,98,98,0.8) 0%,
rgb(98, 98, 98) 50%, rgb(81, 81, 81) 100%);
}
.btnCancel{
background: linear-gradient(to bottom, rgba(145,145,145,0.8) 0%,
rgb(145,145,145) 50%, rgb(81,81,81) 100%);
}
.btnOk::before{
font-family: "webcafeIcon";
content: "h";
font-size: 2em;
position: relative;
line-height: 0; /*아이콘 높이 기본값 없앰*/
top: 7px;
left: -5px;
}
/* memberArea 영역 종료 */
/* twitterArea 영역 시작 */
#twitterArea{
width: 210px;
margin-left: 30px;
position: relative;
margin-top: 15px;
}
#twitterArea::before{ /*수직 구분선*/
content: "";
width: 10px;
height: 90%;
position: absolute;
top: 20px;
left: -35px;
border-radius: 50%;
background-image: linear-gradient(to right, rgba(251,251,251,0.5) 0%,
rgba(229,229,229,0.7) 100%);
}
#twitterArea>h2{
font-size: 1.2em;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
#twitterArea>h2::before{
font-family: "webcafeIcon";
content: "t";
color: #00acee;
font-size: 2em;
position: relative;
top: 5px;
margin-right: 5px;
}
.twitterArticle{
margin: 20px 0;
}
.twitterArticle img{
width: 45px;
height: 45px;
margin-right: 10px;
}
.twitterArticle p{
margin: 10px 0;
}
.twitterArticle mark{ /* 하이라이트 (형광펜) */
background-color: transparent; /*하이라이트 삭제*/
font-weight: bold;
}
.twitterDate{
display: block; /*위치 조정*/
text-align: right;
color: #787878;
}
/* twitterArea 영역 종료 */
|
cs |
자바스크립트
1.
변수 타입 대신 var 표시 (es6 학습시 let)
형 추론 (값에 의해 변수의 형 추론/결정됨) => 느슨한 자료형 변수
ex.
var num=10;
var num=2.5;
var str="대한민국";
※ 자바
: 선언된 타입에 의해 형 결정 => 강력한 체크형 변수
ex.
int num=10;
double num=2.5;
String str="대한민국";
2.
동적 홈페이지 제작
html 뼈대 + css 레이아웃 + js 움직임/액션
3.
" ", ' ' : 문자, 문자열 사용 가능
[] : 배열 기호
{} : 객체 기호
- 선언적 함수
<script>
function hello(){
alert("안녕");
}
</script>
- 익명 함수
<script>
var head = document.querySelector("#js");
head.onclick=function(){
head.style.color="red";
}
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
○ test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트</title>
<script src="js/test.js"></script>
</head>
<body>
<h1 onclick="hello();">자바스크립트 시작</h1>
</body>
</html>
○ test.js
function hello(){
alert("안녕하세요");
}
|
cs |
- body 태그 참조 시 script 사용 방법 -> 1. body에서 해당 태그 다음에 배치
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트</title>
<script>
//선언적 함수 (사용자가 직접 정의)
function hello(){
alert("안녕");
}
</script>
</head>
<body>
<h1 id="js">자바 스크립트 시작</h1>
<p>위 텍스트를 클릭해 보세요</p>
<script> => #js 언급하므로 body #js 다음에 코드 입력
var head = document.querySelector("#js"); //#js의 객체정보를 head 변수에 전달
//document: html문서 전체 cf.우변 전체 => DOM(문서객체모델)
head.onclick=function(){ //onclick: 이벤트
head.style.color="red";
}
</script>
</body>
</html>
|
cs |
- body 태그 참조 시 script 사용 방법 -> 2. window.onload
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 사용</title>
<script>
window.onload=function (){ //html 문서가 브라우저에 전체 로드된 후 function 수행
}
</script>
</head>
<body>
<h1>종로 치킨</h1>
<h2>주요 메뉴</h2>
</body>
</html>
|
cs |
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 사용</title>
<script> //body보다 먼저 실행되어야 하는 경우 head에 배치
window.onload=function (){
var output = "";
var date= new Date(); //오늘 날짜, 시간 (내장 객체)
var hour=date.getHours(); //시간
output+="<ul>";
if(hour>16){
output+="<li>후라이드 치킨</li>";
output+="<li>양념 치킨</li>";
output+="<li>골뱅이 무침</li>";
output+="<li>과일 안주</li>";
} else{
output+="<li>김치찌개</li>";
output+="<li>된장찌개</li>";
output+="<li>순두부찌개</li>";
output+="<li>비빔밥</li>";
}
output+="</ul>";
document.body.innerHTML+=output;
//output을 html 안 body에 추가
}
</script>
</head>
<body>
<h1>종로 치킨</h1>
<h2>주요 메뉴</h2>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 입문</title>
<script>
alert("안뇽"); //내장함수-알림창
var nums=[10,20,30];
alert(nums[0]);
document.write(2+5); //html body에 입력
console.log(3+7); //콘솔 입력
</script>
</head>
<body>
<h1>자바스크립트 입문</h1>
</body>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script>
alert(2+5); //숫자 연산
alert('안녕'); //"", '' 문자&문자열 사용 가능
alert("철수가 말했다. '안녕'이라고 "); //"&' 동시 사용 가능
alert("철수가 말했다. \"안녕\"이라고"); //escape 가능
alert("철수가 말했다. \n'안녕'이라고 "); //줄바꿈
alert('15+7'); //문자열 그대로 출력
alert('52'*273); //문자를 숫자로 인식해 곱셈 실행
alert('52'*'273'); // "
var na=prompt("당신의 이름은?");
document.write(na+"님 환영합니다.");
var amount=prompt("구입수량은?");
var total=amount*2300;
document.write("총 구입 가격="+total);
</script>
|
cs |
- 문제 : prompt로 점심비용을 입력받아 용돈 관리 프로그램을 완성하시오 (삼항연산자 활용)
하루 지출액이 10000원 초과하면 문구 뜨게 함
ex. 13000원 지출 -> 3000원 초과 되었습니다
10000원 이하 -> 돈 관리 잘 했어요!
고정지출:
var bus=3000;
var coffee=2000;
|
1
2
3
4
5
6
7
8
9
|
<script>
var bus=3000;
var coffee=2000;
var lunch=prompt("오늘 먹은 점심 비용은?");
//Number(prompt("오늘 먹은 점심 비용은?")); 적용 가능 var result=(bus+coffee+Number(lunch)>10000)
?(bus+coffee+Number(lunch)-10000)+"원 초과되었습니다.":"잘했어요";
//input=> 문자로 인식돼 +는 연결연산자 역할함 (-, /,*는 js가 자동 연산 처리)
document.write(result);
</script>
|
cs |
|
1
2
3
4
5
6
7
8
|
<script>
var num1=10;
var num2=20;
document.write(num1>num2); //false
document.write(30>20>10); //false
//30>20 부터 계산해 true 반환 -> true>10 -> js: true=1 이므로 false
document.write(30>20&&20>10); //true
</script>
|
cs |
|
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
|
-varianttest.html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수 종합 응용</title>
<link rel="stylesheet" href="css/age.css">
<script src="js/age.js"></script>
</head>
<body>
<button class="btn" onclick="calc();">나이 계산하기</button>
<div id="result" class="show">(결과값 표시)</div>
</body>
-age.css
body{
text-align: center;
background: url(../images/rabbit.png) no-repeat;
background-size: cover;
}
.btn{
margin-top: 50px;
border: 1px solid #ccc;
background-color: #007bff;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 5px 10px;
}
.btn:hover{
background-color: #218838;
border: 1px solid #1e7e34;
}
.show{
margin-top: 50px;
padding: 20px 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
-age.js
function calc(){
var currentYear=2022;
var birthYear=prompt("태어난 연도를 입력하세요","yyyy");
var age;
var result;
if (isNaN(birthYear)){ //숫자 여부 확인 함수 (string 타입이어도 따옴표 속 값 확인함)
result="<h2>숫자를 입력해주세요</h2>";
}else{
age=currentYear-birthYear+1;
result="<h2>당신의 나이는 "+age+"세입니다.</h2>";
}
document.querySelector("#result").innerHTML=result; //result를 html문서의 #result 태그에 대입
}
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220630 - 자바스크립트 - 반복문, 함수, 객체 (0) | 2022.07.01 |
|---|---|
| 220629 - 자바스크립트 - 변수, 연산자, 조건문(if, switch, 삼항연산자, 짧은 조건문), 반복문(for문, 향상된 for문) (0) | 2022.06.30 |
| 220627 - 웹페이지 구현 실습 (0) | 2022.06.28 |
| 220624 - 웹페이지 구현 실습 (0) | 2022.06.25 |
| 220623 - 웹페이지 구현 실습 (webcafe) (0) | 2022.06.24 |
