현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)

현대고 학생들과 함께 하는 웹 개발
제 6차시
한국디지털미디어고등학교
13기 웹 프로그래밍과 정욱재
부트스트랩!

부트스트랩
부트스트랩은
웹의 반응형/모바일 퍼스트 프로젝트를 위한
가장 많이 쓰이는
HTML, CSS, JS 프레임 워크

부트스트랩
트위터 내부에서 사용되던 UI 라이브러리
디자인에 익숙하지 않은 개발자들을 위해 공개

부트스트랩
반응형??
디바이스의 종류에 따라
화면이 재조정되는 프로그램들을
반응형 프로그램이라고 부른다.
(정확히는 폭에 따라)

부트스트랩
반응형??
네이버는 모바일이랑 데스크톱이랑 다른데 반응형인가요?

부트스트랩
반응형??
Nope

부트스트랩
m.naver.com naver.com

부트스트랩
웹에서 모바일 기기에 대응하기 위한 방법
1. 다른 페이지를 보여준다. 2. 한 페이지를 보여주지만 다르게 보이도록 한다.

부트스트랩
1. 다른 페이지를 보여준다.

부트스트랩
2. 한 페이지를 보여주지만 다르게 보이도록 한다.

부트스트랩
모바일을 먼저 생각하는 기법

부트스트랩
웹을 이쁘게 만들기 위해서
좋은 디자인 감각만이 필요한 것이 아니다.

부트스트랩
디자인이 쉽다고 생각할지도 모르지만,
많은 것을 공부해야하고 연습해야 하는게 디자인

부트스트랩
일 단 집 어 치 우 고 !
써보자!

부트스트랩
다운 받는 방법
HTML/CSS/JS 프레임워크라서 로컬환경에서도 충분히 개발이 가능하다.
http://getbootstrap.com

부트스트랩
다운 받는 방법
요거!

부트스트랩
웬만해서 .min.*** 을 링크해주자!
bootstrap.min.css
bootstrap.min.js
두개는 반드시 링크해주자!
근데, bootstrap.min.js 는 jquery 가 필요하다!
jQuery 도 링크해주자!

부트스트랩
Bootstrap 은 기본적으로 준비된 테마들이 많다.
http://bootstrapk.com/getting-started/

부트스트랩
Bootstrap 은 기본적으로 준비된 테마들이 많다.
http://qov.me/hyundai/

부트스트랩
<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>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<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>

부트스트랩
처음으로 나가는 자율적 과제!
부트스트랩을 이용해 자신의 소개 사이트 만들어보기!
예제 : http://qov.me/hyundai/about.html
부트스트랩 소개페이지를 적극적으로 활용할 것!

부트스트랩
숙제!
자신이 만들고 싶은 간단한 사이트 생각해보기

현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)

Similar to 현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트) (20)

More from Ukjae Jeong

More from Ukjae Jeong (8)

현대고등학교 PHP 강의 - 6차시 (설리번 프로젝트)