이론 문제

1. 인터넷에 대한 설명중 맞는 것은?

③인터넷에 연결되는 컴퓨터는 210.1.1.2와 같이 4개의 숫자로 구성되는 IP주소를 가진다.

 

2. 웹에 대한 설명중 틀린 것은?

②키보드, 마우스, 모니터가 없는 웹 서버 컴퓨터는 없다.

 

3. 웹브라우저가 세상에 나온 순서를 시간 순으로 나열하라.

WorldWideWeb > Netscape Navigator > Internet Explorer > Opera > Firefox > Safari > Chrome

 

4. 처음으로 웹 브라우저를 만든 사람은?

①팀 버너스리 (Tim Berners-Lee)

 

5. 최초로 만들어진 웹 브라우저의 이름은 무엇인가?

WorldWideWeb

 

6. 웹 페이지를 작성할 때 다음은 언어의 역할은 무엇인가?

HTML  - 문서의 구조와 콘텐츠 표현

CSS -  문서의 모양 표현

Javascript - 웹 페이지의 동적 변경 및 응용프로그램 작성

 

7. hwp, doc, ppt 등의 전자 문서와 html 웹 문서의 차이점을 설명한 것 중 틀린 것은?

③ 하이퍼링크 개념은 전자 문서에서 시작되었다.

 

8. 웹 브라우저에서 다음과 같은 URL을 입력하였을 때, 웹 브라우저가 처리하는 과정을 설명하고자 한다. 다음 빈칸을 적절히 채워라.

http://www.univ.ac.kr/score.html

과정1) 웹브라우저는 www.univ.ac.kr에 접속한다.

과정2) 웹브라우저는 score.html를 보내 줄 것을 웹 서버에 요청한다

과정3) 웹브라우저는 받은 웹 페이지를 해독하여 화면에 출력한다.

 

9. 웹의 기본적인 성공 요인에 해당하지 않는 것은?

④웹 브라우저들이 저마다 플러그인을 만들어서 경쟁하기 때문이다.

 

10. HTML5가 출현하게 된 배경이 아닌 것은?

① HTML4가 지원하지 못하였던 이미지와 동영상을 지원할 필요가 있었다.

 

11. 음악을 연주하는 HTML5 문서에 대해 잘못 말한 것은?

③PC의 웹 브라우저에서 연주되도록 작성되었으며 스마트폰에서는 들을 수 없다.

 

 

 

'프로그래밍 > WEB' 카테고리의 다른 글

HTML5 + CSS3 + Javascript 웹프로그래밍 chapter3 연습문제  (0) 2020.10.20
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter2 연습문제  (0) 2020.10.20
MVC  (0) 2019.03.19
[html&css&js]회원가입 유효성검사  (0) 2018.10.21
[HTML,CSS,JS] 현재시간  (0) 2018.10.21

MVC 


Model - 데이터 관리 

DTO를 통해 상태의 값을 주고 받으며, 저장된 데이터와의 통신을 위해 DAO를 사용한다.


DTO : 데이터를 전달하고 이동이 주 목적

DAO : 데이터를 가지고 변환, 디비와 연결해 값을 획득하는 클래스의 객체


View - 화면 관리(보여지는 부분 UI)

    HTML, CSS, 자바스크립트


Controller - 모델과 뷰를 관리, 페이지 이동


MVC1  모델 - 일반적인 웹 프로그래밍 jsp에서 만들어 사용하거나 자바에서 모아서 처리 

  확장성, 유지 보수가 힘든 단점이 있다


MVC2  모델 -  클래스나 jsp파일이 많이 생겨 구조도 복잡하고 접근하기 힘들지만 확장성, 유지보수에 용이하다.





'프로그래밍 > WEB' 카테고리의 다른 글

HTML5 + CSS3 + Javascript 웹프로그래밍 chapter2 연습문제  (0) 2020.10.20
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter1 연습문제  (0) 2020.10.20
[html&css&js]회원가입 유효성검사  (0) 2018.10.21
[HTML,CSS,JS] 현재시간  (0) 2018.10.21
[HTML]div, span 의 차이점  (0) 2018.10.18



