웹디자인기능사 실기 | 문제 풀이 C-3 (남도맛기행 축제)
웹디자인기능사 실기 B-3 (세계의 미술작품)의 유형은 다음과 같습니다. 메뉴 : 가로형 서브메뉴 하단 슬라이드 : 아래에서 위 공지사항 / 팝업창 : 공지사항/갤러리 분리형, 일반 팝업창 갤러리 : 마우스 오버 시 투명도 배너 푸터 : SNS 아래 첨부된 이미지는 "세계의 미술작품"와 아무상관 없는 문제풀이용 더미이미지입니다. (출처 : 미리캔버스) 기본설정 / 레이아웃 파일 및 폴더 폴더 — css, images, js 파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더) 저는 헤더(네비), 섹션(슬라이드, 공지사항, 갤러리, 배너), 푸터(네비, 패밀리사이트) 등 레이아웃을 먼저 잡아놓고 합니다. HTML CSS *{ padding: 0; margin..
2022. 3. 15.
웹디자인기능사 실기 | 문제 풀이 B-3 (세계의 미술작품)
웹디자인기능사 실기 B-3 (세계의 미술작품)의 유형은 다음과 같습니다. 메뉴 : 가로형 서브메뉴 하단 슬라이드 : 아래에서 위 공지사항 / 팝업창 : 공지사항/갤러리 분리형, 일반 팝업창 갤러리 : 마우스 오버 시 투명도 배너 푸터 : SNS 아래 첨부된 이미지는 "세계의 미술작품"와 아무상관 없는 문제풀이용 더미이미지입니다. (출처 : 미리캔버스) 기본설정 / 레이아웃 파일 및 폴더 폴더 — css, images, js 파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더) 저는 헤더(네비), 섹션(슬라이드, 공지사항, 갤러리, 배너), 푸터(네비, 패밀리사이트) 등 레이아웃을 먼저 잡아놓고 합니다. HTML 닫기 X CSS *{ padding: 0; m..
2022. 3. 14.
웹디자인기능사 실기 | 문제 풀이 B-2 (대한투어)
웹디자인기능사 실기 B-2 (대한투어)의 유형은 다음과 같습니다. 메뉴 : 가로형 서브메뉴 하단 전체배경 슬라이드 : 아래에서 위 공지사항 / 갤러리 : 분리형 바로가기 팝업창 : 모달레이어 팝업창 푸터 : 패밀리사이트 아래 첨부된 이미지는 "대한투어"와 아무 상관 없는 문제풀이용 더미이미지입니다. (출처 : 미리캔버스) 기본설정 / 레이아웃 파일 및 폴더 폴더 — css, images, js 파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더) 저는 헤더(네비), 섹션(슬라이드, 공지사항, 갤러리, 배너), 푸터(네비, 패밀리사이트) 등 레이아웃을 먼저 잡아놓고 합니다. HTML 닫기 X 패밀리사이트▼ CSS *{ padding: 0; margin: 0;..
2022. 3. 11.
웹디자인기능사 실기 | 문제 풀이 C-1 (해운대 빛축제)
웹디자인기능사 실기 C-1 (해운대 빛축제)의 유형은 다음과 같습니다. 메뉴 : 세로형 서브메뉴 하단 슬라이드 : Fade In / Out 공지사항 / 갤러리 : 탭 배너 / 바로가기 팝업창 : 일반팝업창 푸터 : 패밀리사이트 없음 아래 첨부된 이미지는 "해운대 빛축제"와 아무상관 없는 문제풀이용 더미이미지입니다. (출처 : 미리캔버스) 기본설정 / 레이아웃 파일 및 폴더 폴더 — css, images, js 파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더) 저는 헤더(네비), 섹션(슬라이드, 공지사항, 갤러리, 배너), 푸터(네비, 패밀리사이트) 등 레이아웃을 먼저 잡아놓고 합니다. HTML CSS *{ padding: 0; margin: 0; fon..
2022. 3. 8.
웹디자인기능사 실기 | 문제 풀이 A-4 (유진건설)
웹디자인기능사 실기 A-4 유진건설의 유형은 다음과 같습니다. 메뉴 : 가로형 서브메뉴 하단 전체 슬라이드 : Fade In / Out 공지사항 / 갤러리 : 분리형 팝업창 : 일반팝업창 푸터 : 패밀리사이트 아래 첨부된 이미지는 유진건설이랑 아무상관 없는 문제풀이용 더미이미지입니다. (출처 : 미리캔버스) 기본설정 / 레이아웃 파일 및 폴더 폴더 — css, images, js 파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더) 저는 헤더(네비), 섹션(슬라이드, 공지사항, 갤러리, 배너), 푸터(네비, 패밀리사이트) 등 레이아웃을 먼저 잡아놓고 합니다. HTML CSS *{ padding: 0; margin: 0; /*모든 태그 여백*/ font-fa..
2022. 3. 4.
웹디자인기능사 실기 | 문제 풀이 A-2 (Green 복지재단)
A-2 그린복지재단 문제 풀이입니다. 메뉴는 가로형 전체배경, 슬라이드는 좌에서 우로, 공지사항과 갤러리는 나뉘어진 형태이며, 패밀리사이트 있습니다. 이미지와 문제지 첨부합니다. 기본 설정 및 레이아웃 ★ 파일 및 폴더 폴더 — css, images, js 파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더) ★ HTML // 팝업창 로고 // 헤더 네비게이션 // 공지사항 // 갤러리 배너 // 공지사항 갤러리 분리형일 경우 바로가기 없음 로고 카피라이터 ★ CSS @charset "utf-8"; * { padding: 0; margin: 0; font-family: "맑은 고딕", sans-serif; font-size: 14px; color: #333..
2022. 2. 23.
웹디자인기능사 실기 | 메뉴, 슬라이드, 본문 유형
웹디자인 기능사 실기 패턴입니다. 메뉴, 슬라이드, 본문영역, 팝업창, 푸터 부분이 몇 가지 유형이 있는지 예시와 함께 정리해 봤어요. 메뉴 유형 1. 가로형 — 서브메뉴 전체 하단 2. 가로형 — 서브메뉴 전체 하단, 넓이 100% 3. 가로형 — 해당하는 서브메뉴만 하단 4. 세로형 — 해당하는 서브메뉴만 하단 5. 세로형 — 해당하는 서브메뉴 우측 슬라이드 슬라이드 방법 1. 가로 슬라이드 — 슬라이드 가로로 붙인 뒤 위치를 좌측으로. 3번째 슬라이드 다음 위치 다시 0으로 2. 세로 슬라이드소 — 3. 페이드 인 / 아웃 — 본문 1. 공지사항 / 갤러리, 배너, 바로가기 — 공지사항과 갤러리가 탭으로 구분되고 배너와 바로가기 2. 공지사항, 갤러리, 배너 — 팝업창 공지사항 첫번째 게시글 클릭 ..
2022. 2. 17.
