Rock's Ezweb

https://youtu.be/17GHECIFiE8

Sample Download:
https://drive.google.com/file/d/1yzsWzeY-xMXYGvJmgzj4KJdx2z3bTyJD/view?usp=sharing

순수 자바스크립트(Vanilla Javascript)로 슬라이드 구현하기

PART 1
- 슬라이드쇼 CSS 작성하기
- 변수생성
- 함수생성 
- 좌우 컨트롤하기

PART 2
- 자동 슬라이드
- 페이저 자동 생성 및 이동

티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#slideshow #vanilla #javascript #autoslide

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/FgNCpeD1kQE

Hair Studio P1 Download(파트1예제에서 이어서 학습 바랍니다.)
https://drive.google.com/file/d/1KiCEw3qc-QARB3tl86t3xvHyXBRgyaNv/view?usp=sharing


- 슬라이드 구현하기(cycle2)


티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#psdtohtml #illustrator #svg

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/gWeseMSjcVM

Hair Studio P1 Download(파트1예제에서 이어서 학습 바랍니다.)
https://drive.google.com/file/d/1KiCEw3qc-QARB3tl86t3xvHyXBRgyaNv/view?usp=sharing

- SVG 폰트 변경
- 원형안에 텍스트 가두기
- 슬라이드 구현하기(cycle2)

D3plus 라이브러리
http://d3plus.org/
http://d3plus.org/js/d3.min.js
http://d3plus.org/js/d3plus.min.js

SVG Text Wrapping 매뉴얼
http://d3plus.org/examples/utilities/a39f0c3fc52804ee859a/

티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#psdtohtml #illustrator #svg

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/B9dsyFhyU9c

Hair Studio P1 Download
https://drive.google.com/file/d/1KiCEw3qc-QARB3tl86t3xvHyXBRgyaNv/view?usp=sharing

- 헤더 CSS
- 메뉴 가운데 정렬하기
- transform Skew 적용하기



티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#psdtohtml #illustrator #svg

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/PKrrLgv_eSA

Hair Studio P1 Download
https://drive.google.com/file/d/1KiCEw3qc-QARB3tl86t3xvHyXBRgyaNv/view?usp=sharing

- CSS reset
- CSS 공통요소 설정하기

https://youtu.be/TdmSdhz2mD8

Hair Studio P1 Download
https://drive.google.com/file/d/1KiCEw3qc-QARB3tl86t3xvHyXBRgyaNv/view?usp=sharing

- HTML 마크업


티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#psdtohtml #illustrator #svg

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/QhGLXwQ902k

Hair Studio P1 Download
https://drive.google.com/file/d/1KiCEw3qc-QARB3tl86t3xvHyXBRgyaNv/view?usp=sharing

- SVG 저장하기
- 웹폰트 변환하기

티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#psdtohtml #illustrator #svg

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/YMHhaLayC18

- 장애여부에 상관없이 접근할 수 있는 웹사이트 만들기

웹접근성 PDF 보기
https://drive.google.com/file/d/1e3DQyr6uK19cDRpZs10Rxl9FbEewTt7G/view?usp=sharing

#웹퍼블리셔 #웹디자인 #웹접근성 #웹표준

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/4XhUOflla64

javascript & jquery 효율적으로 작성하기 1
https://codepen.io/alikerock/pen/BbqNaZ

javascript & jquery 효율적으로 작성하기 2
https://codepen.io/alikerock/pen/gEBazE


티스토리 : http://alikerock.tistory.com/
트위터: eztoweb

#jquery #css #animation

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

https://youtu.be/6Q2DunbGyxY

Sample Download(part 1) - design 15번 예제에서 이어서 학습해주세요.
https://drive.google.com/file/d/1r4BVa_vu5hUCAvuSJQ3-0jf3Ym5R_A5f/view?usp=sharing

싱크 문제로 세세히 편집하지는 못했습니다. 감안해서 시청바랍니다.
감사합니다.
-  슬라이드 디자인하기

일러스트레이터를 이용한 디자인 파트입니다. 
디자인이 완료되면 바로 코딩 연재가 이어질 예정입니다.
영상 싱크의 문제로 프리미어 편집없이 올립니다.

#webdesign #illustrator

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165