현대고등학교 php 강의 - 6차시 (설리번 프로젝트)
TRANSCRIPT
![Page 1: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/1.jpg)
현대고 학생들과 함께 하는 웹 개발
제 6차시
한국디지털미디어고등학교13기 웹 프로그래밍과 정욱재
부트스트랩!
![Page 2: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/2.jpg)
부트스트랩
![Page 3: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/3.jpg)
부트스트랩
![Page 4: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/4.jpg)
부트스트랩
부트스트랩은 웹의 반응형/모바일 퍼스트 프로젝트를 위한
가장 많이 쓰이는 HTML, CSS, JS 프레임 워크
![Page 5: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/5.jpg)
부트스트랩
트위터 내부에서 사용되던 UI 라이브러리디자인에 익숙하지 않은 개발자들을 위해 공개
![Page 6: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/6.jpg)
부트스트랩
반응형??
디바이스의 종류에 따라 화면이 재조정되는 프로그램들을 반응형 프로그램이라고 부른다.
(정확히는 폭에 따라)
![Page 7: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/7.jpg)
부트스트랩
반응형??
네이버는 모바일이랑 데스크톱이랑 다른데 반응형인가요?
![Page 8: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/8.jpg)
부트스트랩
반응형??
Nope
![Page 9: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/9.jpg)
부트스트랩
![Page 11: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/11.jpg)
부트스트랩
웹에서 모바일 기기에 대응하기 위한 방법
1. 다른 페이지를 보여준다. 2. 한 페이지를 보여주지만 다르게 보이도록 한다.
![Page 12: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/12.jpg)
부트스트랩
1. 다른 페이지를 보여준다.
![Page 13: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/13.jpg)
부트스트랩
2. 한 페이지를 보여주지만 다르게 보이도록 한다.
![Page 14: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/14.jpg)
부트스트랩
Mobile-First!
![Page 15: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/15.jpg)
부트스트랩
모바일을 먼저 생각하는 기법
![Page 16: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/16.jpg)
부트스트랩
모바일을 먼저 생각하는 기법
![Page 17: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/17.jpg)
부트스트랩
웹을 이쁘게 만들기 위해서 좋은 디자인 감각만이 필요한 것이 아니다.
![Page 18: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/18.jpg)
부트스트랩
디자인이 쉽다고 생각할지도 모르지만, 많은 것을 공부해야하고 연습해야 하는게 디자인
![Page 19: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/19.jpg)
부트스트랩
일 단 집 어 치 우 고 !
써보자!
![Page 20: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/20.jpg)
부트스트랩
다운 받는 방법
HTML/CSS/JS 프레임워크라서 로컬환경에서도 충분히 개발이 가능하다.
http://getbootstrap.com
![Page 21: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/21.jpg)
부트스트랩
다운 받는 방법요거!
![Page 22: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/22.jpg)
부트스트랩
구조
![Page 23: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/23.jpg)
부트스트랩
웬만해서 .min.*** 을 링크해주자!
bootstrap.min.css
bootstrap.min.js두개는 반드시 링크해주자!
근데, bootstrap.min.js 는 jquery 가 필요하다! jQuery 도 링크해주자!
![Page 24: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/24.jpg)
부트스트랩
준비 끝!
![Page 25: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/25.jpg)
부트스트랩
Bootstrap 은 기본적으로 준비된 테마들이 많다.
http://bootstrapk.com/getting-started/
![Page 26: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/26.jpg)
부트스트랩
Bootstrap 은 기본적으로 준비된 테마들이 많다.
http://qov.me/hyundai/
![Page 27: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/27.jpg)
부트스트랩
<head><meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>부트스트랩으로 시작하는 첫 콘텐츠!</title>
<!-- Bootstrap core CSS================================================== --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Bootstrap core JavaScript ================================================== -->
<script src="http://code.jquery.com/jquery-latest.min.js" type='text/javascript'></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script></head>
![Page 28: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/28.jpg)
부트스트랩
처음으로 나가는 자율적 과제!
부트스트랩을 이용해 자신의 소개 사이트 만들어보기!
예제 : http://qov.me/hyundai/about.html
부트스트랩 소개페이지를 적극적으로 활용할 것!
![Page 29: 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)](https://reader033.vdocuments.mx/reader033/viewer/2022052312/58a94b461a28ab991c8b6ab7/html5/thumbnails/29.jpg)
부트스트랩
숙제!
자신이 만들고 싶은 간단한 사이트 생각해보기