필터
-
![[웹컨텐츠제작꿀팁] #4 로그인창 이렇게 써라! - HTMLCSS중급강좌](https://i.ytimg.com/vi/rIOQoh_cajw/mqdefault.jpg)
[웹컨텐츠제작꿀팁] #4 로그인창 이렇게 써라! - HTMLCSS중급강좌
이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
네번째로 로그인창을 코딩하는 법을 보도록 하겠습니다.
=========================================================
◈ 영상 목차
1. 웹표준에 맞는 폼태그 작성 - 00:44
2. 웹표준/접근성에 맞는 폼스타일 작성 - 06:14
=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256
==================================================
◈ 블로그 - #4 로그인창 이렇게 써라!
https://ossam5.tistory.com/261
============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.
◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/
#HTMLCSS강좌 #로그인제작 #웹컨텐츠제작 -
![[웹컨텐츠제작꿀팁] #3 체크박스 모양변경, 이렇게 써라! - HTMLCSS중급강좌](https://i.ytimg.com/vi/zaW5D-h6eP4/mqdefault.jpg)
[웹컨텐츠제작꿀팁] #3 체크박스 모양변경, 이렇게 써라! - HTMLCSS중급강좌
이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
세번째로 체크박스 모양변경을 코딩하는 법을 보도록 하겠습니다.
=========================================================
◈ 영상 목차
1. CSS 특수문자 사용 - 01:26
2. 배경이미지 사용 - 10:05
=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256
==================================================
◈ 블로그 - #3 체크박스 모양변경, 이렇게 써라
https://ossam5.tistory.com/260
============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.
◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/
#HTMLCSS강좌 #CSS체크박스모양변경 #체크박스변경 -
![[웹컨텐츠제작꿀팁] #2 텍스트네비게이션 이렇게 써라 - HTMLCSS중급강좌](https://i.ytimg.com/vi/bvz6jwZxxZU/mqdefault.jpg)
[웹컨텐츠제작꿀팁] #2 텍스트네비게이션 이렇게 써라 - HTMLCSS중급강좌
이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
두번째로 텍스트 네비게이션을 코딩하는 법을 보도록 하겠습니다.
=========================================================
◈ 영상 목차
1. 글자 사이 선처리 border속성 - 01:15
2. 글자 사이 선처리 :after선택자 - 07:19
3. 네비게이션이 부모영역 왼쪽에 있는 경우 - 10:05
4. 네비게이션이 부모영역 오른쪽에 있는 경우 - 12:08
5. 네비게이션이 부모영역 가운데에 있는 경우 - 13:33
6. 로고가운데 있고, 양쪽으로 네비게이션 있는 경우 - 16:24
=========================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256
==================================================
◈ 블로그 - #2 텍스트네비게이션 이렇게 써라
https://ossam5.tistory.com/259
============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.
◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/
#HTMLCSS강좌 #텍스트네비게이션만들기 #텍스트수평나열처리 -
![[웹컨텐츠제작꿀팁] #1 Table 코딩 이렇게 써라 - HTMLCSS중급강좌](https://i.ytimg.com/vi/wNOGuj5uATw/mqdefault.jpg)
[웹컨텐츠제작꿀팁] #1 Table 코딩 이렇게 써라 - HTMLCSS중급강좌
이번 동영상은 실제 웹컨텐츠를 코딩해보는 영상입니다.
그 첫번째로 테이블(표)를 제작해보도록 하겠습니다.
==================================================
◈ 영상 목차
1. 테이블 HTML구조 정확하게 짜기 - 00:57
2. CSS로 스타일 맞추기 - 07:14
==================================================
◈ 완성파일 및 소스 주소
URL : https://ossam5.tistory.com/256
==================================================
◈ 블로그 - #1 Table 코딩 이렇게 써라
URL : https://ossam5.tistory.com/257
==================================================
◈ 웹표준 검사기
HTML마크업검사기 URL : http://validator.kldp.org/
CSS스타일검사기 URL : http://css-validator.kldp.org/
============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.
◈ 오프닝음악 출처
Stay Positive by FSM Team | artist.fsm-team.html
Music promoted by https://www.mewpot.com
CC BY 4.0 | https://creativecommons.org/licenses/by/4.0/
#HTMLCSS강좌 #table만들기 #표만들기 -
웹디자인기능사 수험생 실수 TOP5 (with CLOVA Dubbing)
시험 보실때 자주 실수하는 것을 정리해보았습니다.
구독자님의 요청도 있었고, 합격 확률을 더 높여보려 제작했습니다.
모두 좋은 결과 있길 바랍니다😊
==========================================================
◈ 영상 목차
1. TOP01 - 00:55
2. TOP02 - 01:21
3. TOP03 - 02:30
4. TOP05 - 03:24
5. TOP06 - 03:57
#웹디자인기능사 #웹디자인기능사실기 #웹디실기 -
웹디자인기능사 - 기초학습능력05 - jQuery 기초코딩편 (with CLOVA Dubbing)
웹디자인기능사에 필요한 제이쿼리 기능만 쏙~ 모았습니다.
설명을 쉽게 하려고 많이 노력했습니다.
제이쿼리가 아무래도 웹디자인기능사를 따는데 제일 난관에 부딪히는 부분이다보니 영상이 길어졌네요:)
열심히 공부해보세요!!!
** 수업에서 나온 예제 다운 받기
https://ossam5.tistory.com/113
===================================================================
◈ 영상 목차
1. 제이쿼리 문서연결과 기본문법 - 00:50
2. 문서객체선택 - 02:40
3.이벤트 - 03:35
4. 문서객체메서드 - 06:50
5. 문서객체필터메서드 - 09:40
6. 문서객체시각효과메서드 - 11:40
7. 애니메이트메서드 - 14:40
8. setInterval메서드 - 17:20
9. 변수와 if문 - 19:00
=================================================================
◈ 영상오류 수정
1. 9:43 초쯤 제이쿼리 코드 오류가 있습니다.
$('h1').css('color','red'); 를 $('h2').css('color','red'); 수정해야 합니다.
2. 17:10초쯤 제이쿼리 코드의 16번부터 28번줄은 오류가 있습니다
//왼쪽으로 움직이기
$('.left').click(function(){
$('p').animate({
left: '-=20px' //왼쪽으로 20px씩 이동
},200);
});
//오른쪽으로 움직이기
$('.right').click(function(){
$('p').animate({
left: '+=20px' //오른쪽으로 20px씩 이동
},200);
});
#웹디자인기능사 #웹디자인기능사실기 #웹디실기 -
웹디자인기능사 - 기초학습능력04 - CSS 기초코딩편 (with CLOVA Dubbing)
웹디자인 기능사를 볼때 필요한 CSS속성만 집중해서 강의했습니다.
CSS 예쁘게 꾸미지 않아도 자격증을 취득할 수 있습니다.
** 수업에서 나온 예제 다운 받기
https://ossam5.tistory.com/113
===================================================================
◈ 영상 목차
1. 영역잡기 - 00:36
2. 폰트설정 - 06:07
3. 위치지정 - 09:20
4. hover상태 - 15:12
5. 기타속성 - 16:41
6. 니가스터디 테스트 - 17:13
==================================================================
◈ 오류 수정
1. 02:52 초쯤 margin철자가 maring으로 써있네요~ 여백은 margin입니다.
#웹디자인기능사 #웹디자인기능사실기 #웹디실기 -
웹디자인기능사 - 기초학습능력03 - HTML기초코딩편 (with CLOVA Dubbing)
웹디자인기능사의 기초학습능력 세번째편, HTML기초코딩편입니다.
8가지 태그만 외우면 되는 빠르고 쉬운 강의입니다.
영상에서 작업한 결과파일은 https://ossam5.tistory.com/113
제 티스토리 블로그에 올려놨습니다. 제 블로그에는 벌써 실기 기출문제풀이가 있습니다. 자격증을 취득하시는데 많은 도움 되세요.
작업파일 경로 : https://ossam5.tistory.com/113
===================================================================
◈ 영상 목차
1. 텍스트태그 h태그 - 00:51
2. 텍스트태그 p태그 - 01:17
3. 텍스트태그 br태그 - 01:35
4. 텍스트태그 ul태그 - 01:45
5. 구역태그 div태그 - 03:52
6. 링크태그 a태그 - 06:30
7. 이미지태그 img태그 - 07:14
8. 선택상자 select태그 - 09:21
9. 니가스터디 테스트 - 10:48
#웹디자인기능사 #웹디자인기능사실기 #웹디실기 -
웹디자인기능사 - 기초학습능력06 - VS CODE사용법
이제 브라켓의 시대는 갔습니다.
VS CODE로 시험을 대비해봅시다!
=========================================================
◈ 영상 목차
1. VSCODE설치 - 01:38
2. Emmet사용 - 07:18
2. 단축키 - 14:00
============================================================
◈ VS CODE 다운 사이트
https://code.visualstudio.com/
============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스, pixabay에서 가져온 무료 컨텐츠입니다.
#웹디자인기능사 #웹디자인기능사실기 #웹디실기 -
웹디자인기능사 - 기초학습능력02 - 브라켓편 (with CLOVA Dubbing)
웹디자인기능사에서 코딩을 할때 필요한 브라켓에 대한 영상입니다.
웹디자인기능사에서 사용되는 코딩에디터 브라켓공부 15분이면 완성!
- 영상에 첨부된 링크
1. 큐넷웹디자인기능사공개자료실 : https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&gId=&artlSeq=5199079&brdId=Q006&code=1204
2. 브라켓 홈페이지 : http://brackets.io/
=========================================================================
- 브라켓 단축키
1. 새문서 만들기 : [Ctrl] + [n]
2. 저장 : [Ctrl] + [s]
3. 다른 이름으로 저장 : [Ctrl] + [Shift] + [s]
4. 실시간 미리보기 : [Ctrl] + [Alt] + [p]
5. 툴팁다시보기 : [Ctrl] + [Spacebar]
6. 주석처리 : [Ctrl] + [Shift] + [/]
7. 행복사 : [Ctrl] + [d]
8. Emmet : [Tab]
9. 행으로 수정 : [Alt] + [드래그]
===================================================================
◈ 영상 목차
1. 브라켓설치 - 01:05
2. Emmet사용 - 01:54
2. 단축키 - 03:00
3. 코드작성 - 03:50
4. 시험장에 Emmet이 없는 경우 대처 - 10:12
5. 니가스터디 테스트 - 13:29
#웹디자인기능사 #웹디자인기능사실기 #웹디실기 -
웹디자인기능사 - 기초학습능력01 - 포토샵기능 (with CLOVA Dubbing)
웹디자인기능사에서 꼭 사용해야할 필수 포토샵 기능만 담았습니다.
웹디자인기능사에서 사용되는 포토샵 기능 13분이면 완성!
ㅜㅠ 처음으로 만든 영상이다보니 마지막 쯤
니가스터디 테스트의 문제들의 ④번들이 전부 ③번으로 되어 있네요.
마지막은 전부 ④번입니다. 잘보시고 풀어주세요.
===================================================================
◈ 영상 목차
1. 포토샵 파일 제작 - 00:43
2. 포토샵 웹이미지 저장 - 02:25
2. 사진불러오기 - 04:10
3. 크기 변형 - 04:53
4. 포토샵 글자 제작 - 06:45
5. 글자에 그림자 넣기 - 08:13
6. 커스텀쉐입 - 10:22
7. 니가스터디 테스트 - 12:12
#웹디자인기능사 #웹디자인기능사실기 #웹디실기 -
웹디자인기능사인트로영상 (with CLOVA Dubbing)
웹디자인기능사 실기를 강의하기 전,
어떻게 하면 쉽게 취득할 수 있는지 설명한 영상입니다. -
![DESIGN 35 [ Photoshop #8 ] 웹디자인을 위한 포토샵 기초 #8. 마스크적용하기 - 레이어 마스크, 클리핑 마스크](https://i.ytimg.com/vi/nKvbU36aAUI/mqdefault.jpg)
DESIGN 35 [ Photoshop #8 ] 웹디자인을 위한 포토샵 기초 #8. 마스크적용하기 - 레이어 마스크, 클리핑 마스크
웹디자인을 위한 포토샵 기초 #8
- Layer Mask
- Clipping Mask
- smart object
- select transform
#webdesign #photoshop #mask
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/ -
![DESIGN 34 [ Photoshop #7 ] 웹디자인을 위한 포토샵 기초 #7. 툴박스 - type tool -타이포그래피 CSS 구현 가능한 것과 불가능한 것](https://i.ytimg.com/vi/xpazoO0Aklo/mqdefault.jpg)
DESIGN 34 [ Photoshop #7 ] 웹디자인을 위한 포토샵 기초 #7. 툴박스 - type tool -타이포그래피 CSS 구현 가능한 것과 불가능한 것
웹디자인을 위한 포토샵 기초 #6
- 글씨 디자인 Do! vs. Don't
- CSS 구현 가능한 것과 불가능한 것
- type on a path
#webdesign #photoshop #typetool
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/ -
![DESIGN 33 [ Photoshop #6 ] 웹디자인을 위한 포토샵 기초 #6. 툴박스 - pen tool -직선, 곡선, 다각형, 누끼작업하기](https://i.ytimg.com/vi/nH4ahX4b-zQ/mqdefault.jpg)
DESIGN 33 [ Photoshop #6 ] 웹디자인을 위한 포토샵 기초 #6. 툴박스 - pen tool -직선, 곡선, 다각형, 누끼작업하기
Photoshop #1부터의 예제 다운로드
https://drive.google.com/file/d/1SeeCT5UCT7PaBK6hWVmAcgwjobyXAa3g/view?usp=sharing
Photoshop #6 예제 다운로드(pen tool)
https://drive.google.com/file/d/1CTWZjcCkYCkUAdzx8MIIQBiorX9J7AO3/view?usp=sharing
웹디자인을 위한 포토샵 기초 #6
0:00 pen tool straight line
08:30 Curve line
14:02 Variable Types line
20:35 artwork
#webdesign #photoshop #pentool
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/ -
![DESIGN 32 [ Photoshop #5 ] 웹디자인을 위한 포토샵 기초 #5, 툴박스 - brush, gradient, sharpen, blur](https://i.ytimg.com/vi/_uuUx5sXHUA/mqdefault.jpg)
DESIGN 32 [ Photoshop #5 ] 웹디자인을 위한 포토샵 기초 #5, 툴박스 - brush, gradient, sharpen, blur
예제 다운로드
https://drive.google.com/file/d/1SeeCT5UCT7PaBK6hWVmAcgwjobyXAa3g/view?usp=sharing
0:00 brush
8:34 brusheezy add brush preset
15:29 history brush
16:25 erase tool
18:16 gradient tool
38:40 shapen, blur
웹디자인을 위한 포토샵 기초 #5
- brush, 다운로드 설치하기
- Gradient Tool
- sharpen, blur, smudge
- dodge, burnk
#webdesign #photoshop
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
