본 시험은 당연히 오픈북, 오픈 인터넷, 오픈 컴퓨터 환경에서 주변 사람의 답을 빼기는 것만 빼고
(다른 사람과 의논 가능 - 시대적, 규모적으로 팀웍 중요) 자신이 활용할 수 있는 모든 것을 활용하여
현업에서 일하는 것 처럼 문제를 적극 해결 합니다.
포인트는 끈기와 집중력으로 성취감을 맛보고 그 맛을 풀이 과정 중에 즐길수 있으면 됩니다.디버깅은 눈의 힘에 너무 많이 의존하지 말고, alert나 console.log를 사용하면 범위를 좁혀서눈의 피로감을 덜어줄 수 있습니다. 적극 활용하여 소중한 눈을 지킵시다.
■ 문제 01 (답안기술)
프로그래머 개발자가 진법(Number System)을 모르는 것은 챙피한 일입니다. 꼭 알고 넘어갑니다.
10진수란 0에서 9까지의 열개의 숫자로 수를 표시하며, 9까지 쓰면
사용할 수 있는 숫자를 모두 다 썼기 때문에 자릿수를 1개 올려 10이 오고 8진수는 0에서 7까지의 여덟개의 숫자로 수를 표시하여, 7 다음에 10이 옵니다 .
마찬가지로 2진수는 0과 1 두개의 숫자로 수를 표시하여, 1 다음에 10으로 표현합니다.
곧 쓸수있는 숫자의 끝가지 가면 자릿수가 한개 늘어나는 법칙입니다.
16진수는 16개의 한자리 숫자 기호가 필요하여 , 10부터~15까지의 숫자를 한자리로 표현하기 위해
A,B,C,D,E,F를 도입했고, 마지막 F 다음에 10이 나타납니다.
그렇다면 17진수 13은 십진수 얼마일까요?, 십진수 23은 17진수로 얼마일까요?
■ 문제 02 (소스제출)
아래 코드를 카피하여 위 그림처럼 나오도록 스타일을 추가해 주세요.
간단한 레이아웃은 어렵지 않게 만들수 있어야 합니다.
DIV 중간에 글자를 위치시키기 위해서는 CSS line-height: 속성에 DIV 높이값을 주면 됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>기본 레이아웃</title> <style> /* *은 페이지 전체에 적용되는 선택자 */ * { text-align: center; font-size:1.2em; } .container { /* 추가 */ border:1px solid black; background-color: gray; } .header { /* 추가 */ background-color: blue; } .nav { /* 추가 */ background-color: blueviolet; } .content { /* 추가 */ background-color:chartreuse; } .footer { /* 추가 */ background-color:darkgreen; } </style> </head> <body> <div class="container"> <div class="header"> Header </div> <div class="nav"> <a href="#">Menu</a> </div> <div class="content"> Content </div> <div class="footer"> footer </div> </div> </body> </html>
■ 문제 03 (답안기술)
위 그림은 제가 즐겨하는 게임 클래시오브클랜의 유닛생성 선택화면입니다.
원하는 유닛을 손가락으로 클릭하면 유닛이 생산되고, 만들어진 유닛으로 상대를 공격할 수 있습니다.
OOP(객체지향프로그래밍)은 공장처럼 객체를 찍어내서 생산성이 좋죠
여기서 간단한 문제입니다. 아래 가로안에 new ,class, instance(object) 중에 골라서 매칭 시켜주십시오.
의외로 잘하는 사람이 틀리는 경우가 꽤 많습니다. 면접때 딱딱한 답변보다 이런식의 비유를 들어서 답변하면
개념이 확실히 잡혔있구나 하고 플러스 곱하기 플러스 점수를 받을 수 있습니다.
유닛선택 화면 -> [ ] 손가락으로 클릭 -> [ ] 생성된 유닛 -> [ ]
■ 문제 04 (소스제출)
var v_arrA = [1,2,3,3,4,3,2,5,5,7,9,0,1]; var v_arrB = [4,5,6,7,6,9,1,3,5,7,8,1,5];
위의 2개의 배열에서 값이 중복되지 않은 값 만을 담은 배열 v_arrC를 맹그시옹
v_arrA에만 있고 v_arrB에는 없는 값 만을 담은 배열 v_arrD를 구하시오
위 2가지가 해결되었다면 매개변수2개에 각각 배열을 넘겨받아서 첫매개변수 배열에만 존재하고
두번째 매개변수 배열에는 없는 값만을 담은 배열을 리턴하는 함수를 만들어주세요
최근의 자바스크립에는 배열과 JSON 데이타타입이 거의 도배 될 정도로 많이 사용됩니다.
■ 문제 05 (답안기술)
유닉스나 리눅스는 최상위 폴더가 /로 시작하고, 윈도우는 c: 또는 d: 처럼 드라이브명으로 시작합니다.
이렇게 최상위 디렉토리부터 경로를 쭉 기술한 것을 절대경로라 하는 반면, 자신이 작업하고 있는 폴더(.)를 기준으로
경로를 기술하는 것을 상대경로라 합니다. 보통 상위폴더를 의미하는 “..” 을 잘 쓰면 “.”은 당연히 안다고 믿죠!
참고로 웹에서 절대경로는 웹서버의 홈디렉토리에서 시작합니다.
위 그림은 절대경로 /home/pc01/두더지/ 폴더의 내용입니다.
BTS 제이홉은 위 그림의 js 폴더의 jhop.html을 편집하고 있습니다.
이 파일에서 위 그림의 css 폴더안의 main.css를 상대경로로 표현하여 주세요!
“..”을 두번 사용하면 어떻게 표현할 수 있는지도 적어주세요.
웹개발자가 절대경로와 상대경로를 구분해서 잘 사용하지 못하면
군인이 지도를 볼 줄 몰라서 엉뚱한 곳에 포탄을 날릴 수 있습니다.
■ 문제 06 (소스제출)
HTML 태그중에 DIV 태그는 style과 함께 사용하면 다른 일반 태그를 거의 대체할 수 있는
만능 태그에 가까워 HTML문서를 거의 도배할 정도로 많이 사용됩니다
//데이타 var v_datas = [80,100,56,120,180,30,40,120,160];
위 배열 데이타와 div 태그를 이용하여 위의 그림과 최대한 비슷한 막대 차트를 만들어 보세요.
Y축의 증가방향이 아래방향인 것에 주목해주세요. 막대의 부모Height에서 막대높이 값을 빼면 어디?
■ 문제 07 (소스제출)
그동안 확고한 자리를 잡고 있었던 XML을 누르고, JSON은
범용 데이타 전송포맷으로 영역을 넓혀가고 있을 뿐 아니라, 설정 파일 포맷으로도
그 영역을 넓혀가고 있습니다.
빅데이타의 영향으로 이젠 필요없을 줄 알았던 CSV(Comma Seperated Value) 파일 포맷도
그 가벼움으로 데이타 포맷으로 많이 사용되고 있습니다.
var v_commonTable = { grade01:"대표", grade02:"임원", grade03:"PM", grade04:"개발자" }; var v_sawonList = [ {level:"grade01",name:"로제"}, {level:"grade04",name:"지민"}, {level:"grade04",name:"정국"}, {level:"grade03",name:"제이홉"}, {level:"grade02",name:"제니"}, {level:"grade04",name:"슈가"}, {level:"grade02",name:"지수"}, ];
위에 있는 데이타를 이용하여 아래 형식(테이블)으로 모든 이름이 나오도록 출력해 주세요.
쉽게 생각하면 정말 쉽게 풀립니다.
넘버이름직위
| 1 | 로제 | 대표 |
| 2 | 지민 | 개발자 |
■ 문제 08 (소스제출)
벽타기를 너무 좋아해 하루 종일 벽만 타는 블랙핑크 로제가 있습니다.
이런 로제가 걱정된 제니는 로제가 다른 취미를 가지게 하려고 벽에 참기름을 발랐습니다.
참기름을 바른 결과 로제는 처음 1초동안은 3cm를 오르지만 다음 1초동안은 2cm를 미끄러지는 걸
반복하게 되었습니다.
곧 +3cm,-2cm,+3cm,-2cm,+3cm,-2cm 식으로 벽을 오르게 되었습니다.
시간값(초단위)을 파라미터(매개변수)로 받아서 그 시간에 로제가 올라간 거리를 리턴하는 함수와
거리를 파라미터(매개변수)로 받아서 해당거리를 가는데 필요한 시간을 리턴하는 함수를 각각 작성하시오
편의상 만약 결과값이 2개인 경우(거리를 받아서 시간을 리턴) 최초값을 리턴하는 것으로 합니다.
■ 문제 09 (소스제출)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <select id="id_sel1" size=4 onchange="f_first()"> </select> <select id="id_sel2" size=4 style="width:50px" onchange="f_second()"> </select> <select id="id_sel3" size=4 style="width:50px"> </select> <script> var v_grp1 = ["영업부","관리부"]; var v_grp12 = [ ["국내영업","해외영업","마구영업"], ["인사관리","구매관리","자금관리"] ]; var v_grp123 = [ [ ["임나연","유정연","박지효"], ["김다현","손채영","박로제"], ["태리사","김제니","김지수"] ], [ ["김남준","김석진"], ["민윤기","정호석","전정국"], ["박지민","김태형"] ] ]; var v_str="<option>선택하세요</option>"; for(var i=0; i < v_grp1.length; i++){ v_str += "<option value="+ i + " >"+ v_grp1[i] + "</option>"; } document.getElementById("id_sel1").innerHTML = v_str; function f_first(){ //코드 추가 } function f_second(){ //코드 추가 } </script> </body> </html>
동영상 처럼 동작되도록 위 코드를 완성해 주세요.
데이타 구조를 잘 봐주세요.
데이타 구조가 좋아야 프로그램 알고리즘이 간단해진다는 예를 보여주는 문제입니다.
■ 문제 10 (소스기술)
최대한 동영상처럼 동작되도록 코드를 자유롭게 작성해주세요
로또번호발생 버튼을 누를때 마다, 랜덤하고 중복되지 않은 로또번호 6개가 내림차순으로 정렬되어 내려옵니다.
이전 로또예제와 타자예제를 참고하면 생각보다 쉽게 할 수 있을 겁니다.
■ 문제 11 (소스기술)
최대한 동영상처럼 동작되도록 코드를 자유롭게 작성해주세요.
동그라미 안의 이미지는 아무거나 넣어도 상관없습니다. 그저 레이더 돌아가는 느낌이 나도록..
CSS의 투명도를 설정하는 opacity 속성이 필요할 것 같습니다. 0은 완전투명, 1은 완전불투명, 0.5는 반투명…
■ 문제 12 (소스기술)
최대한 동영상처럼 동작되도록 코드를 자유롭게 작성해주세요.
곧 화면 중간 벽돌 위아래 좌우에 충돌을 구현해 주세요.
한번에 해결하려고 하기보단 한면 한면 해결해 나가는 것이 좋은 방법으로 보입니다.
4면 충돌을 해결하면 벽돌깨기 게임을 만들수 있습니다.
도전! 도전!
■ 보너스 문제 (답안기술)
수고 하셨습니다.!!
5월반은 이전 반들과 비교시 노력과 능력이 평균보다 높아보여 문제수준을 조금 올려보았습니다.
좋은 결과 기대해 봅니다.
다른 사람과의 비교보다는, 이전의 나 보다 성장했다는 느낌이 든다면 자신을 많이 칭찬해주세요~
난 지금 성장하고 있는가?의 질문에 어떤 답변을 할 수 있느냐가 가장 중요합니다!