순 서 1. 직종설명 1 2. 경기과제에관한사항 2 3. 사용재료 경기장구성및배치 경기장시설 ᆞ 장비목록 경기진행절차 채점에관한사항 안전관리 공통사항 적용시기 주요개정사항 31 [

Similar documents
출제양식

UNIST_교원 홈페이지 관리자_Manual_V1.0

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

Week13

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

NCS : ERP(SAP) ERP(SAP) SW IT,. SW IT 01., 05., 06., 08., 15., , 05. SW IT,,,, SAP HR,,, 4,,, SAP ABAP HR SCHEMA, BSP,

1

Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx

PowerPoint 프레젠테이션

160322_ADOP 상품 소개서_1.0

PowerPoint Presentation

<4D F736F F F696E74202D E20C0CEC5CDB3DD20C0C0BFEB20B9D720BCADBAF1BDBA20B1E2BCFA E >

Web Scraper in 30 Minutes 강철

PowerPoint 프레젠테이션

개정일 : ` 직종설명서 직종명 : 금형 (Plastic Die Engineering)

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

Microsoft PowerPoint - ch02_인터넷 이해와 활용.ppt

3장

Social Network

슬라이드 1

FileMaker 15 WebDirect 설명서

(......).hwp

uFOCS

Microsoft Word - 김완석.doc

Scene7 Media Portal 사용

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E C8A3292E687770>

con_using-admin

Ⅰ. 서론 1989년 CERN의 팀 버너스 리에 의해 만들어진 월드 와이드 웹 기술은 HTML(HyperText Markup Language), URL(Unified Resource Locator, HTTP(Hyper- Text Transfer Protocol)이라는

Overall Process

초보자를 위한 ASP.NET 2.0

<C0CCBCBCBFB52DC1A4B4EBBFF82DBCAEBBE7B3EDB9AE2D D382E687770>

untitled

컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는 우수한 인력을 양성 함과 동시에 직업적 도덕적 책임의식을 갖는 IT인 육성을 교육목표로 한다. 1. 전공 기본 지식을 체계적으로

Week8-Extra

2파트-07

Microsoft PowerPoint - CoolMessenger_제안서_라이트_200508

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor

chapter4

4? [The Fourth Industrial Revolution] IT :,,,. : (AI), ,, 2, 4 3, : 4 3.

00-CourseSyllabus

PowerPoint Template

일반인을 위한 전자책 제작 방법

PowerPoint プレゼンテーション

BH의 아이폰 추천 어플

만약, 업그레이드 도중 실패하게 되면, 배터리를 뺏다 다시 꼽으신 후 전원을 켜면, 안내문구가 나오게 됩니다. 그 상태로 PC 연결 후 업그레이드를 다시 실행하시면 됩니다. 3) 단말을 재부팅합니다. - 리부팅 후에 단말에서 업그레이드를 진행합니다. 업그레이드 과정 중

ODS-FM1

Microsoft PowerPoint - Smart CRM v4.0_TM 소개_ pptx

Microsoft Word - eClipse_사용자가이드_

Macaron Cooker Manual 1.0.key

(주)나우프로필의 이동형 대표 개편의 방향이 시민참여를 많이 하는 방향이라, 홈페이지 시안 이 매우 간편해져서 소통이 쉬워질 것 같다. 다만 웹보다 모바일 이용자가 지속적으로 급증하는 추세이므로 이에 적합한 구조가 되도록 보장해야 한다. 소셜미디어전략연구소 배운철 대표

6강.hwp

Copyright 2012, Oracle and/or its affiliates. All rights reserved.,,,,,,,,,,,,,.,..., U.S. GOVERNMENT END USERS. Oracle programs, including any operat

Intro to Servlet, EJB, JSP, WS

ibmdw_rest_v1.0.ppt

10X56_NWG_KOR.indd

20주년용

Building Mobile AR Web Applications in HTML5 - Google IO 2012

Portal_9iAS.ppt [읽기 전용]

품질검증분야 Stack 통합 Test 결과보고서 [ The Bug Genie ]

76 XSS 하 Huge-IT Slider admin.php XSS

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

Install stm32cubemx and st-link utility

untitled

Orcad Capture 9.x

<%DOC NAME%> User Manual

<4D F736F F D2033BFF920BECBBEE0BFF9B0A3BAB8B0EDBCAD2E646F6378>

놀이동산미아찾기시스템

EndNote X2 초급 분당차병원도서실사서최근영 ( )

제목을 입력하세요.

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

untitled

Windows 8에서 BioStar 1 설치하기

목 차 Ⅰ. 일반사항 1 Ⅱ. 특기사항 3 Ⅲ. 물품내역 및 세부규격 8 Ⅳ. 주의사항

DocsPin_Korean.pages

untitled


AGENDA 모바일 산업의 환경변화 모바일 클라우드 서비스의 등장 모바일 클라우드 서비스 융합사례

2

PowerPoint 프레젠테이션

about_by5

Voice Portal using Oracle 9i AS Wireless

초보자를 위한 ASP.NET 21일 완성

VZ94-한글매뉴얼

2009방송통신산업동향.hwp

이제는 쓸모없는 질문들 1. 스마트폰 열기가 과연 계속될까? 2. 언제 스마트폰이 일반 휴대폰을 앞지를까? (2010년 10%, 2012년 33% 예상) 3. 삼성의 스마트폰 OS 바다는 과연 성공할 수 있을까? 지금부터 기업들이 관심 가져야 할 질문들 1. 스마트폰은

Egretia_White_Paper_KR_V1.1.pages

<4D F736F F D20284B B8F0B9D9C0CF20BED6C7C3B8AEC4C9C0CCBCC720C4DCC5D9C3F720C1A2B1D9BCBA2020C1F6C4A720322E302E646F6378>

untitled

스마트월드캠퍼스 교육교제

Remote UI Guide

Lab1

소개 TeraStation 을 구입해 주셔서 감사합니다! 이 사용 설명서는 TeraStation 구성 정보를 제공합니다. 제품은 계속 업데이트되므로, 이 설명서의 이미지 및 텍스트는 사용자가 보유 중인 TeraStation 에 표시 된 이미지 및 텍스트와 약간 다를 수

FMX M JPG 15MB 320x240 30fps, 160Kbps 11MB View operation,, seek seek Random Access Average Read Sequential Read 12 FMX () 2

LG-LU6200_ICS_UG_V1.0_ indd

Open Cloud Engine Open Source Big Data Platform Flamingo Project Open Cloud Engine Flamingo Project Leader 김병곤

F120S_(Rev1.0)_1130.indd

e- 11 (Source: IMT strategy 1999 'PERMISSION ' ) The World Best Knowledge Providers Network

AMP는 어떻게 빠른 성능을 내나.key

Supplier_Connect_User_Guide_Korean

歯CRM개괄_허순영.PDF

Transcription:

개정일 : `18. 5. 8 직종설명서 직종명 : 웹디자인및개발 (Web Design & Development) - 1 -

순 서 1. 직종설명 1 2. 경기과제에관한사항 2 3. 사용재료 22 4. 경기장구성및배치 23 5. 경기장시설 ᆞ 장비목록 23 6. 경기진행절차 25 7. 채점에관한사항 29 8. 안전관리 29 9. 공통사항 30 10. 적용시기 31 11. 주요개정사항 31 [ 별첨 ] 과제및채점표예시

직종설명. m,,,,,,,. m.,. m, (client) ().. m,.. m,,. m,. m. m,,,. - 1 -

경기과제에관한사항. m,. m Website Design, Website Layout, Client Side, Server Side 4,.. / m 3 12. m 1 1.,. m. -, Website Design, Website Layout, Client Side, Server Side,. - 2 -

-,,. m 25,. - /,. -,. - 3 -

. Website Design (1) Website Design m Website Design. - - - -,,, -, - - - -,, (2) Website Design m Website Design. -,,,. -. -. -. -. -. - 4 -

-. -. -. (3) Website Design m - ( ),,,. -. m - Website Design - - (4) Website Design m -. m - Website Design (, JPE, PNG)., (, PSD, AI). (5) Website Design m -. - 5 -

-,., ( ). Website Layout (1) Website Layout m Website Layout. - () - HTML CSS W3C(World Wide Web Consortium) - - (WAI: Web Accessibility Initiative) - (SEO: Search Engine Optimization) -,, (2) Website Layout m Website Layout. - () - W3C W3C (last call draft) - - - - CSS - - 6 -

(3) Website Layout m - HTML, CSS Website Layout. - ( Client/Server Side ),. -, JavaScript (). - Website Layout ( 1) (PSD ) HTML ( 2) ( ) CSS CSS -., Cross Browsing. -. m - CSS - (4) Website Layout m -. - 7 -

-, ( ). - ( ). m -.,,. -, XAMPP,. -. (5) Website Layout m -. IE, Chrome, FireFox( FireFox Developer Edition) ( 6 ),. -, ( ). - 8 -

Client Side (1) Client Side m Client Side. - Document Object Model (DOM) - JavaScript DOM - JavaScript - JavaScript (, jquery, jquery UI, jquery Mobile, Angular.js ) - Client Side - - Canvas - Client Side (2) Client Side m Client side. - - JavaScript - jquery, jquery UI, jquery Mobile JavaScript Library - (parallax scrolling), - (, ) - (font- ) - AJAX (txt, xml, json ) - 9 -

(3) Client Side m - Client Side. - (,, Server Side ). Server Side PHP Server Side. -., ( ), - Client Side ( 1) HTML CSS JS ( 2) JS -., Cross Browsing. -. m - ( ) - - JavaScript - JavaScript - 10 -

- (txt, xml, json ) - Server Side PHP ( Server Side ) ( ) Client Side, Upload PHP (4) Client Side m - Client Side. -. - ( ) JavaScript. m -., Client Side JavaScript (AJAX ). - XAMPP,.,. -., - 11 -

,. -. http://localhost http://127.0.0.1, ( : http://192.168.0.101 http://192.168.0.100/user101) -, index.*. (5) Client Side m -,. -, Client Side (AJAX ). -. IE, Chrome, FireFox( FireFox Developer Edition) ( 6 ),. - 12 -

Server Side (1) Server Side m Server Side. - PHP(Hypertext Pre-processor) - MySQL - PHP, XML(Extensible Markup Language), JSON - MVC - (Laravel, Yii, Symfony, CodeIgniter ) - - CMS(XE, Wordpress, Drupal, Joomla ) - Client Side Server Side (AJAX ) (2) Server Side m Server Side. - () (queries) - - SQL(Structured Query Language) - (SQL Injection, XSS,,, ) - API(Application Programming Interfaces),, - (object-oriented) - (,, ) - Data DB DB Data CSV, Excel - XML, JSON - 13 -

(3) Server Side m - Server Side. - (,, Client Side ). -.,,. ( ), - Client Side Client Side., AJAX Client Side JavaScript, JavaScript. - Server Side ( 1) PHP MySql JavaScript ( 2) PHP Library PHP Library -., Server Side Cross Browsing. -. m - ( ) - - PHP - (SQL, TEXT, XML, JSON ) - 14 -

(4) Server Side m - PHP, MySql Server Side. m -. - XAMPP,.,. -, MySql DB ( /). -.,,. -. http://localhost http://127.0.0.1, ( : http://192.168.0.101 http://192.168.0.100/user101) -, index.*. - 15 -

(5) Server Side m -,. -. (1) m. -, ( ) - (, ) ( ) ( ). - - - -, -, () (upload). URL FTP Client - 16 -

() (,, ) (FTP Client ) - m ( ),, (),. m, ( ). (2) m. (3) m -. -,. -. m - JavaScript (jquery, jquery UI, jquery Mobile ) CSS (Bootstrap, prefixfree.js ) PHP (Laravel, Yii ) - JavaScript, CSS, PHP,. - 17 -

-. 6. (4) m -. -.. -,, 0 ( ) ( ). -,,. 0. -.,. -. -. - 18 -

m - ( ),., USB ( ). -, USB. (5) m -.,. -, ( ),.. (1) m. m. m. - 19 -

(1) m,.,. m -. 15 (, )... -. 30 3~5.,.,,. ( ),.. - 20 -

/ (1) m,. (2) / m /. - / 2,. - /,. (3) m /. /. m. (4) m /. - 21 -

사용재료. m,. m.. () - 22 -

m, ( )., ( ). m, USB., USB. 경기장구성및배치 m 1 3.3m3 (1 ) (800 1,200mm) () m, ( ). m,. 경기장시설ㆍ장비목록 m. m,. m (Adobe S/W ) /.,, ( ). - 23 -

m ㆍ :. (, ) - 24 -

경기진행절차 m,, ( ),,, ( ). m ( ),,. m ( ),. m,,. m ( ),. m (,, ). m /. m, ( )., ( ). - 25 -

m ( ). -, XAMPP C:\xampp\htdocs. m, ( ),.. m,, ( ). m ( ),. m,. m ( ). m.,. m. m, USB. - 26 -

m.,, XAMPP XAMPP. m. m,, USB. m, - FTP. -. -. -. -,,. - USB. m 2/3. m,. - 27 -

m. m.. m,. m, USB HDD. -,.,. m, - ( ).,. - USB,. - 28 -

채점에관한사항 m, USB. m,., USB. m. m /. m 4,. m (),. m.,, 0. m. m. 안전관리 m. m. - 29 -

공통사항. ( ) m ( ). m ( ). S/W m ( ),,. m ( ). m ( ). - 30 -

. m. m,,,. m. 적용시기 m : 2018 주요개정사항 - 31 -

[ 1].. Website Design 1 EnviroFund. EnviroFund..,.,. EnviroFund..,... A EnviroFund. - 32 -

EnviroFund -. -. - EnviroFund. - EnviroFund - - (, ) -, - EnviroFund - - - - - - - - 33 -

- EnviroFund - - -. - ( ) - Facebook, Twitter and Google+.. - 34 -

- USB XXX_Website_Design. XXX. - XXX_Website_Design. XXX. - PNG JPG. EnviroFund. - XXX_index. :XXX_index.png - XXX_project_enrollment. :XXX_project_enrollment.jpg - XX_Xproject_presentation. :XXX_project_presentation.png - XXX_A XXX_source_files..(PSD) - 35 -

Website Design 1-36 -

Website Design 1-37 -

Website Design 2..,... (1440 x 900 ) (768 x 1024 ) (320 x 480 ) : FASHION4YOU : : #126080, #AFE1F2 #CD4D58. - 38 -

-, (home, sitemap, contact us), - - 5 (,,,, ) -, 2 -,,, NEW -,, - - 0 Item(s) - - 3 (Facebook, Twitter, YouTube) - +. (HTML) ( ) ( ) ( ) - 39 -

.. 4.. USB XXX_Website_Design. XXX. : - : XXX_Computer_mockup.png - : XXX_Tablet_mockup.png - : XXX_Smartphone_mockup.png,. XXX_Website_Design XXX_source_files.. - 40 -

Website Design 2-41 -

Website Design 2 Desktop Tablet Phone - 42 -

Website Layout 1 CMS XHTML / CSS. CMS_Design.jpg - 43 -

1. HTML 5. 2. CSS 3.0. 3. HTML CSS. 4. -. 5.. 6. Small Large.. 7. CSS.. o Link 1 o Link 2 Link 2.1 Link 2.2 Link 2.3 o Link 3 o Link 4 Link 4.1 Link 4.2 o Link 5-44 -

USB XXX_Website_Layout. XXX. Internet Explorer FireFox. - 45 -

Website Layout 1-46 -

Website Layout 2-47 -

.. HTML 5/ CSS 3. 1280px, 720px 480px 1280.png, 720png 480png. 800px. 12 1280-grid.png. - 48 -

- 49 -

Add to Cart - 50 -

Album Cover,... ON SALE. Album Cover Go to Album - 51 -

Back to top HTML5. CSS CSS 3. CSS prefix. HTML CSS.. Pacifico PT Sans.,.. Back to top. - 52 -

USB XXX_Website_Layout. XXX.,. - 53 -

1280.png - 54 -

1280-grid.png - 55 -

720.png 480.png - 56 -

Website Layout 2 번호 구분 평가내용 배점 1 주관 상호작용하는효과들이우아하게적용되었고제공된테마와매치된다. 변경시간기능은상호작용하는효과를보기좋게만든다. 3.00 2 주관 창이넓었다가좁아질때와그반대로변경되는동안에레이아웃사이즈변경과흐름변경이부드럽다. 3.00 3 객관 넓은스크린레이아웃 (1280px 가로 ) 은제공된스크린이미지와구글크롬에서매치된다. 발견되는각에러마다 (0.25) 감점 1.00 4 객관 좁은스크린레이아웃 (720px) 은제공된스크린이미지와구글크롬에서매치된다. 발견되는각에러마다 (0.25) 감점 1.00 5 객관 좁은스크린레이아웃 (480px) 은제공된스크린이미지와구글크롬에서매치된다. 발견되는각에러마다 (0.25) 감점 1.00 6 객관 사이즈를 800px 로줄이는동안스크린이좁은스크린사이즈에맞게변경된다. 발견되는각에러마다 (0.25) 감점 1.00 7 객관 HTML 과 CSS 의내부에코드사용을설명하기위해코멘트되었다. HTML 에최소 5 개이상코멘트, CSS 에최소 5 개이상코멘트. 1.00 8 객관 CSS 가 W3C 유효성검사기를사용하여레벨 3 에검증되었다. 발견되는각에러타입당 (0.25) 감점. 1.00 9 객관 HTML 가 W3C 유효성검사기를사용하여 HTML5 에검증되었다. 발견되는각에러타입당 (0.25) 감점. 2.00 10 객관 웹페이지내에사용자정의폰트가알맞게사용되었다. 두가지폰트가알맞게사용되었다. 발견되는각에러당 0.25 감점 1.00 11 객관 디스크 ( 앨범 ) 커버와뒷면내용모두가제공된컨셉에매치된다. 1.00 12 객관 알맞은 HTML5 태그들이접근성목적을위해서적용되었다 ( 가격변경, 폼입력, 내용구조를나타내기위한알맞은 HTML 의사용 ). 최고접근성 HTML 태그가나열된요소들을위해사용되었다. 발견되는각에러타입당 1.00 (0.25) 감점. 13 객관 타이틀바와 "Add to Cart" 버튼이그스타일과매치되고 HTML 요소와알맞은 CSS 를사용하여만들어졌다. 보통상태, hover 상태와활성상태. 사 1.00 용된이미지가없음. 발견되는각차이점마다 0.25 감점 14 객관 좁은스크린의오른쪽위아이콘을클릭하면아래네비게이션으로연결된다. 그리고 Back to Top 을클릭하면위쪽으로다시연결된다. 각없는링 1.00 크당 (0.25) 감점 15 객관 보통, 활성과포커스상태가검색영역, go-to-album 버튼, back-to-top 링크에문서스크린샷과같다. 발견되는각차이점마다 0.25 감점 1.00 16 객관 선택스타일 (Selection style) 이제공된선택스크린샷과매치된다. 1.00 17 객관 디스크커서변화는제공된컨셉내에서제공된변화단계를구현하였다. 1.00 18 객관 모든불안정한 CSS 속성들이공급업체접두사로알맞게정의된다 (Mozilla, Chrome, Safari, Internet Explorer and Opera). 각발견되는에러마다 (0.25) 감점. 존재하지않는공급업체접두사속성들은사용되지않았고, 각발견 1.00 되는존재하지않는것마다 0.25 감점 19 객관 ( ON SALE 텍스트를포함 ) 모든텍스트는이미지를사용하지않고색인된다 ( 로고, 디스크커버와 preview 글자제외 ). 1.00 20 객관 모든그림자와둥근코너는이미지를사용하지않은채 CSS3 를사용하여만들어졌다. Add-to-cart 버튼은여기서채점되지않을것이다. 각발견되는 1.00 에러마다 0.25 감점 계 25-57 -

Client Side 1. ( ). - 58 -

1. Drag & Drop (place holder) 2. (Title, Name, Email Address, description of the image) 3. : Validation -> -> 4. : 5.. 1. : (Title, Name, Email Address, description of the image). 2. :..., Server Client Side Local storage.. - 59 -

. 1. (title, name, e-mail address and description of the image) - (Drag &Drop) ( ). -, Please Drop. - Drop. - Drag & Drop. -. - Drop. JPG, JPEG, PNG, GIF. - Wrong Image!. -. 250 X 250 (px). - 60 -

- Drop Select. - cancel(x). Drop. -. Title name email address description of the image SUBMIT - SUBMIT (title, name, e-mail address and description of the image). 1 Image : 2 Title : 10 50 3 Name : 3 10 (, (-), (.) ) 4 Email Address : (, world@skills.or.kr) 5 Description of the Image : 30 - SUBMIT. - SUBMIT. - SUBMIT.. - 61 -

2. -. - (). - (). - (). - Delete(X). Do you want delete? YES NO. YES. (). NO. - EDIT. 3.. 3. - EDIT. - 62 -

- Image, Title, Name, Email Address, Description. - 800 X 900(px) 800 X 800(px).. X 800 X 800(px). - Crop Line. - Clear ( ), Save (Line, Crop ). Download. - 63 -

-. - Black, White, Red, Yellow, Green, Blue.. - ( ).... - Crop. Crop. Do you want to crop? YES, NO.. YES.. NO. - Clear,. - Save Do you want to save? YES, NO. YES (, ).. Locat Storage. NO. - 64 -

- Download (, ). Save.., Save. 1. XXX_Client_Side. XXX. 2. HTML CSS.. 3. JavaScript CSS3. 4. JavaScript Library., Client Side Server Side (PHP, MySql ). 5. 3. 6. Google Chrome. - 65 -

Client Side 1-66 -

- 67 -

- 68 -

Client Side 2. ( )..... 게임화면예 - 69 -

. (HTML + CSS).. 8 (4 ).. 1) Start. 2) Start 2.. 3). 4) ()... 5). 6) 2. 7) modal window. You win! (, 3:30). Start : - 70 -

