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

현대고 학생들과 함께 하는 웹 개발

제 6차시

한국디지털미디어고등학교13기 웹 프로그래밍과 정욱재

부트스트랩!

부트스트랩

부트스트랩

부트스트랩은 웹의 반응형/모바일 퍼스트 프로젝트를 위한

가장 많이 쓰이는 HTML, CSS, JS 프레임 워크

부트스트랩

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

부트스트랩

반응형??

디바이스의 종류에 따라 화면이 재조정되는 프로그램들을 반응형 프로그램이라고 부른다.

(정확히는 폭에 따라)

부트스트랩

반응형??

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

부트스트랩

반응형??

Nope

부트스트랩

부트스트랩

m.naver.com naver.com

http://m.naver.com

http://naver.com

부트스트랩

웹에서 모바일 기기에 대응하기 위한 방법

1. 다른 페이지를 보여준다. 2. 한 페이지를 보여주지만 다르게 보이도록 한다.

부트스트랩

1. 다른 페이지를 보여준다.

부트스트랩

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

부트스트랩

Mobile-First!

부트스트랩

모바일을 먼저 생각하는 기법

부트스트랩

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

부트스트랩

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

부트스트랩

일 단 집 어 치 우 고 !

써보자!

부트스트랩

다운 받는 방법

HTML/CSS/JS 프레임워크라서 로컬환경에서도 충분히 개발이 가능하다.

http://getbootstrap.com

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

부트스트랩 소개페이지를 적극적으로 활용할 것!

http://qov.me/hyundai/about.html

부트스트랩

숙제!

자신이 만들고 싶은 간단한 사이트 생각해보기

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

Education

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