F 유형은 최근 트렌드에 맞게 본문의 너비가 1340으로 훨씬 커진 구조를 가지고 있고, 메인 네비게이션에 호버시 나타나는 서브메뉴 구조도 난이도가 올라갔습니다.
F1 유형F3 유형
웹디자인개발기능사 자격증을 준비하는 수험생이라면 실기 시험 준비의 중요성을 잘 알고 있을 것입니다. 『2025 시대에듀 유선배 웹디자인개발기능사 실기 과외노트』는 포토샵, HTML, CSS, Javascript, jQuery 등 실기 시험에 필요한 모든 요소를 효율적으로 담았습니다.
다양한 실습 자료 실제 시험에 출제되는 주요 문제 유형을 분석하고, 새로운 유형의 문제까지 포함해 수험생들이 실전에 대비할 수 있도록 도와줍니다.
유튜브 강의 연계 학습 이론과 실습을 함께 병행할 수 있는 유튜브 강의를 통해 더욱 효과적인 학습이 가능합니다. 직접 화면을 보며 배우는 과정이 더해져 이해도를 높여줍니다.
최신 시험 반영 2025년도 최신 시험 출제 경향을 반영해 필요한 자료와 예제들로 학습할 수 있습니다.
실기 시험을 대비하며 시험의 유형을 제대로 파악하고 싶은 분들에게 추천하는 『웹디자인개발기능사 실기 과외노트』와 함께, 자신감 있는 시험 준비를 시작해 보세요.
- 웹앱의 동작원리 - 웹 표준과 브라우저 - VS Code 설치 및 실행 - HTML 개요 - CSS 개요 - CSS 속성 - HTML/CSS 기초 문법 - Figma 툴 활용 - 레이아웃 구현 기초 - 플렉서블 레이아웃 구현 - Git을 활용한 버전관리
2
웹 프로그래밍의 꽃! (JavaScript를 활용한 다양한 효과 적용)
88
- javascipt 기본 개념, 동작 원리, 개발 환경, 실행 방법 - 변수, 데이터 타입, 배열, 연산자, 객체, 함수 - 제어문 - 프로퍼티 정의생성자 함수에 의한 객체 생성, 프로토타입 - 전역 객체, this, 실행 컨텍스트, 클로저 - 클래스, 모듈, 웹팩 - ES6 함수 추가 기능 - String/Number/Date/Math/정규표현식 - 스프레드 문법 - 디스트럭처링 할당 - 문서 객체 모델(Document Object Model) - 동기식 처리 모델 vs 비동기식 처리 모델 - 이벤트 - Ajax- REST API - 자바스크립트 DOM 조작 - Form Input Validation Test
3
웹앱에생명을! (웹 상에 배포하기 위한 네트워크 기초 학습)
16
- 클라이언트, 서버 아키텍처의 이해 - 브라우저의 작동원리 학습 - 네트워크의 기초 지식 기반 REST API 이해 및 활용
4
웹앱에생명을! (데이터베이스를 이용해 살아있는 웹 앱 구현)
32
- 데이터베이스 개요 - 데이터베이스 모델링 - SELECT GROUP BY - INSERT, UPDATE, JOIN - Sub-Query, Index, View, Replication - BackUp, MongoDB
5
웹앱에생명을! (SQL함수를 활용한 정교한 웹 앱 구현)
40
- 날짜형 함수 , 문자형 함수, 숫자형 함수 - CASE, JOIN - COUNT, SUM, AVG, MIN, MAX
6
Web Project-static Web App (개인 프로젝트)
32
- 훈련생 관심분야 웹사이트 선정 리뉴얼 프로젝트 - 순수 자바스크립트 기반 웹사이트 구현
7
웹앱을정석대로! (다양한 유저가 사용할 수 있는 웹 앱 구현)
32
- 웹표준과 웹접근성을 준수하는 웹 앱 구현 - 크로스 브라우징 및 접속 환경 차이 학습
8
웹앱을보다 화려하게! (UI/UX를 이용한인터랙티브한웹 앱 학습)
64
- UX 기반 화면 구성의 효과와 방법 - 사용성 높은 UI 이해와 적용 - 사용성 높은 UX 이해와 적용 - Search Engine Optimized 웹앱
00:00 시작 00:10 완성본예시 01:06 HTML, CSS 구조 확인 02:20 aspect-ratio 02:53 cursor 이미지로 변경하기 04:17 cursor HTML 추가 05:02 cursor CSS 09:07 mousemove 이벤트 11:58 cursor에 확대 효과 추가
기본 커서는 숨기고, 커서의 움직임에 따라 같이 이동할 요소를 생성하고 구현합니다. javascript를 통해 구현하는 방법을 학습해보세요.
이 동영상은 JavaScript의 animate 함수와 easing을 활용하여 무한 슬라이드를 구현하는 방법을 설명하고 있다. 슬라이드는 왼쪽으로 움직이며, 순환되어 다시 오른쪽에서 나타난다. 페이저를 클릭하면 해당 슬라이드가 움직이는 기능도 있다.
✨ 하이라이트
[00:10](https://www.youtube.com/watch?v=B98b6xXh7PY&t=10) 이 섹션에서는 무한 슬라이드를 구현하는 방법에 대해 설명합니다.- 완성된 버전을 보여주고, 슬라이드가 왼쪽으로 움직이는 것을 보여줍니다. - 슬라이드를 클릭할 때마다 해당 슬라이드가 오른쪽에서 들어옵니다. - 슬라이드 컨테이너에는 가로로 정렬된 슬라이드들이 있으며, 오른쪽으로 넘어가는 슬라이드는 가려진 상태입니다. - 자바스크립트의 Animate 함수를 사용하여 슬라이드를 움직입니다.
[04:17](https://www.youtube.com/watch?v=B98b6xXh7PY&t=257) 슬라이드 컨테이너를 기준으로 모든 슬라이드가 절대값으로 한 곳에 모이게 하고, 현재 활성화된 슬라이드는 검은색으로 처리됩니다.- 페이저는 슬라이드의 개수에 따라 4개의 A 태그를 가지고 있으며, 현재 활성화된 슬라이드는 검은색으로 표시됩니다. - 슬라이드에는 절대 위치를 주어야 하며, 이때 위치는 슬라이드 래퍼를 기준으로 결정됩니다. - 슬라이드의 높이도 모든 요소와 동일하게 설정되어야 하며, 부모 요소의 높이를 기준으로 설정됩니다. - 페이저는 중앙에 위치하며, 내부 요소를 가운데 정렬합니다.
[08:34](https://www.youtube.com/watch?v=B98b6xXh7PY&t=514) JavaScript로 변수와 산술 연산을 결합하여 문장을 만들 때, 백틱과 % 기호를 사용해야 한다.- idx 변수 이름을 100으로 곱하여 0일 때는 0, 1일 때는 100, 2일 때는 200이 되도록 한다. - 화면을 확인하면 1이 나타나고, 오른쪽에 숫자 2가 있으며, 오른쪽에 숫자 3이 있다. - pager를 생성하기 위해 번호에 따라 pager를 생성해야 한다. - 반복문이 실행될 때마다 A 태그가 생성되고, 최종적으로 pager라는 요소에 HTML로 추가된다.
[12:52](https://www.youtube.com/watch?v=B98b6xXh7PY&t=772) addEventListener를 사용하여 클릭 이벤트를 처리하는 방법에 대해 설명합니다.- 클릭 이벤트가 발생한 객체는 'E'라는 매개변수로 전달됩니다. - preventDefault를 사용하여 기본 동작을 막을 수 있습니다. - MoveSlide 함수는 인덱스 번호에 따라 슬라이드를 이동시킵니다. - 현재 인덱스 번호와 전달된 번호를 비교하여 동작을 결정합니다.
[17:08](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1028) animate 함수의 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다.- 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다. - 이징에는 cubicBezier의 속도 모델을 추가할 수 있다. - 애니메이션의 fill-mode는 기본적으로 back이다.
[21:23](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1283) 이 섹션에서는 일반적으로 사용되는 easing을 추가하는 방법을 설명합니다.- easings.net에서 일반적으로 사용되는 easing을 확인합니다. - cubic-bezier 값을 복사하여 사용합니다. - 현재 슬라이드와 다음 슬라이드에 left 값 변경을 적용합니다. - 애니메이션의 fill mode를 forwards로 설정하여 정지합니다.
[25:42](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1542) 자동 슬라이드를 구현하기 위해 setInterval 함수를 사용하여 일정 시간마다 다음 슬라이드를 보여주는 함수를 생성한다.- setInterval 함수를 사용하여 일정 시간마다 작업을 수행한다. - 다음 인덱스를 생성하여 현재 인덱스에 1을 더한다. - 슬라이드의 개수로 나눈 나머지를 다음 인덱스로 선택한다.
