e-비즈니스 전략 수립 -...
TRANSCRIPT
![Page 1: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/1.jpg)
HTML5 웹 프로그래밍 입문 (개정판)
프로젝트 : 핀터레스트 스타일의 웹 페이지 제작
![Page 2: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/2.jpg)
2/33
Contents
학습목표 지금까지 배운 모든 내용을 활용해 웹 페이지를 만들 수 있습니다.
내용 기본 레이아웃 구성
스타일시트 적용
자바스크립트
![Page 3: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/3.jpg)
3/33
예제 소스 chapter_14-시작 폴더에 있는 파일 사용
• pinterest_start.html
1. 기본 레이아웃 구성
![Page 4: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/4.jpg)
4/33
1. 기본 레이아웃 구성
![Page 5: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/5.jpg)
5/33
1. 기본 레이아웃 구성
![Page 6: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/6.jpg)
6/33
1. 기본 레이아웃 구성
![Page 7: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/7.jpg)
7/33
1. 기본 레이아웃 구성
![Page 8: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/8.jpg)
8/33
1. 기본 레이아웃 구성
![Page 9: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/9.jpg)
9/33
1. 기본 레이아웃 구성
![Page 10: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/10.jpg)
10/33
1. 기본 레이아웃 구성
![Page 11: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/11.jpg)
11/33
초기화 [코드 14-2]의 요소를 초기화
2. 스타일시트 적용
![Page 12: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/12.jpg)
12/33
헤더 구성
2. 스타일시트 적용
![Page 13: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/13.jpg)
13/33
풀다운 메뉴 구성 스타일시트에서는 스타일만 적용하고, 자바스크립트에서는 보이거나 보이
지 않게 동작을 설정
2. 스타일시트 적용
![Page 14: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/14.jpg)
14/33
2. 스타일시트 적용
![Page 15: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/15.jpg)
15/33
내비게이션 구성 li 태그를 inline 방식으로 지정하고 textalign속성을 부여해서 중앙에 정렬
2. 스타일시트 적용
![Page 16: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/16.jpg)
16/33
2. 스타일시트 적용
![Page 17: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/17.jpg)
17/33
2. 스타일시트 적용
![Page 18: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/18.jpg)
18/33
2. 스타일시트 적용
![Page 19: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/19.jpg)
19/33
웹 페이지 구성 masonry 플러그인을 사용하므로 웹 페이지의 너비를 정확하게 입력함
2. 스타일시트 적용
![Page 20: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/20.jpg)
20/33
2. 스타일시트 적용
![Page 21: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/21.jpg)
21/33
2. 스타일시트 적용
![Page 22: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/22.jpg)
22/33
2. 스타일시트 적용
![Page 23: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/23.jpg)
23/33
2. 스타일시트 적용
![Page 24: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/24.jpg)
24/33
라이트박스 구성 #darken-background 태그와 #lightbox 태그 설정
2. 스타일시트 적용
![Page 25: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/25.jpg)
25/33
2. 스타일시트 적용
![Page 26: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/26.jpg)
26/33
2. 스타일시트 적용
![Page 27: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/27.jpg)
27/33
모듈별로 나누어 설명하기 위해 script 태그를 세 부분으로 구성
3. 자바스크립트
![Page 28: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/28.jpg)
28/33
풀다운 메뉴 구성• .outermenu태그에 hover( ) 메소드를 적용, 각 상황에 맞게 display 속성을 변경
3. 자바스크립트
![Page 29: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/29.jpg)
29/33
페이지 구성• jQuery Image Loaded 플러그인을 사용해 이미지를 모두 불러온 후 masonry
플러그인을 실행
3. 자바스크립트
![Page 30: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/30.jpg)
30/33
라이트박스 구성• #lightbox 태그는 #darken-background 태그 위에 있어서 #lightbox 태그를 클릭
하면 #darkenbackground태그도 클릭됨.
• 즉, 이벤트 전파를 막으려면 위쪽에 위치하는 태그의 이벤트 객체에서
stopPropagation ( ) 메소드를 호출 해줌
3. 자바스크립트
![Page 31: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/31.jpg)
31/33
3. 자바스크립트
![Page 32: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/32.jpg)
32/33
3. 자바스크립트
![Page 33: e-비즈니스 전략 수립 - Kangwoncs.kangwon.ac.kr/~parkce/course/2017_spring_Web_internet... · 2017. 3. 1. · 3/33 예제소스chapter_14-시작폴더에있는파일사용](https://reader033.vdocuments.net/reader033/viewer/2022051902/5ff170836d57202f7c295e7c/html5/thumbnails/33.jpg)
Thank You