기본예제: https://goo.gl/QMGPgR
[ 고급 슬라이드구현하기 파트 1/4 ]
- HTML,CSS 작성하기
- 슬라이드 구조작성하기
- CSS 스타일 설정하기
- FLEX, POSITION
노트패드에 젠코딩 설치하기 링크 추가
https://youtu.be/JAWDbgoL-MY
스프라이트 이미지 위치 잡기 링크 추가
https://youtu.be/n98axuhWWrU
플렉스로 위치 잡기 영사 링크 추가
https://youtu.be/_PSy66fkQ7U
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#jquery, #slideshow, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
Sample Download: https://goo.gl/gFf9vE
- Normalize CSS
- Modernizr
- setInterval
- fadeIn, fadeOut
- eq
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#jquery, #slideshow, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
Sample Download: https://goo.gl/A2nWDM
- Class 관련 메서드
- toggleClass
- Attr
- cubic bezier
- jQuery 성능향상
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#jquery, #toggleClass, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
Sample Download: https://goo.gl/ZBCqYY
jQuery 응용
- javascript & jquery 비교
- each 메서드
- animate 메서드
- find, filter
Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb
#jquery, #each, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
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 |