[웹디자인개발기능사 실기] 최신 기출 유형 문제 02회 - 가이드

안녕하세요 이번 시간에는 코리아 은행 웹사이트를 함께 제작해 보도록 하겠습니다 먼저 완성된 화면을 보여주고 있는데요 본 화면은 실제 시험장에서는 제공되지 않으니 참고만 해 주시기 바랍니다 간단하게 어떻게 구성되어 있는지 살펴볼게요 가로형 웹사이트를 제작하고 있고 때문에 헤더가 가로로 길게 나와 있습니다 로고가 들어가 있고요 그다 다음에 메뉴는이 메인 메뉴 부분을 누르게 되면 아래로 서브 메뉴가 펼쳐지는 형태입니다 그다음에 이미지 슬라이드가 구성되어 있고요 그다음에 공지 사항과 갤러리가 한 영역에 있습니다 공지 사항을 눌렀을 땐 공지 사항이 나오고 갤러리를 눌렀을 땐이 부분의 내용이 바뀌어야 합니다 그다음에는 배너와 바로가기를 만들어 주었고요 터 에는 하단 로고와 하단 메뉴 카피라이트 들어가 있는 것을 확인할 수 있습니다 그러면 문제의 요구 사항을 함께 보도록 하겠습니다 웹페이지에 제작한 전체 용량이 바를 초과하면 안 되고요 html 5 기준 외 표준을 준수해야 합니다 주제는요 코리아 은행 홈페이지를 제작하는 거예요 그래서 은행 사용자에게 편리한 은행 업무를 제공할 수 있는 웹사이트 제작을 요청했습니다 그러면 제작 내용이 어떻게 들어가는지 한번 보도록 할게요 총 html css 자바스크립트 세 개의 파일을 만들어야 하고요 이때 제이커리 오픈 소스 이미지 텍스트 등을 제공하고 있습니다 html css 캐릭터 셋은 utf 8로 해야 됩니다 그다음에 컬러가 는 주조색과 보조색은 자유롭게 할 수 있도록 지정해 주었고요 배경색은 흰색 그리고 텍스트 색은 샵 333 333의 검정색 계열의 색을 사용하도록 하고 있습니다 그다음에 사이트 맵을 보시면요 메뉴에 내용을 제공하고 있어요 메뉴는 총 메인 메뉴네 개 그리고 서브 메뉴가네 개네 개 세 세 개씩 하단으로 펼쳐지는 형태로 제작해 주시면 됩니다 그다음에 와이어프레임 구조를 한번 보도록 할게요 100% 전체 브라우저 넓이로 잡아두고 그 가운데 120 픽셀을 웹페이지의 영역으로 잡아줍니다 그리고 가운데 정렬을 해 줍니다 전체 브라우저의 가운데 올 수 있게끔 브라우저 정렬을 해 줄 거고요 총네 가지 부분으로 나눠 보았습니다 a 영역은 헤더 영역입니다 여기에는 가장 왼쪽 상단에 로고를 넣어 주면 되고요 그다음에 하단 메뉴 메인 메뉴가 서브 메뉴를 넣어 주면 됩니다 이곳의 높이는 100 픽셀로 설정을 해 주었고요 그다음에 B 영역에는 이미지 슬라이드가 들어가게 됩니다 그다음에 높이는 300 픽셀인지 되고요 C 영역에는 공지 사항과 갤러리 베너 바로가 가 들어가는데요 이때 주의할 점은 시작에서도 말씀드렸다시피 공지 사항과 갤러리가 한 부분에 들어갈 거기 때문에 이렇게 탭으로 구성해 주야 합니다 공지 사항이 활성화가 되어 있을 때는 공지 사항 제목들이 나오면 되고요 갤러리 탭을 누르면 갤러리로 바뀌면 됩니다 그다음에 배너랑 바로 가게를 넣어 주고요이 공간에이 영역의 새로 높이는 200 픽셀입니다 는 하단 영역이고 이곳에는 하단 로고와 하단 메뉴 카피라이트 들어가면 되고 전체적인 높이는 100픽셀이면 됩니다 그리고 공지 사항의 첫 번째 제목을 눌렀을 때는 이렇게 레이어 팝업창을 구성해 주시면 됩니다이 레이어 팝업창은 타이틀과 본문이 나올 거고 닫기 버튼을 누르면 창이 다시 닫혀야 합니다 그러면 세 별지지 사항을 함께 보도록 할게요 헤더 영역에는 먼저 로고가 들어 있었습니다 로고의 색은 과제 명에 맞게 변경해 주시면 됩니다 그리고 로고 크기를 변경할 때 가로세로 비율을 유지하면서 변경해 주시면 되고요 그다음에 메뉴를 구성해 보도록 하겠습니다 사이트 구조도의 내용을 참고해 주시면 되고 메인 메뉴의 효과를 먼저 보도록 하겠습니다 메뉴 중 하나에 마우스를 올리면 하이라이트가 돼야 되고 벗어나면 하이라이트가 해제되면 됩니다 그다음에 메인 메뉴에 마우스를 올리면 서브 메뉴 영역이 부드럽게 나타나면서 서브 메뉴가 보이면 됩니다 메인 메뉴에서 마우스 커버가 벗어나면 서브 영역 서브 메뉴 영역도 자연스럽게 사라지면 되고요 그다음에 서브 메뉴 영역의 효과를 보시면 서브 메뉴 영역은 메인 컨텐츠에 메인 컨텐츠를 고려하면서 배경 색상을 설정해 주시면 됩니다 서브 메뉴 중 하나에 마우스로 올리면 동일하게 하이라이트가 돼야 하고 벗어나면 하이라이트를 해제합니다 마우스 커서가 메뉴 영역을 벗어나도 서브메뉴 영역은 부드럽게 사라지면 됩니다 그다음에 슬라이드 영역을 한번 보도록 할게요 슬라이드 이미지를 제작할 건데 총 세 개의 이미지가 들어갑니다 그 이미지마다 세개 텍스트를 각 이미지에 적용시키면서 텍스트의 글자체 굵기 색상 크기 등은 적절하게 설정을 합니다 가독성을 높여야 하고요 독창성이 드러나도록 제작해 주시면 됩니다 슬라이드 애니메이션을 작업을 하셔야 하는데 이곳에서는 이미지가 자에서 우로 또는 우에서 좌로 이동하면서 전환되어야 합니다 슬라이드는 매산초 로 슬라이드가 전환이 되면 되고요 웹페이지를 열었을 때 자동으로 시작되어야 하며 반복적으로 이미지가 슬라이드 되는 방식으로 제작되면 됩니다 그다음에 콘텐츠 영역에서는 공지 사항 갤러리 배너 바로 가기가 있는데요 공지 사항에서는 타이틀 영역과 콘텐츠 영역을 분하여 표현하도록 합니다 그리고 콘텐츠는 html 코딩으로 작성해야 하며 이미지로 삽입하면 안 됩니다 콘텐츠는 콘텐츠 폴더에 텍스트를 제공하고 있습니다 이것을 사용해 주시면 되고요 공지 사항의 첫 번째 컨텐츠를 클릭할 경우 레이어 팝업 창이 나타내나 나고 레이어 팝업창 내에 닫기 버튼을 눌러서 해당 팝업창이 닫히게 돼야 됩니다 그다음에 레이어 팝업의 제목과 내용은 컨텐츠 폴더에서 텍스트 파일을 제공하고 있으니 이것을 활용해 주시면 되겠습니다 그다음에 갤러리 부분을 보겠습니다 컨텐츠 폴더에서 이미지 세 개를 제공하고 있어요 이걸 사용해서 가로 방향으로 배치해 주면 됩니다 공지 사항과 갤러리는 탭 기능을 이용하여 제작하여 제작하여야 합니다 각 탭을 클릭할 때는 해당 탭에 대한 내용이 보여야 합니다 그다음에 배너에는 컨텐츠 폴더에서 제공한 파일을 이용하여 편집하고 디자인을 할 거고요 바로 기도 마찬가지로 동일하게 컨텐츠에서 제공된 파일을 활용하도록 하겠습니다 프터 영역을 보도록 하겠습니다 프터 영역은 로고를 그레이스케이 채색으로 변경하고 사용자의 접근성을 고려하여 배치합니다 그다음에 풋터 폴더에 제공된 텍스트를 사용해서 카피라이트 패밀리 사이트 하단 메뉴를 제공 제작해 주시면 됩니다 기술적 준수 사항을 살펴보도록 하겠습니다 어 웹페이지 코딩은 html 기준 웹표준을 html 5 기준 웹 표준을 준수해야 하기 때문에 유효성 검사를 진행해 주시면 되고요 css 별도 파일로 제작해 링크해야 합니다 자바스크립트 코드도 별도의 파일로 제작해서 연결해야 하며 브라우저에 내장된 개발 도구의 콘솔 탭에서 오류가 표시되지 않아야 합니다 어 상용 상호작용이 필요한 모든 콘텐츠는 임시 링크로 연결해 주시면 되고요 탭키로 이동하여 선택할 수 있어야 합니다 사이트는 다양한 화면 해상도에서 일관성 있는 페이지 레 레이아웃을 제공해야 하고 페이지의 전체 레이아웃은 테이블 태그가 아닌 css 통해 레이아웃 작업을 해 주시면 됩니다 css 브라우저에서 를 사용 안 함으로 설정한 경우 콘텐츠가 세로로 나열되기 됩니다 다음에 타이틀 텍스트와 바디 텍스트 메뉴 텍스트 각각의 텍스트들을 적당한 서식을 적용해서 텍스트 간의 위계질서가 나타나게 합니다 어 모든 이미지에는 이미지를 대체할 수 있는 표현인 알트 속성이 있어야 합니다 그다음에 제작된 사이트의 메인 페이지 레이아웃 구성 요소 크기 위치 등은 최신 버전의 MS 엣지와 구글 크롬에 동일하게 표시되어야 합니다 제출하는 방법을 주 있게 살펴볼게요 수험자는 비번으로 된 폴더명을 폴더 명으로 완성된 작품 작품 파일을 바탕 화면에 저장해 주시면 됩니다 폴더 안에는 이미지스 스크립트 css 폴더 세 개가 또 있어야 하고요 메인 페이지는 반드시 최 최상위 폴더에 인덱스 fromhtml 저장되어 있어야 합니다 그다음에이 인덱스 fromhtml 열었을 때 모든 리소스들이 잘 보여야 하고 그 리소스들을 포함해서 제출해 주셔야 합니다 세점 위원에 컴퓨터에서 정상 작동되어야 한다는 점을 확인해 주시면 되겠습니다 전체 결과물의 용량은 오바이트를 넘지 않게 제출해야 하니 포토샵 작업된 파일들 프로젝트 파일들은 저장되지 않도록 제출을 해 주시면 되겠습니다 수험자 유의 사항은 간단하게 살펴보면 소프트웨어가 잘 설치되어 있는지 확인해 주시고요 그다음에 참고자료참고 자료 중 오탈자가 있을 때는 본인이 수정하여 사용해 주시면 됩니다 지참 공구 외에 참고자료나 외부 장치를 가져갈 수 없음을 확인해 주시고요 어 바탕 화면에는 수험자 본인의 비번호 이름을 가진 폴더가 저장되어 있어야 합니다 그 외에는 구정 처리가 될 수 있으니 확인해 주시고요 그다음에 실격 처리가 되는 내용을 보도록 하겠습니다 시험자 본인이 포기 기권 의사를 표현하는 경우 그리고 작업 범위 용량이나 시간을 초과하는 경우 요구 사항과 현저이 다른 경우 그리고 슬라이드가 자바스크립트나 css 중 하나 이상의 방법을 이용하지 않고 제작된 경우를 말합니다 움직이는 슬라이드를 제작하지 않고 이미지 하나만 배치한 경우도 실격처리 되니 꼭이 부분은 완성해 주시는게 좋겠습니다 그리고 수험자의 미숙으로 비번호 폴더에 완성된 파일이 저장되지 않은 경우도 실격되는 폴더 이름을 꼭 확 해주시고요 압축 프로그램을 절대 사용해 주시면 안 됩니다 그리고 과제 기준 20% 이상이 완성되지 않은 경우에도 실격 처리될 수 있으니 확인해 주시면 됩니다