반응형


크몽)웹디자인기능사 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

반응형
반응형

 *grid 관련 속성들

grid-template-columns
grid-template-rows
gap(grid-gap)
트랙 관련 함수
 - repeate() : 반복되는 값을 자동으로 처리할 수 있는 함수
 - minmax() : 최소값, 최대값을 각각 지정할 수 있는 함수
 - auto-fill & auto-fit : 반응형을 고려해 사용할 수 있는 키워드들(함수X)


grid-column & row
grid-template-areas
grid-area
align-items
align-self
justify-items
justify-self
align-content
justify-content

반응형

'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글

CSS FLEX  (0) 2024.04.29
다양한 CSS 선택자  (1) 2024.04.28
input 태크 readonly, required  (0) 2024.04.24
CSS 속성 선택자  (0) 2024.04.24
CSS, 테두리 스타일을 지정하는 border-style 속성  (0) 2024.04.21
반응형


웹디자인 기능사 실기(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

 

반응형