김은옥(probemedia@gmail.com) 반응형 웹 프로젝트 김은옥(probemedia@gmail.com)

Presentation on theme: "김은옥(probemedia@gmail.com) 반응형 웹 프로젝트 김은옥(probemedia@gmail.com)"— Presentation transcript:

1 김은옥(probemedia@gmail.com)
반응형 웹 프로젝트

2 목차 목적 개요 모바일 웹 사이트의 구조 반응형 웹페이지 템플릿 얻어내기 웹 페이지 작성

3 목적 반응형 웹 사이트를 작성함으로써 학습한 HTML5, CSS3, jQuery를이해할 수 있다.

4 개요 웹 앱의 1단계로 모바일 웹을 기획 자신의 기관 모바일 웹 사이트를 작성

5 프로젝트의 구조 웹사이트(프로젝트명): oursite [WebContent] : html 파일
[WebContent]-[js]: 자바스크립트 파일 [WebContent]-[css]: CSS파일 [WebContent]-[img]: 이미지파일(png) [WebContent]-[video]: 동영상 파일 [WebContent]-[audio]: 오디오 파일

6 모바일 웹 사이트의 구조 : 메인 페이지 기관소개 뉴스/소식 고객민원 행정정보

7 반응형 웹페이지 템플릿 얻어내기 HTML5 보일러플레이트 사이트에 반응형 웹페이 지 템플릿 얻어내기(1/3)
로 이동 [Get a custom build]버튼 클릭 로 이동하면 [Responsive]항목 클릭 체크박스항목을 모두 체크하거나 기본값을 그대로 사 용하고 [Download it]버튼 클릭

8 반응형 웹페이지 템플릿 얻어내기 HTML5 보일러플레이트 사이트에 반응형 웹페이 지 템플릿 얻어내기(2/3)
다운로드 받은 initializr-verekia-4.0.zip 파일의 압 축을 해제 [initializr]폴더안의 모든 파일을 선택 후 이클립스의 [oursite]-[WebContent]에 붙여넣기 이클립스의 [oursite]-[WebContent]의 index.html 의 내용을 수정해서 사용

9 반응형 웹페이지 템플릿 얻어내기 HTML5 보일러플레이 트 사이트에 반응형 웹 페이지 템플릿 얻어내 기(3/3)
이클립스의 [oursite]- [WebContent]의 index.html 실행 index.html에서 마우스 오른쪽 버튼을 눌러 [Run As]-[Run on Server]

10 웹 페이지 작성 index.html에 유투브비디오 추가
jquery.fitvids.js파일을 [WebContent]-[js]에 추가 index.html에 코드 추가 - 1 <script src=" /jquery.min.js"></script> <script src=“js/jquery.fitvids.js"></script>

11 웹 페이지 작성 index.html에 유투브비디오 추가 index.html에 코드 추가 – 2
첫 번째 <section>태그 위에 붙여 넣기 <section> <h2>Everything Is AWESOME!!!</h2> <p> -- The LEGO® Movie -- Tegan and Sara feat. The Lonely Island</p> <iframe width="560" height="315" src="// frameborder="0" allowfullscreen></iframe> </section>

12 웹 페이지 작성 index.html에 유투브비디오 추가 index.html에 코드 추가 - 3
</head>태그 위에 다음코드 추가 <script> $(document).ready(function(){ $(".main-container").fitVids(); }); </script>

13 웹 페이지 작성 index.html에 유투브 비디오 추가 main.css에 코드 추가 - 1
[WebContent]-[css] 에서 main.css 더블클 릭 [Author's custom styles]항목 아래에 다 음코드 추가 video { max-width: 100%; height: auto; } iframe, embed, object {