웹디자인 기능사 실기 8강. 시험유의사항(공통)
152 بار بازدید -
ماه قبل
-
웹디자인 기능사 실기편입니다 (html, css,
웹디자인 기능사 실기편입니다 (html, css, javascript)
책은 영진닷컴(이기적) 웹디자인기능사 실기 24년 버전이며
블로그에 책자료는 따로 올려놓겠습니다
웹디자인실기 기본세팅입니다(수험자유의사항)
요구사항
다음 요구사항을 준수하여 주어진 자료(수험자 제공 파일)를 활용하여 시험시간 내에
웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출하세요.
웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, 요구사항에 지정되지 않은 요소들은
주제 특성에 맞게 자유롭게 디자인 하시오.
문제에서 지시하지 않은 와이어프레임 영역 비율, 레이아웃, 텍스트의 글자체/색상/크기,
요소별 크기, 색상 등은 수험자가 과제명(가.주제) 특성에 맞게 자유롭게 디자인 하시오
가. 주제 : World Festival 홈페이지 제작
나. 개요
World Festival 축제 홍보를 위하여 홈페이지를 제작하려고 한다.
음악공연과 미디어아트, 드론라이브쇼, 전시 등의 프로그램이 예정되어있는 웹사이트 제작을 요청하였다. 아래의 요구사항에 다라 메인 페이지를 제작하시오
다. 제작내용
메인 페이지를 디자인하고 HTML, CSS, JavaScript 기반의 웹페이지를 제작한다
(이때, jQuery 오픈소스, 이미지, 텍스트 등의 제공된 리소스를 활용하여 제작할 수 있다)
Html, CSS, chartset utf-8로 해야 한다.
컬러가이드
주조색(자유롭게) | 보조색(자유롭게) |
배경색(#FFFFFF) | 기본텍스트색(#333333)
사이트맵
메인메뉴 : 축제소개 / 예약안내 / 아티스트 / 커뮤니티
서브메뉴 : Festival소개 예약하기 두유노킹콩 공지사항
행사장 안내 예약확인/취소 우기욱이 사진갤러리
조직위원회 단체예약문의 예공주 영상갤러리
우빈밴드
와이어프레임
사진 설명을 입력하세요.(링크 참조)
세부 영역별 지시 사항
header 부분 (로고 + 메뉴)
로고
header 폴더에 제공된 로고를 삽입한다. 로고의 색은 과제명(가. 주제)에 맞게 반드시
변경하여야 한다
※ 로고의 크기 변경 시, 가로세로 비율(종횡비, Aspect ratio)을 유지하여야 한다.
(가로세로 비율을 유지하며 크기변경 가능)
메뉴구성
사이트 구조도를 참고하여 메인 메뉴와 서브 메뉴로 구성한다
메인메뉴(와이어프레임 참조)
메인 메뉴 중 하나에 마우스를 올리면(Mouse over) 하이라이트 되고,
벗어나면(Mouse out)하이라이트를 해제한다
메인 메뉴를 마우스로 올리면 서브 메뉴 영역이 부드럽게 나타나면서,
서브 메뉴가 보이도록 한다
메인 메뉴가 마우스커서가 벗어나면 서브 메뉴 영역은 부드럽게 사라져야 한다
서브메뉴 영역효과
서브 메뉴 영역은 메인 페이지 콘텐츠를 고려하여 배경색상을 설정한다
서브 메뉴 중 하나에 마우스를 올리면(Mouse over) 하이라이트 되고,
벗어나면(Mouse out)하이라이트를 해제한다
마우스 커서가 메뉴 영역을 벗어나면 서브 메뉴 영역은 부드럽게 사라져야 한다
slide부분
slide폴더에 제공된 3개의 이미지로 제작한다
slide폴더에 제공된 3개의 텍스트를 각 이미지에 적용하되, 텍스트의 글자체, 굵기, 색상, 크기를 적정하게 설정하여 가독성을 높이고, 독창성이 드러나도록 제작한다
slide 애니메이션 작업
위에서 작업한 결과물을 이용하여 슬라이드 작업을 한다
이미지 슬라이드는 Fade-in, Fade-out 효과를 이용하여 제작한다.
(하나의 이미지가 서서히 사라지고, 다른 이미지가 서서히 나타나는 효과)
슬라이드는 매 3초 이내로 하나의 이미지에서 다른 이미지로 전환되어야 한다
웹사이트를 열었을 때 자동으로 시작되어 반복적으로(마지막 이미지가 사라지면 다시 첫 번째 이미지가 나타나는 방식) 전환되어야 한다
Contents 부분
공지사항 타이틀 영역과 콘텐츠 영역을 구분하여 표현해야 한다(단, 콘텐츠는 html 코딩으로 작성해야 하며, 이미지로 삽입하면 안 된다)
콘텐츠는 contents 폴더의 제공된 텍스트를 적용하여 제작한다
공지사항의 첫 번째 콘텐츠를 클릭(click)할 경우 레이어 팝업창(modal pop_up)이 나타나며 닫기 버튼을 누르면 해당 팝업창이 닫혀야 한다 (와이어프레임 참고)
레이어 팝업의 제목과 내용은 contents폴더의 제공된 텍스트 파일을 사용한다
갤러리
contents 폴더의 제공된 이미지 3개를 사용하여 가로 방향으로 배치한다
(와이어프레임 참고)
바로가기
contents 폴더의 제공된 파일을 활용하여 편집 또는 디자인하여 제작한다
Footer부분
로고를 grayscale(무채색)로 변경하고 사용자의 접근성을 고려하여 배치한다
footer 폴더의 제공된 텍스트를 사용하여 Copyright, 패밀리 사이트를 제작한다
기술적 준수 사항
웹페이지 코딩은 html5 기준 웹 표준을 준수하여야 하며 html 유효성검사(w3c)에서
오류가 없어야 한다 (인터넷 사용 불가)
css는 별도의 파일로 제작하여 링크하여야 하며, css3 기준(w3c)에서 오류가 없도록
코딩되어야 한다
javascript 코드는 별도의 파일로 제작하여 연결하여야 하며 브라우저에 내장된 개발도구 consloe 탭에서 오류가 표시되지 않아야 한다
별도로 지정하지 않은 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, 버, 바로가기 등)
임시링크(#)를 적용하고 Tab키로 이동 선택할 수 있어야 한다
사이트는 다양한 화면 해상도에서 일관성 있는 페이지 레이아웃을 제공해야 한다
브라우저에서 css를 사용 안 함으로 설정한 경우 콘텐츠가 세로로 나열된다
타이틀 텍스트 바디 텍스트, 메뉴 텍스트 각 글자체/굵기/색상/크기 등을 적절하게 설정하여 사용자가 텍스트 간의 위계질서를 직관적으로 알 수 있도록 한다
모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 alt 속성이 있어야 한다
제작된 사이트 메인 페이지의 레이아웃, 구성 요소의 크기 및 위치 등은
최신 버전의 ms edge와 google chrome에서 동일하게 표시되어야 한다
제출방법
수험자는 비번호로 된 폴더명으로 완성된 작품 파일을 저장하여 제출한다
폴더 안에는 images, script, css등의 자료를 분류하여 저장한 폴더와 포함되어 있어야 하며, 메인 페이지는 반드시 최상위 폴더에 index.html로 저장하여 제출해야 한다
수험자는 제출하는 폴더에 index.html을 열었을 때 연결되거나 표시되어야 할 모든
리소스들을 포함하여 제출해야 하며 수험자의 컴퓨터가 아닌 채점 위원의 컴퓨터에서
정상 작동해야 한다
전체 결과물의 용량은 5MB용량이 초과되지 않게 제출하여 ai, psd 등 웹서비스에
사용되지 않는 파일은 제출하지 않는다
수험자 유의사항
수험자 인적사항 및 답안작성은 반드시 검은색 필기구만 사용하여야 하며,
그 외 연필류, 유색 필기구, 지워지는 펜 등을 사용한 답안은 채점하지 않으며 0점 처리
수험에 필요한 소프트웨어 및 참고자료가 하드웨어에 설치되어 있는지 확인 후 작업
참고자료의 내용 중 오자 및 탈자 등이 있을 때는 수정하여 작업
지참공구(수험표, 신분증, 흑색 필기도구)이외의 참고자료 및
외부장치(CD, USB, 키보드, 마우스, 이어폰) 등 어떠한 물품도 시험 중에 지참할 수 없음을
유의하시오
(단, 시설목록 이외의 정품 소프트웨어(폰트제외)를 설치하고자 할 때에는
감독위원의 입회하에 설치하여 사용하시오)
수험자가 컴퓨터 활용 미숙 등으로 인해 시험의 진행이 어렵다고 판단되었을 때는
감독위원은 시험을 중지시키고 실격처리를 할 수 있음을 유의하시오
바탕 화면에 수험자 본인의 '비번호' 이름을 가진 폴더에 완성된 작품의 파일만을 저장하시오
모든 작품을 감독위원 또는 채점위원이 검토하여 복사된 작품(동일 작품)이 있을 때에는
관련된 수험자 모두를 부정행위로 처리됨을 유의하시오
장시간 컴퓨터 작업으로 신체에 무리가 가지 않도록 적절한 몸풀기(스트레칭) 후 작업하시오
다음 사항에 대해서는 실격에 해당되어 채점 대상에서 제외됩니다
1. 수업자 본인이 수험 도중 시험에 대한 포기(기권) 의사를 표시하고 포기하는 경우
2. 작업 범위(용량, 시간)를 초과하거나, 요구사항과 현격히 다른 경우(채점위원이 판단)
3. slide가 javasciprt(jQuery포함), css중 하나 이상의 방법을 이용하여 제작되지 않은 경우
(※ 움직이는 Slide를 제작하지 않고 이미지 하나만 배치한 경우도 실격처리 됨)
4. 수험자 미숙으로 비번호 폴더에 완성된 작품 파일을 저장하지 못했을 경우
5. 압축프로그램을 사용하여 작품을 압축 후 제출한 경우
6. 과제 기준20% 이상 완성이 되지 않은 경우(채점위원이 판단)
#웹디자인기능사실기, #웹디자인, #html, #css, #javascript,
#시험유의사항, #인트로
링크
https://blog.naver.com/bong9tv/223513...
책은 영진닷컴(이기적) 웹디자인기능사 실기 24년 버전이며
블로그에 책자료는 따로 올려놓겠습니다
웹디자인실기 기본세팅입니다(수험자유의사항)
요구사항
다음 요구사항을 준수하여 주어진 자료(수험자 제공 파일)를 활용하여 시험시간 내에
웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출하세요.
웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, 요구사항에 지정되지 않은 요소들은
주제 특성에 맞게 자유롭게 디자인 하시오.
문제에서 지시하지 않은 와이어프레임 영역 비율, 레이아웃, 텍스트의 글자체/색상/크기,
요소별 크기, 색상 등은 수험자가 과제명(가.주제) 특성에 맞게 자유롭게 디자인 하시오
가. 주제 : World Festival 홈페이지 제작
나. 개요
World Festival 축제 홍보를 위하여 홈페이지를 제작하려고 한다.
음악공연과 미디어아트, 드론라이브쇼, 전시 등의 프로그램이 예정되어있는 웹사이트 제작을 요청하였다. 아래의 요구사항에 다라 메인 페이지를 제작하시오
다. 제작내용
메인 페이지를 디자인하고 HTML, CSS, JavaScript 기반의 웹페이지를 제작한다
(이때, jQuery 오픈소스, 이미지, 텍스트 등의 제공된 리소스를 활용하여 제작할 수 있다)
Html, CSS, chartset utf-8로 해야 한다.
컬러가이드
주조색(자유롭게) | 보조색(자유롭게) |
배경색(#FFFFFF) | 기본텍스트색(#333333)
사이트맵
메인메뉴 : 축제소개 / 예약안내 / 아티스트 / 커뮤니티
서브메뉴 : Festival소개 예약하기 두유노킹콩 공지사항
행사장 안내 예약확인/취소 우기욱이 사진갤러리
조직위원회 단체예약문의 예공주 영상갤러리
우빈밴드
와이어프레임
사진 설명을 입력하세요.(링크 참조)
세부 영역별 지시 사항
header 부분 (로고 + 메뉴)
로고
header 폴더에 제공된 로고를 삽입한다. 로고의 색은 과제명(가. 주제)에 맞게 반드시
변경하여야 한다
※ 로고의 크기 변경 시, 가로세로 비율(종횡비, Aspect ratio)을 유지하여야 한다.
(가로세로 비율을 유지하며 크기변경 가능)
메뉴구성
사이트 구조도를 참고하여 메인 메뉴와 서브 메뉴로 구성한다
메인메뉴(와이어프레임 참조)
메인 메뉴 중 하나에 마우스를 올리면(Mouse over) 하이라이트 되고,
벗어나면(Mouse out)하이라이트를 해제한다
메인 메뉴를 마우스로 올리면 서브 메뉴 영역이 부드럽게 나타나면서,
서브 메뉴가 보이도록 한다
메인 메뉴가 마우스커서가 벗어나면 서브 메뉴 영역은 부드럽게 사라져야 한다
서브메뉴 영역효과
서브 메뉴 영역은 메인 페이지 콘텐츠를 고려하여 배경색상을 설정한다
서브 메뉴 중 하나에 마우스를 올리면(Mouse over) 하이라이트 되고,
벗어나면(Mouse out)하이라이트를 해제한다
마우스 커서가 메뉴 영역을 벗어나면 서브 메뉴 영역은 부드럽게 사라져야 한다
slide부분
slide폴더에 제공된 3개의 이미지로 제작한다
slide폴더에 제공된 3개의 텍스트를 각 이미지에 적용하되, 텍스트의 글자체, 굵기, 색상, 크기를 적정하게 설정하여 가독성을 높이고, 독창성이 드러나도록 제작한다
slide 애니메이션 작업
위에서 작업한 결과물을 이용하여 슬라이드 작업을 한다
이미지 슬라이드는 Fade-in, Fade-out 효과를 이용하여 제작한다.
(하나의 이미지가 서서히 사라지고, 다른 이미지가 서서히 나타나는 효과)
슬라이드는 매 3초 이내로 하나의 이미지에서 다른 이미지로 전환되어야 한다
웹사이트를 열었을 때 자동으로 시작되어 반복적으로(마지막 이미지가 사라지면 다시 첫 번째 이미지가 나타나는 방식) 전환되어야 한다
Contents 부분
공지사항 타이틀 영역과 콘텐츠 영역을 구분하여 표현해야 한다(단, 콘텐츠는 html 코딩으로 작성해야 하며, 이미지로 삽입하면 안 된다)
콘텐츠는 contents 폴더의 제공된 텍스트를 적용하여 제작한다
공지사항의 첫 번째 콘텐츠를 클릭(click)할 경우 레이어 팝업창(modal pop_up)이 나타나며 닫기 버튼을 누르면 해당 팝업창이 닫혀야 한다 (와이어프레임 참고)
레이어 팝업의 제목과 내용은 contents폴더의 제공된 텍스트 파일을 사용한다
갤러리
contents 폴더의 제공된 이미지 3개를 사용하여 가로 방향으로 배치한다
(와이어프레임 참고)
바로가기
contents 폴더의 제공된 파일을 활용하여 편집 또는 디자인하여 제작한다
Footer부분
로고를 grayscale(무채색)로 변경하고 사용자의 접근성을 고려하여 배치한다
footer 폴더의 제공된 텍스트를 사용하여 Copyright, 패밀리 사이트를 제작한다
기술적 준수 사항
웹페이지 코딩은 html5 기준 웹 표준을 준수하여야 하며 html 유효성검사(w3c)에서
오류가 없어야 한다 (인터넷 사용 불가)
css는 별도의 파일로 제작하여 링크하여야 하며, css3 기준(w3c)에서 오류가 없도록
코딩되어야 한다
javascript 코드는 별도의 파일로 제작하여 연결하여야 하며 브라우저에 내장된 개발도구 consloe 탭에서 오류가 표시되지 않아야 한다
별도로 지정하지 않은 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, 버, 바로가기 등)
임시링크(#)를 적용하고 Tab키로 이동 선택할 수 있어야 한다
사이트는 다양한 화면 해상도에서 일관성 있는 페이지 레이아웃을 제공해야 한다
브라우저에서 css를 사용 안 함으로 설정한 경우 콘텐츠가 세로로 나열된다
타이틀 텍스트 바디 텍스트, 메뉴 텍스트 각 글자체/굵기/색상/크기 등을 적절하게 설정하여 사용자가 텍스트 간의 위계질서를 직관적으로 알 수 있도록 한다
모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 alt 속성이 있어야 한다
제작된 사이트 메인 페이지의 레이아웃, 구성 요소의 크기 및 위치 등은
최신 버전의 ms edge와 google chrome에서 동일하게 표시되어야 한다
제출방법
수험자는 비번호로 된 폴더명으로 완성된 작품 파일을 저장하여 제출한다
폴더 안에는 images, script, css등의 자료를 분류하여 저장한 폴더와 포함되어 있어야 하며, 메인 페이지는 반드시 최상위 폴더에 index.html로 저장하여 제출해야 한다
수험자는 제출하는 폴더에 index.html을 열었을 때 연결되거나 표시되어야 할 모든
리소스들을 포함하여 제출해야 하며 수험자의 컴퓨터가 아닌 채점 위원의 컴퓨터에서
정상 작동해야 한다
전체 결과물의 용량은 5MB용량이 초과되지 않게 제출하여 ai, psd 등 웹서비스에
사용되지 않는 파일은 제출하지 않는다
수험자 유의사항
수험자 인적사항 및 답안작성은 반드시 검은색 필기구만 사용하여야 하며,
그 외 연필류, 유색 필기구, 지워지는 펜 등을 사용한 답안은 채점하지 않으며 0점 처리
수험에 필요한 소프트웨어 및 참고자료가 하드웨어에 설치되어 있는지 확인 후 작업
참고자료의 내용 중 오자 및 탈자 등이 있을 때는 수정하여 작업
지참공구(수험표, 신분증, 흑색 필기도구)이외의 참고자료 및
외부장치(CD, USB, 키보드, 마우스, 이어폰) 등 어떠한 물품도 시험 중에 지참할 수 없음을
유의하시오
(단, 시설목록 이외의 정품 소프트웨어(폰트제외)를 설치하고자 할 때에는
감독위원의 입회하에 설치하여 사용하시오)
수험자가 컴퓨터 활용 미숙 등으로 인해 시험의 진행이 어렵다고 판단되었을 때는
감독위원은 시험을 중지시키고 실격처리를 할 수 있음을 유의하시오
바탕 화면에 수험자 본인의 '비번호' 이름을 가진 폴더에 완성된 작품의 파일만을 저장하시오
모든 작품을 감독위원 또는 채점위원이 검토하여 복사된 작품(동일 작품)이 있을 때에는
관련된 수험자 모두를 부정행위로 처리됨을 유의하시오
장시간 컴퓨터 작업으로 신체에 무리가 가지 않도록 적절한 몸풀기(스트레칭) 후 작업하시오
다음 사항에 대해서는 실격에 해당되어 채점 대상에서 제외됩니다
1. 수업자 본인이 수험 도중 시험에 대한 포기(기권) 의사를 표시하고 포기하는 경우
2. 작업 범위(용량, 시간)를 초과하거나, 요구사항과 현격히 다른 경우(채점위원이 판단)
3. slide가 javasciprt(jQuery포함), css중 하나 이상의 방법을 이용하여 제작되지 않은 경우
(※ 움직이는 Slide를 제작하지 않고 이미지 하나만 배치한 경우도 실격처리 됨)
4. 수험자 미숙으로 비번호 폴더에 완성된 작품 파일을 저장하지 못했을 경우
5. 압축프로그램을 사용하여 작품을 압축 후 제출한 경우
6. 과제 기준20% 이상 완성이 되지 않은 경우(채점위원이 판단)
#웹디자인기능사실기, #웹디자인, #html, #css, #javascript,
#시험유의사항, #인트로
링크
https://blog.naver.com/bong9tv/223513...
- #education
- #
- #
- #
- #
ماه قبل
در تاریخ 1403/04/24 منتشر شده
است.
152
بـار بازدید شده