본문 바로가기

웹디자인기능사실기16

NN 웹디자인기능사 실기 | 기본적인 와이어프레임 구조 웹디자인기능사 실기 기본적인 HTML, CSS, JAVASCRIPT 구조에 대해 말씀드리겠습니다. 크게 팝업창, 헤더, 섹션, 푸터 정도로 나뉘게 됩니다. 팝업창 헤더 : 로고, 메뉴 섹션 : 공지사항, 갤러리, 배너, 바로가기 푸터 : 카피라이트, SNS, 패밀리사이트 HTML 세팅 와이어프레임 닫기 X 공지사항 갤러리 로고 하단메뉴 카피라이트 패밀리사이트▼ 와이어프레임 메뉴 세로형 닫기 X 공지사항 갤러리 로고 하단메뉴 카피라이트 패밀리사이트▼ CSS 세팅 @charset "utf-8"; * { padding: 0; margin: 0; font-family: "맑은 고딕", sans-serif; font-size: 14px; color: #333333; } li { list-style: none; }.. 2022. 1. 19.
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 웹디자인기능사 실기 | 주요 코드 정리 웹디자인기능사 실기에서 HTML, CSS, JQUERY 별로 자주 쓰이는 주요 코드를 정리했습니다. 모두 좋은 결과 있으시길 기원합니다. HTML — html 버전 선언 — 전세계 문자와 기호 인코딩 방식 — 특별한 기능없이 CSS와 함께 쓰이는 display inline 방식(줄바꿈 안됨) — 최상단으로 이동합니다. CSS 1. 사이즈 line-height — 줄 높이를 정하는 속성입니다. normal | length | number | percentage | initial | inherit box-sizing — content-box : 테두리와 안쪽 여백이 더해집니다. border-box : 테두리와 안쪽 여백이 포함됩니다. 2. 배치 display — none : 보이지 않게 됩니다. block .. 2021. 8. 4.
NN 웹디자인기능사 실기 | 문제 풀이 A-3 (강원천문대) 세팅 1. 파일과 폴더 수험번호 폴더 — images, css, js 폴더 생성, index.html 생성 images 폴더 : 이미지 10개 css 폴더 : common.css 파일 생성 js 폴더 : jquery파일 이동, common.js 파일 생성 2. HTML 3. CSS * { padding: 0; margin: 0; font-family: "맑은 고딕", sans-serif; font-size: 14px; color: #333333; } li {list-style: none;} a {text-decoration: none;} img {border: none;} header { width: 1200px; height: 100px; margin: 0 auto; } section { width: .. 2021. 8. 3.
NN 웹디자인기능사 실기 | 메뉴(네비게이션) 유형별 소스 A. 가로형 하단 전체 : 마우스 오버 시 서브 메뉴 전체 아래로 슬라이드 B. 가로형 하단 전체 배경 : 마우스 오버 시 서브 메뉴 전체 아래로 슬라이드 C. 가로형 하단 개별 : 마우스 오버 시 해당 서브 메뉴 아래로 슬라이드 D. 세로형 하단 : 마우스 오버 시 해당 서브 메뉴 아래로 슬라이드 E. 세로형 우측 : 마우스 오버 시 해당 서브 메뉴 우측으로 슬라이드 위의 구분과 같이 5가지 메뉴패턴이 있어요. 가로형에서 A와 B는 색만 반전된 형태고, C는 서브메뉴가 하나만 슬라이드다운 되는 형태입니다. 세로형 D와 E는 서브메뉴가 아래냐 우측이냐 차이입니다. 소스를 볼까요? HTML 형태는 같습니다. (B는 한 줄 추가되는 부분이 있어요.) CSS는 전부 차이가 있습니다. 각각 외워야합니다. Jav.. 2021. 7. 20.
NN 웹디자인기능사 실기 | 슬라이드 패턴 기본 형태 setInterval var num=1; setInterval(function(){ if(num 2021. 2. 23.
NN 웹디자인기능사 실기 | 문제 풀이 A-1 (JUST쇼핑몰) 웹디자인기능사 실기 A유형 'JUST쇼핑몰' 기출문제 풀이입니다. 슬라이드, 탭메뉴, 팝업메뉴 등을 구현해야 합니다. 구현해야 할 주요 요소들 1. 요구사항 charset : UTF-8 2. 색 주조색, 보조색, 배경색, 텍스트색 3. 로고 가로세로 200픽셀 X 40픽셀 심벌없는 워드 타입 (Header 폴더의 제공 된 텍스트) 4. 메뉴 메인 메뉴 — 마우스 올리면 하이라이트 벗어나면 하이라이트 해제 서브 메뉴 — 메인 메뉴에 마우스를 올리면 서브 메뉴 부드럽게 나타남 5. 슬라이드 이미지 이미지 : slide 폴더 안 이미지 제공 애니메이션 : 좌우 / 상하 / 페이드인, 아웃 6. 탭 메뉴 공지사항 : contents 폴더에 제공된 텍스트. 타이틀 영역과 콘텐츠 영역 구분하여 표현 갤러리 : co.. 2021. 2. 8.

티스토리툴바