본문 바로가기

웹디자인기능사실기패턴3

NN 웹디자인기능사 실기 | 메뉴, 슬라이드, 본문 유형 웹디자인 기능사 실기 패턴입니다. 메뉴, 슬라이드, 본문영역, 팝업창, 푸터 부분이 몇 가지 유형이 있는지 예시와 함께 정리해 봤어요. 메뉴 유형 1. 가로형 — 서브메뉴 전체 하단 2. 가로형 — 서브메뉴 전체 하단, 넓이 100% 3. 가로형 — 해당하는 서브메뉴만 하단 4. 세로형 — 해당하는 서브메뉴만 하단 5. 세로형 — 해당하는 서브메뉴 우측 슬라이드 슬라이드 방법 1. 가로 슬라이드 — 슬라이드 가로로 붙인 뒤 위치를 좌측으로. 3번째 슬라이드 다음 위치 다시 0으로 2. 세로 슬라이드소 — 3. 페이드 인 / 아웃 — 본문 1. 공지사항 / 갤러리, 배너, 바로가기 — 공지사항과 갤러리가 탭으로 구분되고 배너와 바로가기 2. 공지사항, 갤러리, 배너 — 팝업창 공지사항 첫번째 게시글 클릭 .. 2022. 2. 17.
NN 웹디자인기능사 실기 | 문제 풀이 B-1 (대한은행) 저는 다음과 같은 순서로 실기 문제를 풀어보겠습니다. 1. 세팅 : 파일과 폴더 2. 레이아웃 : 3. 로고, 푸터 메뉴, 카피라이트 4. 배너, 바로가기 5. 메뉴 6. 슬라이드 7. 공지사항, 갤러리 : 팝업 세팅 1. 파일과 폴더 폴더 — 수험번호 폴더 생성 후 images, css, js 폴더 생성 파일 — index.html, js/jquery파일, images/이미지 파일 2. HTML 과 CSS * { padding: 0; margin: 0; font-family: "맑은 고딕", sans-serif; font-size: 14px; color: #333333; list-style: none; text-decoration: none; } img {border: none;} header { wi.. 2021. 8. 10.
NN 웹디자인기능사 실기 | 메뉴(네비게이션) 유형별 소스 A. 가로형 하단 전체 : 마우스 오버 시 서브 메뉴 전체 아래로 슬라이드 B. 가로형 하단 전체 배경 : 마우스 오버 시 서브 메뉴 전체 아래로 슬라이드 C. 가로형 하단 개별 : 마우스 오버 시 해당 서브 메뉴 아래로 슬라이드 D. 세로형 하단 : 마우스 오버 시 해당 서브 메뉴 아래로 슬라이드 E. 세로형 우측 : 마우스 오버 시 해당 서브 메뉴 우측으로 슬라이드 위의 구분과 같이 5가지 메뉴패턴이 있어요. 가로형에서 A와 B는 색만 반전된 형태고, C는 서브메뉴가 하나만 슬라이드다운 되는 형태입니다. 세로형 D와 E는 서브메뉴가 아래냐 우측이냐 차이입니다. 소스를 볼까요? HTML 형태는 같습니다. (B는 한 줄 추가되는 부분이 있어요.) CSS는 전부 차이가 있습니다. 각각 외워야합니다. Jav.. 2021. 7. 20.