LIKELION at 인하대

#2

인하대학교 운영진 한정

오늘의 목차

• MVC 패턴이란
• Bootstrap 이란?
• 무료 템플릿으로 개인 페이지 꾸며보기

MVC 패턴이란?

참조 : https://developer.chrome.com/apps/app_frameworks

Model

Data Objects가 저장되는 곳

view에서 일어나는 일은 모른다

View

유저들에게 직접적으로

보여지는 부분

Controller

Model과 View사이의 중재자

둘 사이의 변화를 알아채 할 활동을 서로에게 명령한다.

여기에 우리가 알고 있는

간단한 카카오톡을 투영하면

Model

Controller

view

1.메세지를 입력한다​

2. 메세지를 DB에 저장 해야 한다.

3. 메세지를 DB에 저장하라고 명령

4. 저장했음. 변화가 있다!

5. 모델에 변화가 있음 을 뷰에  

나타내 줄 필요가 있다.

6. 변화 된 부분을 나타내라 명령

7. 변화 된 부분 나타남

0.처음 로드가 되면 해당 채팅방에 따른

채팅내용을 로드 해 올 것.

데이터는 모델에서 뽑아 컨트롤러를 통해 뷰로

보내줄 것

여기서 중요한 것은 구성 패턴

실제로 카카오톡에서
저렇게 할지는 모르지만

왜 알려주는 걸까?

당장은 안 와닿겠지만

maintainable code

write better organized

올해 웹을 공부하며
우리들이 공부할 것을
MVC로 나눠보면

BACKEND

FRONTEND

화요일 공부했던

awesome한 css를 쉽게 하기 위해 등장한

ootstrap 이란?

본인들이 말하기를

"부트스트랩은 가장 대중적인(유명한)

반응형 웹 개발용

HTML, CSS, JS Framework이다."

반응형 웹이란?

반응형 웹 (Responsive Web)은 기기의 해상도에 따라

레이아웃이 반응하여 웹페이지를 나타냄

참조 : http://wpcoop.kr/responsive-web/

하나의 소스코드로 작성! 유지, 관리가 쉽다.

반응형 웹이란?

몇가지 반응형 웹 예시를 보면

https://fieldnotesbrand.com/

http://outdatedbrowser.com/en

등등등..

Live Coding

Live Coding

1. C9에서 프로젝트를 하나 만들겠습니다. 

2. public 폴더에 newfile로

index.html 파일을 만들고

3. Hello World를 적어보고 출력해보자

4. 출력화면

Live Coding

5. 차이점을 보기 위해 style을 넣어보겠습니다.

따라 쳐보세요

Live Coding

5-1. 현재의 결과화면

6. 이제 getbootstrap.com 에 들어가서

getting started 클릭

Live Coding

7. Bootstrap CDN 내용을 복사해서

Live Coding

8. 복사 붙여넣기를 해보자! 그리고 돌아가면

Live Coding

9-1. 전

9-2. 후

뭔지 모르겠지만 속성이 들어갔다.

Live Coding

10. 크롬 개발자 도구를 클릭해서 속성을
보게 되면 내가 주지 않은

속성이 들어간 것으로 보인다.

Live Coding

크롬 개발자 도구 사용하기

크롬이 아닌 다른 브라우저에도

각각 개발자 도구가 있습니다.

하지만 크롬만큼 강려크 하지는 않죠

사실 css가 아무리 awesome해도 크롬 개발자도구를 써서 layout을 못잡는다면 프론트엔드 개발자, 퍼블리셔라 할 수 없을겁니다.

Windows : F12 or  Ctrl + Shift + I
OSX : cmd(⌘) + option(⌥) + I
 

아니면 그냥 마우스 페이지에서 오른쪽 클릭 -> 검사

* Element에서 뭘 할 수 있나

* 모바일 환경에서 어떻게 나오나

* Console에서 자바스크립트 코딩 및 에러메세지 확인

* Sources에서 js debugging

* Network등에서 include여부

* 등등등등등등....많은 일

더 궁금하시다면

https://developers.google.com/web/tools/chrome-devtools/

11. 포함시키는 css를 살펴보면

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

원리를 알았으니

저희는 이제 이쁘게 만들어 놓은것을 가져다 쓰기만 할 겁니다.

Live Coding

그대로 가져다 쓰는 연습을
해보겠습니다.

• Button(http://getbootstrap.com/css/#buttons-options)

• Form(http://getbootstrap.com/css/#forms)

• Grid(http://getbootstrap.com/css/#grid)

이외의 것은 각자 해보기

Live Coding

Grid System

부트스트랩에서 제공하며

화면 크기에 맞게
반응형으로 적절하게
12열이 확대, 축소되는 시스템

이것때문에 부트스트랩을 쓴다는 사람이 많을 정도..

Grid option

똑똑하게 그리드 시스템을
사용하려면 어떻게 해야할까?

간단한 예제로

제가 1주일 약간 안 걸려서 만든 사이트 입니다.

이때 꺼내게 될 줄 몰랐는데,,,

http://myinha.com/

결론은 페이지의 특성에

맞게 잘 작성하면 됩니다.

template 가져다 쓰기 (1)

제대로된 template 가져 쓰기는 (2), 알려드릴 예정입니다.

https://startbootstrap.com/

https://shapebootstrap.net/free-templates

부트스트랩 free template사이트는 더 많습니다. 

아무튼 위 사이트에 들어가

이 템플릿을 다운로드 해보겠습니다.

압축을 풀고 폴더를 열어보면

이러한 파일들이 존재합니다.

License랑 readme빼고 전부 퍼블릭으로!

이쁜 웹페이지를 하나 만들었습니다.

게다가 반응형..

배운 개발자 도구와
HTML / CSS를 이용하여
내용을 수정해 봅시다.

Live Coding

이번주 과제

무료 부트스트랩 템플릿 다운 받아
개인 페이지 만들기(넘나 쉽)

만든 후 슬랙에 공유하며 서로 자랑해 보세요