회원가입을 만들어 봅시다!!






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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript" src="js/ec.js"></script>
<script type="text/javascript" src="js/adress.js"></script>
<style>
.btnhover {
    color: #116688;
}
.btnhover:hover {
    color: #000000;
}
.qwer th {
    padding: 10px;
    color: #f9f9f9;
    border-bottom: 3px solid #9d8f8f;
    text-align: left;
    background-color: #625757;
}
.qwer td {
    
    padding: 10px;
    border-bottom: 1px solid #DDDDDD;
}
.qwer tr:hover td {
    color: #cca2e1;   /* 마우스 접근시 색변화 */
}
</style>
</head>
<body>
 <form name="join" onsubmit="return validate();" method="post"
        action="mailto:jyj6010@naver.com?subject=안녕하세요" enctype="text/plain">
        <table class="qwer" align="center" style="border-collapse: collapse;"
            width="800" ehight="250" border="1">
            <tr>
                <th align="center" colspan="2">회원 기본 정보</th>
            </tr>
            <tr>
                <td id="qwer" width="30%" align="center">아이디:</td>
                <td width="70%"><input type="text" name="uid" id="uid"
                    maxlength="12">4~12자의영문 대소문자와 숫자로만 입력</td>
            </tr>
            <tr>
                <td width="30%" align="center">비밀번호:</td>
                <td width="70%"><input type="password" name="upw" id="upw"
                    maxlength="12">4~12자의영문 대소문자와 숫자로만 입력</td>
            </tr>
            <tr>
                <td width="30%" align="center">비밀번호 확인:</td>
                <td width="70%"><input type="password" name="checkupw"
                    id="checkupw" maxlength="12"></td>
            </tr>
            <tr>
                <td width="30%" align="center">메일 주소:</td>
                <td width="70%"><input type="text" name="umail" id="uemail"
                    size="30"> 예)id@domain.com</td>
            </tr>
            <tr>
                <td width="30%" align="center">이름:</td>
                <td width="70%"><input type="text" name="uname" id="uname"
                    size="30"></td>
            </tr>
        </table>
        
        
        
        <table class="qwer" align="center" style="border-collapse: collapse;"
            width="800" ehight="250" border="1">
            <tr>
                <th align="center" colspan="2">개인 신상 정보</th>
            </tr>
                
            <tr>
               <td width="30%" align="center">주소 : </td>
              <td><input type="text" id="sample4_postcode" placeholder="우편번호">
                    <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
                    <input type="text" id="sample4_roadAddress" placeholder="도로명주소">
                  <input type="text" id="sample4_jibunAddress" placeholder="지번주소">
                   <input type="text" id="sample4_DetailAddress" placeholder="상세주소(선택)">
              </td>   
            </tr>
           
            
            <tr>
                <td width="30%" align="center">주민등록번호:</td>
                <td width="70%"><input type="text" name="unum1" id="unum1"
                    size="10" maxlength="6">-</input><input type="password"
                    name="unum2" id="unum2" size="10" maxlength="7"></input> 예)
                    123456-1234567
            </tr>
            <tr>
                <td width="30%" align="center">생일:</td>
                <td width="70%"><input type="text" name="year" id="year"
                    size="15">년 <select name="month" id="month">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                </select>월 <select name="day" id="day">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                </select>일</td>
            </tr>
            <tr>
                <td width="30%" align="center">관심분야:</td>
                <td width="70%" class="checks"><input type="checkbox"
                    name="inter"><label for="q">컴퓨터</label> <input
                    type="checkbox" name="inter"><label for="w">인터넷</label> <input
                    type="checkbox" name="inter"><label for="e">여행</label> <input
                    type="checkbox" name="inter"><label for="r">영화감상</label> <input
                    type="checkbox" name="inter"><label for="t">음악감상</label></td>
            </tr>
            <tr style="border-bottom: 1px solid #000000">
                <td width="30%" align="center"
                    style="border-bottom: 1px solid #000000">자기소개:</td>
                <td width="70%" style="border-bottom: 1px solid #000000"><textarea
                        rows="5" cols="70" name="self"></textarea>
            </tr>
        </table>
        <table align="center"
            style="border-collapse: collapse; margin-top: 5px;" width="800"
            ehight="250">
            <tr>
                <td style="background-color: white" align="center" colspan="2"><input
                    class="btnhover" type="submit" name="submit" value="회원가입">
                    <input class="btnhover" type="reset" name="reset" value="다시입력"></td>
            </tr>
        </table>
    </form>