3:30.,. Console.. - - - 1. 3. 2. XXX_Client_Side. XXX. 3. () media (). 4. Google Chrome. 5. JavaScript Library., Client Side Server Side (PHP, MySql ). - 71 -

Client Side 2-72 -

Server Side 1... Make Society Better My School Friends.... My School Friends. frot-end.... - (Public Page : ) - 73 -

- (Restricted Area : ).,.. - () - () - E-mail (, email, ) - () - (, ) - (: JPG, JPEG, PNG, 300KB) - (, YYYYMMDD ) - () - (, ) ( 5, ) - SUBMIT.. - 74 -

,.. - Email - - -,. -,,. : : : -,,,.. : ( ) : (, ) :, -,,,. - :. DB, PHP JSON JavaScript.. - 75 -

(, ) Email (, ) :,, -. (),,....,,.... DB.,,.,..,. - 76 -

,. - DB,,,. -,. DB. -,, (SUBMIT). -. (presentation) (data layers).. SQL injection, Cross site scripting.. (). 1. 3. 2. XXX_Server_Side. XXX. - 77 -

3. () media (). 4. FireFox Developer Edition. 5. PHP, JavaScript Library. - 78 -

Server Side 1-79 -

Server Side 2.... XML. XML.. 1. 2007, 2009, 2011 3.. - 80 -

