김은옥(probemedia@gmail.com) 반응형 웹 프로젝트 김은옥(probemedia@gmail.com)
목차 목적 개요 모바일 웹 사이트의 구조 반응형 웹페이지 템플릿 얻어내기 웹 페이지 작성
목적 반응형 웹 사이트를 작성함으로써 학습한 HTML5, CSS3, jQuery를이해할 수 있다.
개요 웹 앱의 1단계로 모바일 웹을 기획 자신의 기관 모바일 웹 사이트를 작성
프로젝트의 구조 웹사이트(프로젝트명): oursite [WebContent] : html 파일 [WebContent]-[js]: 자바스크립트 파일 [WebContent]-[css]: CSS파일 [WebContent]-[img]: 이미지파일(png) [WebContent]-[video]: 동영상 파일 [WebContent]-[audio]: 오디오 파일
모바일 웹 사이트의 구조 : 메인 페이지 기관소개 뉴스/소식 고객민원 행정정보
반응형 웹페이지 템플릿 얻어내기 HTML5 보일러플레이트 사이트에 반응형 웹페이 지 템플릿 얻어내기(1/3) http://html5boilerplate.com/ 로 이동 [Get a custom build]버튼 클릭 http://www.initializr.com/ 로 이동하면 [Responsive]항목 클릭 체크박스항목을 모두 체크하거나 기본값을 그대로 사 용하고 [Download it]버튼 클릭
반응형 웹페이지 템플릿 얻어내기 HTML5 보일러플레이트 사이트에 반응형 웹페이 지 템플릿 얻어내기(2/3) 다운로드 받은 initializr-verekia-4.0.zip 파일의 압 축을 해제 [initializr]폴더안의 모든 파일을 선택 후 이클립스의 [oursite]-[WebContent]에 붙여넣기 이클립스의 [oursite]-[WebContent]의 index.html 의 내용을 수정해서 사용
반응형 웹페이지 템플릿 얻어내기 HTML5 보일러플레이 트 사이트에 반응형 웹 페이지 템플릿 얻어내 기(3/3) 이클립스의 [oursite]- [WebContent]의 index.html 실행 index.html에서 마우스 오른쪽 버튼을 눌러 [Run As]-[Run on Server]
웹 페이지 작성 index.html에 유투브비디오 추가 jquery.fitvids.js파일을 [WebContent]-[js]에 추가 index.html에 코드 추가 - 1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1 .10.2/jquery.min.js"></script> <script src=“js/jquery.fitvids.js"></script>
웹 페이지 작성 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="//www.youtube.com/embed/StTqXEQ2l-Y" frameborder="0" allowfullscreen></iframe> </section>
웹 페이지 작성 index.html에 유투브비디오 추가 index.html에 코드 추가 - 3 </head>태그 위에 다음코드 추가 <script> $(document).ready(function(){ $(".main-container").fitVids(); }); </script>
웹 페이지 작성 index.html에 유투브 비디오 추가 main.css에 코드 추가 - 1 [WebContent]-[css] 에서 main.css 더블클 릭 [Author's custom styles]항목 아래에 다 음코드 추가 video { max-width: 100%; height: auto; } iframe, embed, object {