</body>
</html>
cs


ec.js파일

유효성검사부분


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
 function validate() {
        var test1 = /^[a-zA-Z0-9]{4,12}$/ // 아이디와 비번을 검사할 유효성검사식
        var test2 = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
        // 이메일이 적합한지 검사할 유효성검사식
           var nameExp = /^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/; // 이름 유효성 검사
          var test3= /^[0-9]{5,5}$/;
 
        var id = document.getElementById("uid");
        var pw = document.getElementById("upw");
        var email = document.getElementById("uemail");
        var num1 = document.getElementById("unum1");
        var num2 = document.getElementById("unum2");
        var name = document.getElementById("uname");
        var postcode = document.getElementById("sample4_postcode"); // 우편번호
         
         
        var arrNum1 = new Array(); // 주민등록번호 앞자리
        var arrNum2 = new Array(); // 주민등록번호 뒷자리
 
        //====================================================이후 비교
 
        if (!check(test1, id, "아이디는 4~12자의 영문 대소문자와 숫자로만 입력")) {
            return false;
        } // 아이디 비교
 
        if (!check(test1, pw, "패스워드는 4~12자의 영문 대소문자와 숫자로만 입력")) {
            return false;
        } // 비번 비교
 
        if (join.upw.value != join.checkupw.value) {
            alert("비밀번호가 다릅니다. 다시 확인해 주세요.");
            join.checkupw.value = "";
            join.checkupw.focus();
            return false;
        } // 비번 확인
 
        if (email.value == "") {
            alert("이메일을 입력해 주세요");
            email.focus();
            return false;
        } // 이메일 입력 유무
 
        if (!check(test2, email, "적합하지 않은 이메일 형식입니다.")) {
            return false;
        } // 이메일 유효성검사식
 
     // 이름이 오류
        if(nameExp.test(name.value) == false){
         alert("이름형식이 맞지 않습니다.");
         return false;
        } 
        //우편번호 유효성 검사
        if (!check(test3, postcode, "적합하지 않은 우편번호 형식입니다.")) {
            return false;
         }
        
        for (var i = 0; i < num1.value.length; i++) {
            arrNum1[i] = num1.value.charAt(i);
        } // 주민등록번호 앞자리를 num1의 문자열 길이 만큼
 
        for (var i = 0; i < num2.value.length; i++) {
            arrNum2[i] = num2.value.charAt(i);
        } // 주민등록번호 뒷자리를 num1의 문자열 길이 만큼
 
        var tempSum = 0;
 
        for (var i = 0; i < num1.value.length; i++) {
            tempSum += arrNum1[i] * (2 + i);
        } // 주민등록번호의 공식을 적용하여 앞자리를 모두 계산하여 더함
 
        for (var i = 0; i < num2.value.length - 1; i++) {
            if (i >= 2) {
                tempSum += arrNum2[i] * i;
            } else {
                tempSum += arrNum2[i] * (8 + i);
            }
        } // 주민등록번호의 공식을 적용하여 뒷자리를 모두 계산하여 더함
 
        if ((11 - (tempSum % 11)) % 10 != arrNum2[6]) {
            alert("올바른 주민번호가 아닙니다.");
            num1.value = "";
            num2.value = "";
            num1.focus();
            return false;
        } // 주민등록번호 비교
 
        //=========================주민등록번호를 이용하여 생일 입력
        if (arrNum2[0] == 1 || arrNum2[0] == 2) { // 2000년 이전
            var y = parseInt(num1.value.substring(0, 2)); // 2자리씩
            var m = parseInt(num1.value.substring(2, 4));
            var d = parseInt(num1.value.substring(4, 6));
            join.year.value = 1900 + y; // 년
            join.month.value = m; // 월
            join.day.value = d; // 일
        } else if (arrNum2[0] == 3 || arrNum2[0] == 4) { // 2000년 이후
            var y = parseInt(num1.value.substring(0, 2));
            var m = parseInt(num1.value.substring(2, 4));
            var d = parseInt(num1.value.substring(4, 6));
            join.year.value == 2000 + y;
            join.month.value = m;
            join.day.value = d;
        }
 
        if (join.inter[0].checked == false && join.inter[1].checked == false
                && join.inter[2].checked == false
                && join.inter[3].checked == false
                && join.inter[4].checked == false) {
            alert("관심분야를 골라주세요");
            return false;
        } // 체크박스 미 체크 비교
 
        if (join.self.value == "") {
            alert("자기소개를 적어주세요");
            join.self.focus();
            return false;
        } // 자기소개창 미입력 시
 
    }
    //==================아이디, 비번, 이메일 비교
    function check(test1, what, message) {
        if (test1.test(what.value)) {
            return true;
        }
        alert(message);
        what.value = "";
        what.focus();
        //return false;
    }
    function goPopup(){
        // 호출된 페이지(jusopopup.jsp)에서 실제 주소검색URL(http://www.juso.go.kr/addrlink/addrLinkUrl.do)를 호출하게 됩니다.
        var pop = window.open("/popup/jusoPopup.jsp","pop","width=570,height=420, scrollbars=yes, resizable=yes"); 
        
        // 모바일 웹인 경우, 호출된 페이지(jusopopup.jsp)에서 실제 주소검색URL(http://www.juso.go.kr/addrlink/addrMobileLinkUrl.do)를 호출하게 됩니다.
        //var pop = window.open("/popup/jusoPopup.jsp","pop","scrollbars=yes, resizable=yes"); 
    }
    /** API 서비스 제공항목 확대 (2017.02) **/
    function jusoCallBack(roadFullAddr,roadAddrPart1,addrDetail,roadAddrPart2,engAddr, jibunAddr, zipNo, admCd, rnMgtSn, bdMgtSn
                            , detBdNmList, bdNm, bdKdcd, siNm, sggNm, emdNm, liNm, rn, udrtYn, buldMnnm, buldSlno, mtYn, lnbrMnnm, lnbrSlno, emdNo){
        // 팝업페이지에서 주소입력한 정보를 받아서, 현 페이지에 정보를 등록합니다.
        document.form.roadAddrPart1.value = roadAddrPart1;
        document.form.roadAddrPart2.value = roadAddrPart2;
        document.form.addrDetail.value = addrDetail;
        document.form.zipNo.value = zipNo;
    }
    