XML. - (, KR - Korea). Trade, 2007, 2009, 2011. Trade,.,.. 17 Webdesign XML.... ( ).. - 81 -

XML, (PHP)., XML., AJAX PHP. JavaScript PHP PHP. 2.,. ( ) (- )., x y. 2007, 2008, 2011...,. x 2007, 2009, 2011, y 10. ( ). XML, (PHP) (, PHP GD )., XML., AJAX PHP PHP. - 82 -

JavaScript PHP PHP ( ). * 3 (Average),. 1. 3, XXX_Server_Side. XXX. 2. () media () PHP JavaScript. 3. Google Chrome. - 83 -

Server Side 2 번호구분평가내용배점 1 주관 XML 데이터를추출하고처리하는코드는전문가다운가? 1.00 2 주관어플리케이션을구성하는서버측코드들은잘조직되었는가? 1.00 3 객관 4 객관 5 객관 6 객관 7 객관 8 객관 9 객관 10 객관 어플리케이션을열면 국가별직종별연도별메달현황표 가제목과함께화면에표시되고표가나타난다. 최초에는선택된직종이없어표의타이틀만표시된다. 어플리케이션을열면 직종별연도별국가별점수현황그래프 가제목과함께화면에표시되고최초에는선택된직종이없어눈금과연도만표시된빈차트가표시된다. 국가별직종별연도별메달현황표 위의국가선택콤보박스에는 XML 에포함된모든국가목록이국가코드오름차순정렬로 국가코드 - 국가명 형식으로목록화되었다. 이데이터는반드시제공된 XML 파일로부터추출되어야한다. 국가별직종별연도별메달현황표 위의국가선택콤보박스에서국가를선택하면즉시해당국가의직종별, 연도별획득메달이과제설명과같이 XML 에서추출하여표시된다. 국가별직종별연도별메달현황표 에표시되는직종은 직종번호 - 직종명칭 형식으로직종번호기준오름차순정렬되었다. 직종별연도별국가별점수현황그래프 위의콤보박스중국가는선택하지않고직종만을선택하면해당직종의평균점수가과제설명에따라 PHP 코드를통해꺽은선그래프로그려진다. 직종별연도별국가별점수현황그래프 위의콤보박스에서직종과국가를모두선택하면과제설명에따라해당직종의평균점수와해당국가의해당직종연도별점수가 PHP 코드를통해꺽은선그래프로그려진다. 꺽은선그래프의각선들은서로다른색으로구분되었고우측으로는각선의색에따른범례가표시되었다. 3.00 3.00 2.00 5.00 1.00 2.00 5.00 2.00 계 25 - - - 84 -