본문 바로가기

웹디자인기능사19

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.
NN 웹디자인기능사 필기 | 웹그래픽디자인 1. 컴퓨터 그래픽스 일반 컴퓨터 그래픽스의 역사 제1세대 (1950년대) : 진공관시대 제2세대 (1960년대) : 트랜지스틱 시대, 리플레시형 CRT 시대 제3세대 (1970년대) : 집적회로시대. 스트레지형 CRT 시대 제4세대 (1980년대) : 고밀도 집적회로 시대. 레스터스캔형 CRT 시대, 프랙탈 이론을 실천한 사례 발표 제5세대 (1990년대) : 컴퓨터지능화 시대. 전자출판을 의미하는 DTP시대 본격화 월윈드(1949년) : MIT에서 개발되어 수학적 데이터를 그래픽으로 표현한 컴퓨터 2. 컴퓨터의 장치 구성 입력장치 — 키보드, 마우스, 태블릿, 터치스크린 디지타이저(Digitizer) : 도표, 그림, 설계 도면 등의 좌표 데이터를 정확하게 입력할 수 있는 장치 출력장치 — 모니터 :.. 2021. 1. 14.
NN 웹디자인기능사 필기 | 인터넷일반 1. 인터넷 일반 인터넷 주소 현재 IP주소는 IPv4 사용 IPv4 : 32bit IPv6 : 128bit IPSEC (IP Security) : IPv4와 IPv6에 탑재된 인증, 무결성, 비밀성 서비스를 제공. 네트워크 상에서 보안이 가능합니다. 인터넷 프로토콜 1. OSI 참조 모델 1-4 하위계층 — 물리 데이터링크 : 직접 연결된 시스템간의 오류 없는 데이터 전송을 담당하며 네트워크 계층에 서비스를 제공 네트워크 전송 2. OSI 참조 모델 5-7 상위계층 — 세션 표현 : 정보의 표현 방식 관리, 암호화 응용계층 : 2. 호스트 이름과 도메인 최상위 도메인 g TLD — ICANN의 IANA에서 관리하는 도메인 com, net, org, edu, int, gov, mi 등 cc TLD — 각.. 2021. 1. 13.

티스토리툴바