개정일 : `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 -