하이브리드웹설계 기말시험

(1)

하이브리드웹설계 기말시험

1

저는 양심적으로 시험에 임할 것을 하나님 앞에 맹세합니다. (sign) 성명 : 학번 : 분반 :

(30점 만점) 1. 다음 질문에 답하시오.(각1점x15=15점).

 레이어 만들 때 사용하는 태그는?

 레이어에서 절대적 위치를 기준으로 좌측 상단을 (0,0)으로 해서 아래쪽으로의 y 좌표 값을 나 타내는 속성은?

 나모 웹에디터 편집창에서 <enter>키를 치면 어떤 태그가 적용되는가?

 Html 안에 스크립트 코드가 들어가기 위해서 어떤 태그를 사용하는가?

 자바스크립트 라이브러리를 무엇이라 부르나?

 객체란 담당하고 있는 기능이 유사한 것들을 모아놓은 집합체를 말하는데 ( ) 과 ( ) 으로 이루어 져 있다.

 비동기 통신이며 웹에서 서버에 요청을 보내고 서버에서 데이터를 받고 가공해 페이지 일부분 만 변경하기 위해 다시 요청한 클라이언트 쪽으로 데이터를 전송하는 방식은?

 서버와 클라이언트간에 데이터를 주고 받을 때 쓰는 데이터형식으로 xml보다 가볍고 편리하여 많이 이용하는 형식은?

 누구나 사용할 수 있도록 공개한 응용프로그램 인터페이스를 무엇이라 부르나?

 확장성 있는 네트워크 애플리케이션(특히 서버사이드) 개발에 사용되는 소프트웨어 플랫폼으로 자바스크립트로 개발 가능한 플랫폼 이름은?

 서버측에서 npm 명령으로 모듈을 설치하고 서버 파일을 실행하였는데 서버 파일 이름은?

 Kitty 터미널(콘솔)창을 닫으면 서버가 종료되는데 창을 닫아도 서버가 백그라운드로 계속 실행 되도록 하는 명령은?

 네이버 지도 소스 코드의 위치 좌표를 바꿀 때 앞에 나오는 좌표는 무엇을 나타내는가?

 보안상의 이유로 웹 서버의 서로 다른 도메인에서 데이터를 주고 받을 수 없도록 규제하는 것 은 ( ) 문제라고 한다.

(2)

2 2. 다음 코드를 보고 질문에 답하여라(15점).

끝.

<style>

.font-weight-bold { font-weight: bold; } .heading { color: blue; font-weight: bold;}

img { position: fixed; top: 0px; left: 50%; width: 200px; height: 200px; }

</style>

<button id="btn1">moveA</button>

<button id="btn2">moveB</button>

<h1>What is jQuery?</h1>

jQuery is a fast, small, and feature-rich JavaScript library.

<h1>Corporate Members</h1>

Support from our corporate members makes it possible for the jQuery.

<ul>

<li><button id="button1">addClass</button></li>

<li><button id="button2">removeClass</button></li>

</ul>

$().ready(function() {

$("button").css("background-color", "green");

$("button").css("border-radius", "10px");

$("#button1").click(function() {

$("h1").addClass("heading"); });

$("#button2").click(function() {

$("h1").removeClass("heading"); });

pos_x = 0;

$("#btn1").click(function() { pos_x = pos_x + 10;

$("#image").css("transform", "translate(" + pos_x + "px, 0px"); });

$("#btn2").click(function() { pos_x = pos_x - 10;

$("#image").css("transform", "translate(" + pos_x + "px, 0px"); });

});

</script>

(3)

3

(1) 이 코드가 실행되면 나타나는 모양을 그림으로 그려서 자세히 설명하라. 특히 그림, 버튼, 글자 의 크기, 위치 등을 고려해서 작성하라.(7점)

(2) 버튼들의 색깔은?(2점)

(3) addClass 버튼을 클릭하면 어떻게 실행되는지 설명하라.(3점)

(4) moveB 버튼을 클릭하면 어떻게 실행되는지 설명하라.(3점)

끝.

(4)

4 답

1.

(1) <div>

(2) top (3) <p>

(4) <script>

(5) JQuery (6) 속성 (7) 메서드 (8) AJAX (9) Json (10) open API (11) node.js (nodejs) (12) server.js

(13) forever start server.js (14) 위도

(15) 크로스도메인 2.

(1)

(2) green

(3) <h1> 태그의 내용이 파랑색으로 변하고 font-weight 속성값이 bold로 굵게 나타난다.

(4) 그림이 왼쪽(X 좌표를 -10) 으로 움직인다.