Part 1 Download : https://drive.google.com/file/d/1CqbyhFRd5K6eyQD0iNxGOn9rM_6IIEwW/view?usp=sharing
- 포토샵 참조 html 구조 작성하기
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
#scroll animation, #psdtohtml, #jquery, #scroll, #프론트엔드
Blog : http://alikerock.tistory.com/
Twitter : #eztoweb
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
Sample Download: https://goo.gl/DsFqnE
반응형 css 작성하기
- px기반을 플렉스 기반으로 변경하기
- 부트스트랩 그리드 활용하기
- 미디어 쿼리 작성하기
Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb
part10 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part10 완성본 : https://goo.gl/NBgUQH
서브페이지 CSS
- 헤더, 푸터를 유지하며 css 작성하기
- 배경, 제목, 링크 연결하기
Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb
part9 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part9 완성본 : https://goo.gl/PkDFEb
서브페이지 만들기
- 헤더, 푸터를 유지하며 콘텐츠 생성하기
- 이후 CMS를 고려하여 코딩하기
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
subpage, gnuboard, cms
| PSD TO HTML 12 [ proweb ] - px버전 사이트를 부트스트랩 v4 (플렉스) 활용 반응형 구현하기 (0) | 2019.04.22 |
|---|---|
| PSD TO HTML [proweb 11 css] - 서브페이지 배경, 제목, 페이지 링크 연결하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 09 css] - 푸터 스타일, 폰트어썸, 폼의 스타일 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 08 css] - 프로젝트 리스트 스타일, 플롯, 간격, 마우스오버 캡션 효과 (0) | 2019.04.22 |
| PSD TO HTML [proweb 07] - 슬라이드쇼 좌우 컨트롤 버튼, 페이저 pager 설정하기 (0) | 2019.04.22 |
part8 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part8 완성본 : https://goo.gl/DJrLW5
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
footer, fontawesome, form
| PSD TO HTML [proweb 11 css] - 서브페이지 배경, 제목, 페이지 링크 연결하기 (0) | 2019.04.22 |
|---|---|
| PSD TO HTML [proweb 10 html] - 일관성을 유지하면 서브페이지 만들기, portfolio, aboutus (0) | 2019.04.22 |
| PSD TO HTML [proweb 08 css] - 프로젝트 리스트 스타일, 플롯, 간격, 마우스오버 캡션 효과 (0) | 2019.04.22 |
| PSD TO HTML [proweb 07] - 슬라이드쇼 좌우 컨트롤 버튼, 페이저 pager 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 06] - 슬라이드쇼 타이틀, 설명, 버튼, 좌우 컨트롤 설정하기 (0) | 2019.04.22 |
part7 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part7 완성본 : https://goo.gl/32jS3v
project list style
- float, 리스트 설정
- 마우스 오버 캡션 효과
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
#project list, #hover effect, #caption, #transtion, #animation
| PSD TO HTML [proweb 10 html] - 일관성을 유지하면 서브페이지 만들기, portfolio, aboutus (0) | 2019.04.22 |
|---|---|
| PSD TO HTML [proweb 09 css] - 푸터 스타일, 폰트어썸, 폼의 스타일 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 07] - 슬라이드쇼 좌우 컨트롤 버튼, 페이저 pager 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 06] - 슬라이드쇼 타이틀, 설명, 버튼, 좌우 컨트롤 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 05] - 헤더 고정하기, 슬라이드 이미지 설정, 로고, 메뉴 설정하기 (0) | 2019.04.22 |
part6 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part6 완성본 : https://goo.gl/YPTupc
가운데 배치하기 문제 1
https://codepen.io/alikerock/pen/LzGZbg
가운데 배치하기 문제 2
https://codepen.io/alikerock/pen/dVGXdL
가운데 배치하기 문제 3
https://codepen.io/alikerock/pen/zErBwW
슬라이드쇼 css 설정하기
- 좌우 컨트롤 버튼 배치하기
- 하단 페이저 설정하기
트위터: #eztoweb
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
#cycle2, #slideshow, #pager
| PSD TO HTML [proweb 09 css] - 푸터 스타일, 폰트어썸, 폼의 스타일 설정하기 (0) | 2019.04.22 |
|---|---|
| PSD TO HTML [proweb 08 css] - 프로젝트 리스트 스타일, 플롯, 간격, 마우스오버 캡션 효과 (0) | 2019.04.22 |
| PSD TO HTML [proweb 06] - 슬라이드쇼 타이틀, 설명, 버튼, 좌우 컨트롤 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 05] - 헤더 고정하기, 슬라이드 이미지 설정, 로고, 메뉴 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 04] - css 리셋, 폰트 위계, 웹폰트 로드, 공통요소 스타일 설정하기 (0) | 2019.04.22 |
part5 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part5 완성본 : https://goo.gl/TyCrVM
슬라이드쇼 css 설정하기
- 타이틀, 배경
- 버튼 스타일
- 좌우 컨트롤 버튼
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
#cycle2, #slideshow, #controls
| PSD TO HTML [proweb 08 css] - 프로젝트 리스트 스타일, 플롯, 간격, 마우스오버 캡션 효과 (0) | 2019.04.22 |
|---|---|
| PSD TO HTML [proweb 07] - 슬라이드쇼 좌우 컨트롤 버튼, 페이저 pager 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 05] - 헤더 고정하기, 슬라이드 이미지 설정, 로고, 메뉴 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 04] - css 리셋, 폰트 위계, 웹폰트 로드, 공통요소 스타일 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 03] - 슬라이드 slideshow html 구현하기. cycle2 라이브러리 활용하기 (0) | 2019.04.22 |
part4 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part4 완성본 : https://goo.gl/nHZ48a
헤더 로고, 메뉴
- 헤더 고정하기
- 슬라이드 배경 지정하기
- 로고 배경지정
- 메뉴의 스타일 설정
-
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
| PSD TO HTML [proweb 07] - 슬라이드쇼 좌우 컨트롤 버튼, 페이저 pager 설정하기 (0) | 2019.04.22 |
|---|---|
| PSD TO HTML [proweb 06] - 슬라이드쇼 타이틀, 설명, 버튼, 좌우 컨트롤 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 04] - css 리셋, 폰트 위계, 웹폰트 로드, 공통요소 스타일 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 03] - 슬라이드 slideshow html 구현하기. cycle2 라이브러리 활용하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 02] - content, footer, fontawesome HTML 작성하기 (0) | 2019.04.22 |
part3 완료본의 예제를 다운로드하고 영상을 보면서 따라해주세요.
디자인 PSD 파일: https://goo.gl/shSB3k
part3 완성본 : https://goo.gl/dHq3xc
PSD to HTML & CSS
- css 리셋하기
- 폰트 위계설정하기
- 웹폰트 로드하기
- 공통요소 스타일 설정하기
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
모든 소스 github에서 확인할 수 있습니다.
https://github.com/alikerock/ezweb.git
#css reset, #google, #webfont
| PSD TO HTML [proweb 06] - 슬라이드쇼 타이틀, 설명, 버튼, 좌우 컨트롤 설정하기 (0) | 2019.04.22 |
|---|---|
| PSD TO HTML [proweb 05] - 헤더 고정하기, 슬라이드 이미지 설정, 로고, 메뉴 설정하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 03] - 슬라이드 slideshow html 구현하기. cycle2 라이브러리 활용하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 02] - content, footer, fontawesome HTML 작성하기 (0) | 2019.04.22 |
| PSD TO HTML [proweb 01] - header, banner HTML 구조 작성하기 (0) | 2019.04.22 |