cs


adress.js파일

다음 주소 api



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
 function sample4_execDaumPostcode() {
        
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
 
                // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
                var extraRoadAddr = ''; // 도로명 조합형 주소 변수
 
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                   extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraRoadAddr !== ''){
                    extraRoadAddr = ' (' + extraRoadAddr + ')';
                }
                // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
                if(fullRoadAddr !== ''){
                    fullRoadAddr += extraRoadAddr;
                }
 
                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample4_postcode').value = data.zonecode; //5자리 새우편번호 사용
                document.getElementById('sample4_roadAddress').value = fullRoadAddr;
                document.getElementById('sample4_jibunAddress').value = data.jibunAddress;
 
                // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
                if(data.autoRoadAddress) {
                    //예상되는 도로명 주소에 조합형 주소를 추가한다.
                    var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                    document.getElementById('guide').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
 
                } else if(data.autoJibunAddress) {
                    var expJibunAddr = data.autoJibunAddress;
                    document.getElementById('guide').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
 
                } else{
                    document.getElementById('guide').innerHTML = '';
                }
            }
        }).open();
    }
cs






'프로그래밍 > WEB' 카테고리의 다른 글

HTML5 + CSS3 + Javascript 웹프로그래밍 chapter2 연습문제  (0) 2020.10.20
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter1 연습문제  (0) 2020.10.20
MVC  (0) 2019.03.19
[HTML,CSS,JS] 현재시간  (0) 2018.10.21
[HTML]div, span 의 차이점  (0) 2018.10.18

+ Recent posts

티스토리툴바