웹디자인기능사 실기 | 메뉴, 슬라이드, 본문 유형

 

웹디자인 기능사 실기 패턴입니다. 메뉴, 슬라이드, 본문영역, 팝업창, 푸터 부분이 몇 가지 유형이 있는지 예시와 함께 정리해 봤어요.

 

 

메뉴

 

유형

1. 가로형 — 서브메뉴 전체 하단    

 

2. 가로형 — 서브메뉴 전체 하단, 넓이 100%  

 

3. 가로형 — 해당하는 서브메뉴만 하단

 

4. 세로형 — 해당하는 서브메뉴만 하단 

 

5. 세로형 — 해당하는 서브메뉴 우측

 

 

 

슬라이드

 

슬라이드 방법

1. 가로 슬라이드 — 슬라이드 가로로 붙인 뒤 위치를 좌측으로. 3번째 슬라이드 다음 위치 다시 0으로 

2. 세로 슬라이드소 —  

3. 페이드 인 / 아웃 —  

 

 

본문

 

1. 공지사항 / 갤러리, 배너, 바로가기 — 공지사항과 갤러리가 탭으로 구분되고 배너와 바로가기 

2. 공지사항, 갤러리, 배너 —  

 

 

 

팝업창

 

공지사항 첫번째 게시글 클릭 시

1. 레이어 팝업창 — 일반 팝업창 

 

2. 모달 레이어 팝업창 — 팝업창 외에 다른 컨텐츠 작동 안 되게 

 

 

푸터

 

1. 일반 — 패밀리 사이트가 없는 유형 

2. 패밀리 사이트 — 패밀리사이트 드롭메뉴 구현

 

 

공개문제별 유형

 

A-1 Just 쇼핑몰

• 메뉴 :
• 슬라이드 : 
• 공지사항 / 갤러리 :
• 팝업창 : 
• 푸터 : 

A-2 Green 복지재단

• 메뉴 : 가로형 서브메뉴 하단 전체
• 슬라이드 : 가로 슬라이드
• 공지사항 / 갤러리 : 분리형
• 팝업창 : 일반팝업창
• 푸터 : 패밀리 사이트

A-3 강원천문대

A-4 유진건설

B-1 대한은행

B-2 대한투어

B-3 세계의 미술작품

B-4 산업대학교

C-1 해운대 빛축제

C-2 부여 가을연꽃축제

C-3 남도맛기행 축제

• 메뉴 : 세로형 우측 개별
• 슬라이드 : 좌우
• 공지사항 / 갤러리 : 분리형
• 팝업창 : 일반
• 푸터 : 로고 / 하단메뉴 / 카피라이트

C-4 Vallery Festival

 

관련포스트

• 웹디자인기능사 실기 | 기본적인 와이어프레임 구조
• 웹디자인기능사 실기 | 주요 코드 정리
• 웹디자인기능사 실기 | 메뉴(네비게이션) 패턴