HighLight in your life~

[웹디자인기능사] 공개문제 A-1. JUST쇼핑몰 (#1.포토샵)

https://youtu.be/AgNs7qwXgfY

[웹디자인기능사] 공개문제 B-1. 대한은행 (#1.포토샵)

https://youtu.be/h3BYXJe_pqI

[웹디자인기능사] 공개문제 C-1. 해운대 빛축제 (#1.포토샵)

https://youtu.be/-trrxelc4xE

[웹디자인기능사] 공개문제 D-1. 조이컨트리클럽 (#1.포토샵)

https://youtu.be/tC5nxxOdSZs

[웹디자인기능사] 공개문제 E-1. 김치이야기 (#1.포토샵)

https://youtu.be/8EIfpo-ubyk

[웹디자인기능사] 공개문제 F-1. 주식회사 기능건설 (#1.포토샵)

https://youtu.be/TV1lF-52fkc

-------------------------------------------------------------------------

#1-1. 포토샵기능편 - 포토샵 몰라도 할 수 있어!(무료강좌)

https://youtu.be/27pvxn649HU?list=PLdwQP35_Nz9e4DIQCtvAqctMBxEXgRo5s

웹디자인 기능사 실기(04) - 포토샵 필수 핵심 - crop, type tool, 파일 저장

https://youtu.be/37UZuAS8Oqw?list=PLNLxTqAeb36cSHnaybnh7Sl-WVAZgLM42

웹디자인 기능사 실기(05) - 포토샵 필수 핵심 - 무채색 변경하기, 레이어스타일

https://youtu.be/lKfhG4B4THQ?list=PLNLxTqAeb36cSHnaybnh7Sl-WVAZgLM42

-------------------------------------------------------------------------


웹디자인 기능사 실기시험을 위한 포토샵(1편) - 인터페이스 설명 및 필수 환경설정(Photoshop CS6 영문판)

https://youtu.be/ujJXfVrD-VM

웹디자인 기능사 실기시험을 위한 포토샵(2편) - 파일 다루기(새 파일,불러오기,저장,선택영역)(Photoshop CS6 영문판)

https://youtu.be/gwulir5I6Zo

웹디자인 기능사 실기시험을 위한 포토샵(3편) - 툴바 다루기(이동툴,문자툴,변형하기)(Photoshop CS6 영문판)

https://youtu.be/g5ajzataCE4

웹디자인 기능사 실기시험을 위한 포토샵(4편) - 이미지 제작하기(로고,SNS아이콘)(Photoshop CS6 영문판)

https://youtu.be/V7xkIcrwRBo

웹디자인 기능사 실기시험을 위한 포토샵(5편) - 이미지 제작하기(갤러리,배너,바로가기)(Photoshop CS6 영문판)

https://youtu.be/McaNKhNvBYc

웹디자인 기능사 실기시험을 위한 포토샵(6편) - 이미지 제작하기(슬라이드 이미지)(Photoshop CS6 영문판)

https://youtu.be/XE18pNeKOWc

Ctrl+K : 환경설정
Ctrl+R : Ruler 켜기
 - Ruler에서 마우스 오른쪽 누르고, 단위가 pixels인지 확인필요
 - Edit > Preferences > Unit & Rulers

------------------------------------------------------------------

* 로고 이미지 무채색으로 변경하기
 이미지(I) > 조정(J) > 채도 감소(D) : Shift + Ctrl + U
 이미지(I) > 조정(J) > 명도/대비(C) > 명도: 150 > 확인

------------------------------------------------------------------

[포토샵 CS6 단축키] 화면확대: Ctrl ++ 
                         화면축소: Ctrl --

[포토샵 쌩기초1] 환경설정 이 영상만 보면됩니다. 포토샵 초보자를 위한 영상

https://youtu.be/L41v_UQwEFk

웹디자인 기능사 실기(04) - 포토샵 필수 핵심 - crop, type tool, 파일 저장

https://youtu.be/37UZuAS8Oqw?list=PLNLxTqAeb36cSHnaybnh7Sl-WVAZgLM42

웹디자인 기능사 실기(05) - 포토샵 필수 핵심 - 무채색 변경하기, 레이어스타일

https://youtu.be/lKfhG4B4THQ?list=PLNLxTqAeb36cSHnaybnh7Sl-WVAZgLM42

#1-1. 포토샵기능편 - 포토샵 몰라도 할 수 있어!(무료강좌)

https://youtu.be/27pvxn649HU?list=PLdwQP35_Nz9e4DIQCtvAqctMBxEXgRo5s

웹디자인 기능사 실기시험을 위한 포토샵(4편) - 이미지 제작하기(로고,SNS아이콘)(Photoshop CS6 영문판)

https://youtu.be/V7xkIcrwRBo

[꺾이지 않는 마음] 웹디자인기능사 실기 합격 후기 및 공부방법 | 요점정리첨부 | 독학 | 비주얼스튜디오

https://youtu.be/ywko8lxhKt0

[웹디자인기능사] 1초라도 빠르게 셋팅하자! 꼭 보세요!

https://youtu.be/cW7ACwGAoOA

웹디자인 기능사 실기시험을 위한 포토샵(5편) - 이미지 제작하기(갤러리,배너,바로가기)(Photoshop CS6 영문판)

https://youtu.be/McaNKhNvBYc

[포토샵 강좌] 로고 만들기

https://youtu.be/-3SI64dR5h0

웹디자인기능사 실기 큐넷 공개 문제 1번 2강 포토샵 이미지 제작

https://youtu.be/5dNLTGJr120

[웹디자인기능사] 공개문제 E-1. 김치이야기 (#1.포토샵)

https://youtu.be/8EIfpo-ubyk

[웹디자인기능사] 공개문제 E-1. 김치이야기 (#1.포토샵)

https://youtu.be/QBXE3MP0WQs

웹디자인기능사 - 기출예상문제01 - 존예쇼핑몰 - 이미지 제작편 (with CLOVA Dubbing)

https://youtu.be/wj_j3meCBns?list=PLdwQP35_Nz9cLJy7nv2tW_FWeKs35FbQP

웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-1) | 웹스토리보이 | 웹디자인기능사 실기 포토샵

https://youtu.be/CZRVhkRr3Ak

[직장인/독학] 웹디자인기능사 실기 비전공자 합격 후기
https://blog.naver.com/r1arbf1/223348935197

웹디자인 기능사 실기 시험 전에 보면 좋은 지시서 요점정리
https://ninefloor.tistory.com/56

웹디자인 기능사 실기 후기 (초 단기 합격 팁)
https://quizmoa.com/article/view/4/59/

시설현황 : Photoshop CC2022(한글) ILLUSTRATOR CC2022(한글) Notepad++ 8.5.3 Visual Studio code Indesign CC2022(한글)

Family사이트 예제 : A-2, A-4, B-2, B-4, C-2, C-4, D-2, D-4, E-2, E-4, F-2, F-4

크몽)웹디자인기능사 A-1 JUST쇼핑몰

https://youtu.be/hefc8S0-z3I

크몽)웹디자인기능사 A-2 GREEN복지재단

https://youtu.be/6yF3iK8k-7E?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 A-3 강원천문대

https://youtu.be/emi1pFxhJXs?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 A-4 유진건설

https://youtu.be/lGK4jFgYCnQ?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 B-1 대한은행

https://youtu.be/tBHlZOkYuW8?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 B-2 대한투어

https://youtu.be/odEiAItYjaw?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 B-3 세계의 미술작품

https://youtu.be/dn0i74jC9Es?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 B-4 산업대학교

https://youtu.be/O7dif4CrfmM?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 C-1 해운대빛축제

https://youtu.be/RFPerM4tAfs?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 C-2 부여가을연꽃축제

https://youtu.be/GMDgI9eiCBU?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 C-3 남도맛기행

https://youtu.be/MlXAR2RN-hQ?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 C-4 Vallery festival

https://youtu.be/FEtWeoEadC0?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 D-1 조이컨트리클럽

https://youtu.be/Cwb4RnprsbQ?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 D-2 서울구석구석

https://youtu.be/n9BKErC4ni4?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사D-3 푸른마을

https://youtu.be/-c3UgIZtgbE?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 D-4 리빙샵아울렛

https://youtu.be/mT8tJTZVhXE?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 E-1 김치이야기

https://youtu.be/HIwywMuCJhI?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 E-2 역사박물관

https://youtu.be/E_7cdSG-slw?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 E-3 영상박물관

https://youtu.be/41YlX0Xb6Wo?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 E-4 철길마을

https://youtu.be/fi2YfF-tyzU?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

2024웹디자인기능사실기 F-1 주식회사기능건설 01. 레이아웃 작업

https://youtu.be/RJHqoAZRdJM

2024웹디자인기능사실기 F-1 주식회사기능건설 02. 콘텐츠작업

https://youtu.be/nR0ONQvCmhs

2024웹디자인기능사실기 F-1 주식회사기능건설 03.제이쿼리 작업

https://youtu.be/qeSK08bgGgI

2024웹디자인기능사실기 F-2 기능대학 01. 레이아웃 작업

https://youtu.be/WVc7vpf0q00

2024웹디자인기능사실기 F-2 기능대학 02. 콘텐츠 작업

https://youtu.be/6nJ0d6UrreI

2024웹디자인기능사실기 F-2 기능대학 03. 제이쿼리 작업

https://youtu.be/7zaWCiP8zZw?list=TLPQMDQwNjIwMjRnyaImtAxUqA

2024웹디자인기능사실기 F-3 오픈뱅킹 01. 레이아웃 작업

https://youtu.be/5TovXtTeZIo

2024웹디자인기능사실기 F-3 오픈뱅킹 02. 콘텐츠 작업

https://youtu.be/3P4Dm9lJVlQ?list=TLPQMDQwNjIwMjRnyaImtAxUqA

2024웹디자인기능사실기 F-3 오픈뱅킹 03. 제이쿼리 작업

https://youtu.be/rN9rBhv_h-M?list=TLPQMDQwNjIwMjRnyaImtAxUqA

2024웹디자인기능사실기 F-4 하이글로벌컴퍼니 01. 레이아웃 작업

https://youtu.be/3KONtncawC0?list=TLPQMDQwNjIwMjRnyaImtAxUqA

2024웹디자인기능사실기 F-4 하이글로벌컴퍼니 02. 콘텐츠 작업

https://youtu.be/lxbLU6t5SW0?list=TLPQMDQwNjIwMjRnyaImtAxUqA

2024웹디자인기능사실기 F-4 하이글로벌컴퍼니 03. 제이쿼리 작업

https://youtu.be/G9NSBPIjj6g?list=TLPQMDQwNjIwMjRnyaImtAxUqA

크몽)웹디자인기능사 번외편 : 제이쿼리 기본기 빠르게 익히기(독학하시는분들 추천)

https://youtu.be/hk7Xaf4Kly0?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 번외편 : 메뉴 키보드 이벤트 제이쿼리(Tab키 이동)

https://youtu.be/Ru-RAlN9AfA?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

크몽)웹디자인기능사 번외편 : 탭메뉴 종결(HTML+CSS+JQuery) 적극추천!

https://youtu.be/rHypPptinpo?list=PLqUdVJG04WRYVhZLozfTTxfcZi1IRWnkk

웹디자인 기능사 실기(01) - 유형분석

https://youtu.be/HumE5MKDTKQ?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(02) - vs code 설치 및 설정

https://youtu.be/ugq9Lox_56Y?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(03) - 기술적 준수사항

https://youtu.be/KDRwY1a8ims?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(04) - 포토샵 필수 핵심 - crop, type tool, 파일 저장

https://youtu.be/37UZuAS8Oqw?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(05) - 포토샵 필수 핵심 - 무채색 변경하기, 레이어스타일

https://youtu.be/lKfhG4B4THQ?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(06) - HTML 핵심 - 문서구조, 특수문자, 유효성검사, 섹셔닝

https://youtu.be/j7sR_51V0QU?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(07) - HTML 핵심 - 제목과 문단, 텍스트, 목록태그, 앵커, 이미지

https://youtu.be/QtXtMytLXWA?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(08) - CSS 핵심 - 스타일 적용방법, 색상, 단위

https://youtu.be/cgi8PKl5WsM?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(09) - CSS 핵심 - 선택자, 선택자 우선순위

https://youtu.be/EgOzmzJKCt4?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(10) - CSS 핵심 - 폰트, 정렬, 밑줄, 두께, 폰트 스타일

https://youtu.be/5w_N6VBF-Wc?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

디자인 기능사 실기(11) - CSS 핵심 - 박스모델, 크기가 만들어지는 방식이해하기

https://youtu.be/4O9NIrARseA?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(12) - CSS 핵심 - 플롯으로 요소 배치하기 정석.

https://youtu.be/EB-233egERw?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(13) - CSS 핵심 - 포지션 5가지 한번에 정리!

https://youtu.be/qjBpOlp1als?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(14) - CSS 핵심 - flex속성 모두 살펴보기

https://youtu.be/laaS8-K3FZk?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(15) - javascript 핵심 - 표현식, 문장, 주석, 스크립트 실행방법3가지

https://youtu.be/PCH1uy71-bQ?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(16) - javascript 핵심 - 함수의 구조, 전역변수, 지역변수

https://youtu.be/U513mo0OX68?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(17) - javascript 핵심 - 연산자, 조건문, 반복문, 타이머, 수학연산

https://youtu.be/7pJuqlPdLT0?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(18) - jQuery - javascript 비교, 스타일변경하기

https://youtu.be/CWs8I4cbrao?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(19) - jQuery 핵심 - event, animate

https://youtu.be/dAtSwbOPNlI?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(20) - 와이어프레임 , 가로유형

https://youtu.be/g3ShIq2QJjc?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(21) - 와이어프레임, 세로유형(C형)

https://youtu.be/bywlRwhUwz0?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(22) - 와이어프레임, 반응형 D1유형

https://youtu.be/4inEcCc7bzg?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(23) - 와이어프레임 - D2 유형

https://youtu.be/EkY6lBBpTgc?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(24) - 와이어프레임 - D3 유형

https://youtu.be/1krXky3HYck?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

디자인 기능사 실기(25) - 와이어프레임 - D4 유형

https://youtu.be/nafpdUZ0-WI?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(26) - 와이어프레임 - E1 유형

https://youtu.be/wkQs76gWATQ?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

디자인 기능사 실기(27) - 와이어프레임 - E2 유형

https://youtu.be/pjBZQj6qPgE?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(28) - 와이어프레임 - E3 유형, flex 활용

https://youtu.be/2EQiSROiBeA?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(29) - 와이어프레임 - E4 유형, flex 활용

https://youtu.be/CQujPDQCsi8?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(30) - 네비게이션 가로고정형, Script 축약하기

https://youtu.be/ol4H3eqcuH8?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(31) - 네비게이션 가로고정형, 가로 메뉴형, 가로 전체형

https://youtu.be/q7yeVPohOIA?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(32) - 네비게이션 세로낱개형, 아코디언형 애니메이션

https://youtu.be/Q9jyEBmLO0U?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(33) - 좌우 슬라이드1형, 좌우 슬라이드2형

https://youtu.be/POdA-MUb2u4?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(34) - 상하 슬라이드, fadein & out 슬라이드

https://youtu.be/MmLjUUeDxVI?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(35) - 탭, Tab, 내부 링크방식

https://youtu.be/nyjgxtBFqP0?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(36) - 탭, Tab, 서브메뉴 방식

https://youtu.be/k-oJhJbZch8?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(37) - 레이어 팝업, 모달 레이어 팝업

https://youtu.be/VKXampVM9J8?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(38) - 기출유형 (은빛억새축제), html 구조, 와이어프레임

https://youtu.be/Jmc8C5oESBE?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(39) - 기출유형 (은빛억새축제), 로고 이미지 제작, HTML 작성

https://youtu.be/LQIyBRhwvzM?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(40) - 기출유형 (은빛억새축제) CSS-메뉴,슬라이드,탭, 푸터

https://youtu.be/yTBURtgb08Q?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

디자인 기능사 실기(41) - 기출유형 (은빛억새축제) Script-메뉴,슬라이드,탭, 팝업

https://youtu.be/OwMeCSB0fAQ?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(42) - 기출유형 (조은은행) 와이어프레임, 로고

https://youtu.be/EzhTEUgZuCU?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(43) - 기출유형 (조은은행) HEADER-전체 드롭다운 메뉴

https://youtu.be/LdL59i7Bsr8?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(44) - 기출유형 (조은은행) 좌우 이동 슬라이드, 팝업 script

https://youtu.be/5Dt0xeDMRRs?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(45) - 기출유형 3 (WD 중공업) 유형분석 및 와이어프레임

https://youtu.be/0m_u_W5bdXg?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(46) - 기출유형 3 (WD 중공업 로고, 영역별 HTML

https://youtu.be/oGkSSBmr4e4?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(47) - 기출유형 3 (WD 중공업) 로고, 영역별 CSS, Script

https://youtu.be/FZqTrBbGDwE?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(48) - 기출유형 D1 반응형, HTML, 와이어프레임

https://youtu.be/ZkU--XTlUqM?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(49) - 기출유형 D1 반응형, 영역별 html, header, menu, slide, tab, footer

https://youtu.be/lvEu80Sk0x8?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(50) - 기출유형 D1 반응형, 영역별 CSS, header, menu, slide, tab, footer

https://youtu.be/wSGa2rVVG_k?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(51) - 기출유형 D1 반응형, 영역별 script, 메뉴, 슬라이드쇼, 탭, 팝업

https://youtu.be/s9-z1CcCvG0?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(52) - 기출유형 D4 반응형 - HTML, 와이어프레임

https://youtu.be/y03Z2vRAd18?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(53) - 기출유형 D4 반응형, 영역별 html, header, menu, slide, footer

https://youtu.be/S5kY23VHqO4?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(54) - 기출유형 D4 반응형, 영역별 CSS, header, menu, slide, footer

https://youtu.be/nweWG-8cL9w?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

웹디자인 기능사 실기(55) - 기출유형 D4 반응형, 영역별 Script, header, menu, slide, footer

https://youtu.be/HPrwLWVGtaU?list=PL-qMANrofLytVdlLHR4JeRs3mtT0o9DYH

메뉴 좌측이 풀로 펼쳐짐, 하단에 로그인/회원가입 버튼, 상단 우측 퀵 메뉴, 고정 넓이가 아닌 점

반응형 넓이의 경우 calc() 속성 사용

https://webstoryboy.co.kr/category/Tutorial/WebD

*** 시험 주의사항
1. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, 버튼, 바로가기 등)는 임시 링크(예: #)를 적용하고 tab키로 이동할 수 있어야 한다. (감점요인)
2. 모든 이미지에는 이미지에 대한 대체 텍스트 표기한다. alt 속성이 있어야 한다. (감점요인)
3. 폴더 용량은 5MB를 넘으면 안된다. (용량이 넘으면 제출 못 함)
4. 나머지 다 구현해도 슬라이드 구현 못 하면 실격 처리
5. 메인 페이지는 반드시 최상위 폴더에 index.html로 만들어야 한다.
6. html, css는 charset utf-8로 제작해야 한다.
 - css는 @charset "UTF-8"; 최상단에 추가해주기
7. 웹 표준 준수하기 (main, header, footer, section, article 등)
 - section, article 태그는 h1~h6 제목 태그를 포함해야 한다. (W3C validator에서 에러 남 - 감점요인)
8. 실격기준
 - 완성도가 20%미만 / 슬라이드 이미지가 움직이지 않을 때 / 파일 압축했을 때 / 파일 크기 5MB 초과한 경우

"슬라이드 > 메뉴 > 탭 메뉴 > 팝업" 순으로 공부함

* 볼펜 챙겨가기
* 포토샵 이미지 웹 용으로 내보내기, grayscale 변경하는 단축키 또는 메뉴 위치 알고 가기
* 웹스토리보이, TV율희
* (웹디자인 실기예제 사이트) http://webdesignmilk.com/
* (올 뉴 30분 요약강좌(CSS) - 2022년까지 업데이트) 
   https://www.youtube.com/watch?v=_PeEALPPauk&list=LL&index=7
* (웹디자인 기능사 실기 시험 전에 보면 좋은 지시서 요점정리) https://ninefloor.tistory.com/56
* https://blog.naver.com/153mmm/223153549890
* https://fay-story.com/entry/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8-%EA%B8%B0%EB%8A%A5%EC%82%AC-%EC%8B%A4%EA%B8%B0-%EB%8F%85%ED%95%99-%ED%9B%84%EA%B8%B0-%EC%9B%B9%EB%94%94-%EC%8B%A4%EA%B8%B0-%EC%A4%80%EB%B9%84-%EB%B0%A9%EB%B2%95%EA%B3%BC-%ED%9C%98%EA%B2%BD%EB%8F%99-%EC%8B%9C%ED%97%98%EC%9E%A5-%ED%9B%84%EA%B8%B0
* https://mongooz.co.kr/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8%EA%B8%B0%EB%8A%A5%EC%82%AC-%EB%8F%85%ED%95%99-%ED%95%A9%EA%B2%A9-%ED%9B%84%EA%B8%B0/
* https://blog.naver.com/gmlwjddl2582/222857430418
* https://blog.naver.com/easysun0805/222773359854
* https://blog.naver.com/mtme_/223274854880

*** 웹디자인 기능사 실기, 공부 Tip.

(1) 공부순서
가. 기출문제 풀이 유튜브 보며 타이핑한다. (A~E 각 1개씩)
나. script를 자꾸 보면서 html, css, js 구조 파악한다.
다. 기출문제 유형을 파악한다.
라. 레이아웃/슬라이드/메뉴/팝업 모르는 부분은 반복해서 연습한다.
마. 실제 시험 치는 것처럼 모의시험 본다.

(2) 오류찾기
스스로 오류를 찾아낼 수 있어야 한다.

(3) 디자인
디자인보다는 코딩이 중점인 시험이지만, 감점 요소가 될 수 있기에 미리 디자인을 머릿속으로 그려놓고 가는게 좋다.
평소 잘 된 홈페이지를 보거나, 이미 만들어진 문제의 디자인을 미리 참고하면 된다.
지디웹 사이트와 구글에 웹디자인기능사를 검색하면 나오는 이미지를 참고했다.
포토샵 일러스트는 간단한 작업이지만 전혀 할 줄 모르면 문제가 된다. 꼭 필요한 부분은 연습해야 한다.

(4)시간분배
시험시간은 총 4시간. 1시간 디자인, 2시간30분 코딩, 30분 검수

(5)웹디자인 기능사 실기, 시험 당일
8시 30분에 신분증 확인 후 비번호를 뽑고 전자기기를 제출한다.
비번호에 맞는 자리에 가서 앉고 감독관 지시에 따라 비번호를 입력하면, 9시에 시험이 시작된다.

자신의 비번호로 된 폴더와 수험자제공파일 폴더가 생성되어 있다.
수험자제공파일에는 header, slide, contents, footer 각각의 폴더에 이미지와 테스트가 있다.
이미지들이 많이 커서 포토샵에서 이미지 사이즈를 줄인 다음 디자인하여 불러왔다.
contents 폴더에는 많은 아이콘들이 있다. 내용에 맞게 선택하여 디자인에 이용하면 된다.
생각보다 친절하게 제공 파일이 제공되어서 수월했다. (로고도 jpg, ai 파일 모두 준비되어 있다.)

운이 좋게도 가장 쉬운 문제인 A-4 유진건설 문제가 나왔다.
html, css를 차례차례 정리하고, 마지막으로 js 메뉴 팝업까지는 잘했는데,
슬라이드가 작동하지 않아서 당황했다. 침착하게 슬라이드 부분을 다시 작성해서 정상적으로 작동되었다.
슬라이드가 실행이 안되면 실격이기 때문에 슬라이드 부분은 정말 침착하게 작성했고, 꼼꼼히 공부해야 한다.
슬라이드 3가지 유형 중 한 가지만이라도 완벽하게 숙지하여 친다면, 실격은 막을 수 있을 것 같다.

.index 파일을 크롬으로 열어 놓고 새로고침 해가며 확인하면 된다.
마지막으로 5MB가 넘는지 확인 한 후에 제출 버튼을 누르기만 하면 제출이 완료된다.

시험지에 jQuery 슬라이드, 탭 가장 안외워지는 부분을 펜으로 먼저 적어놓고, Visual studio code로 적었다.

로고, 메뉴, 이미지슬라이드를 css까지 끝냈다면 이 때 jQuery를 연결하여 미리 적어 놓은 기능들이 잘 실행되는지 확인한다.
혹 여기서 제대로 안된다면 최대한 이미지 슬라이드만 잘 움직이게 하고 넘어가서 일단 완성하는 것이 좋다.

그리고 유효성 검사를 하고 크롬과 마이크로엣지에서 잘 구현되는지 확인 한번씩 더 확인하고 마지막으로 폴더 용량 확인하고 나온다.

[웹디자인 기능사 실기] 인강, 책 없이 독학 5일만에 합격/ 실기 원서접수/ 공부Tip, 참고자료/ Vscode 사용가능/ 충북국가자격시험장 정보

https://blog.naver.com/nayoung4089/222514710926

웹디자인기능사실기 독학

https://hday11.tistory.com/54

------------------------------------------------------------------------------------------------------------------------------------------------------------

https://www.youtube.com/@leeminiT

https://www.youtube.com/watch?v=vt-ApE3u33c&list=PL6i7rGeEmTvq0GUcB4DJMrHv00qFmJcjd

https://www.youtube.com/@Ezweb

https://www.youtube.com/watch?v=ywko8lxhKt0

https://www.youtube.com/watch?v=s6Z4bUpsXog&list=PLdwQP35_Nz9cBsOMdiefuk3QnUGSEvsUH

https://www.youtube.com/watch?v=jeqcMiJuLyM&list=PLv_UUi9AVBVuuHVun1dp6Qp8bTAfuvrND

https://www.youtube.com/watch?v=_X_er4B4E08

------------------------------------------------------------------------------------------------------------------------------------------------------------

1. 그리드 레이아웃
 - 반응형 웹 디자인에서 웹 문서 요소를 배치하는 기준
 - 웹 사이트 화면을 여러 개의 컬럼으로 나눈 후 웹 요소를 배치
 - 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있음

2. 그리드 레이아웃의 특징
 - 시각적으로 안정된 디자인
 - 업데이트가 편한 웹 디자인 구성
 - 요소를 자유롭게 배치

3. 그리드 레이아웃을 만드는 방법
 1) 플렉스 박스 레이아웃(플렉서블 박스 레이아웃)
  - 수평 방향이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치
  - 여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있음

 2) CSS 그리드 레이아웃
 - 최근에 등장한 CSS표준
 - 수평 방향이나 수직 방향 어디로든 배치 가능
 - 마치 레고 블록을 끼워 맞추듯 요소를 배치할 수 있음

4. Flexbox 관련 사이트

http://flexboxfroggy.com/#ko
http://www.flexboxdefense.com

5. CSS Grid Layout Module Level 1

URL : w3.org/TR/css-grid-1