본문 바로가기

웹디자인기능사소스6

NN 웹디자인기능사 실기 | 유형별 CSS 총정리 웹디자인기능사 실기 유형별로 메뉴, 슬라이드, 공지사항, 갤러리, 팝업창, 패밀리사이트에 대한 CSS를 모두 정리해봤습니다. 메뉴 가로형 하단 전체 / 가로형 하단 개별 — CSS는 같고 jQuery 다릅니다. header { width: 1200px; height: 100px; margin: 0 auto; } section { width: 1200px; height: 500px; margin: 0 auto; } footer { width: 1200px; height: 100px; margin: 0 auto; } .nav_header { float: right; /* 네비 전체 우측 정렬 */ width: 600px; height: 40px; margin-top: 30px; } .nav_header > .. 2022. 3. 19.
NN 웹디자인기능사 실기 | 유형별 jQuery 총정리 웹디자인기능사 실기 유형별로 메뉴, 슬라이드, 공지사항, 갤러리, 팝업창, 패밀리사이트에 대한 제이쿼리 모두 정리해봤습니다. 메뉴 가로형 서브메뉴 하단 전체 — 네비게이션 hover $('.subMenu').slideUp(0); $('.nav_header').hover(function(){ $('.subMenu').stop().slideDown('fast'); }, function(){ $('.subMenu').stop().slideUp('fast'); }); 가로형 서브메뉴 하단 전체 배경 — 네비게이션 hover, 배경 $('.subMenu, .subMenuBg').slideUp(0); $('.nav_header').hover(function(){ $('.subMenu, .subMenuBg').sto.. 2022. 3. 18.
NN 웹디자인기능사 실기 | 문제 풀이 B-2 (대한투어) 웹디자인기능사 실기 B-2 (대한투어)의 유형은 다음과 같습니다. 메뉴 : 가로형 서브메뉴 하단 전체배경 슬라이드 : 아래에서 위 공지사항 / 갤러리 : 분리형 바로가기 팝업창 : 모달레이어 팝업창 푸터 : 패밀리사이트 아래 첨부된 이미지는 "대한투어"와 아무 상관 없는 문제풀이용 더미이미지입니다. (출처 : 미리캔버스) 기본설정 / 레이아웃 파일 및 폴더 폴더 — css, images, js 파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더) 저는 헤더(네비), 섹션(슬라이드, 공지사항, 갤러리, 배너), 푸터(네비, 패밀리사이트) 등 레이아웃을 먼저 잡아놓고 합니다. HTML 닫기 X 패밀리사이트▼ CSS *{ padding: 0; margin: 0;.. 2022. 3. 11.
NN 웹디자인기능사 실기 | 문제 풀이 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.
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.

티스토리툴바