웹 프로그래밍[10] - Flask, bootstrap

👀 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다.

 

 

01. Flask 

---

🔹 웹서버의 기본적인 작동 방식 

 

 

 

🔹 HTTP 프로토콜

 

• 의사소통을 위한 규약
• 통신할 때 주고받는 규약
• 서버와 클라이언트 간에 주고받는 http 메시지 : Request, Responses

 

 

 

🔹 CGI

 

• 표준 입출력 장치를 통한 정보입력과 웹페이지 출력 구조로 서버 프로그램과 외부 프로그램을 연동하는 방식
• 매우 간단한 구조의 인터페이스 

 

 

🔹 MVC

 

• 사용자 결과물 생성 뷰, 전체 모델을 콘트롤하는 콘트롤러, 전체 웹 서비스 모델을 담당하는 모델로 구성하는 소프트웨어 디자인 패턴
• 사용자와 웹서버가 1:1로 물려져 있음. 사용자가 웹페이지를 보기 위해선 서버가 제공하는 방식에 제한되어짐

 

 

 

🔹 Ajax

 

Asynchronous Javascript and XML

 

• 비동기방식 : 사용자 따로, 서버 따로 움직이는 방법
• 사용자쪽에 구조적 변화가 생기면 필요한 경우 서버에 정보를 요청하는 비동기적 방식 

 

 

 

 

🔹 RESTful

 

Representational State Transfer

 

• 분산형 구조로 네트워크 아키텍쳐 원리로 구성된 웹서비스 

 

 

 

🔹 풀스택 웹 개발 

 

• Django, Ruby on Rails. Java Spring
• 지원하는 기능 : 요청/응답 추상화, 세션관리 (쿠키관리), 사용자인증과 권한관리, 웹페이지 템플릿 기능, 데이터베이스 접근 기능, 보안과 캐시 (비상메모리형태로 떠있다가 빼오는 것 - 처리속도가 빠름), 데이터 접근 추상화, URL 매핑기능

 

 

🔹 마이크로 웹 개발 프레임워크 

 

• 웹 개발에 필요한 최소의 기능 제공 
• 나머지 기능은 다른 라이브러리나 프레임워크의 확장성을 이용 
• 상대적으로 제약하는 부분이 적어 일반 프로그램 개발과 동일 
• 시나트라 루비, 파이썬 보틀, 파이썬 플라스크 

 

 

🔹 플라스크

 

• 핵심적인 기능만 갖는 마이크로 웹 개발 프레임워크 
• 특징
  • 개발용 서버와 디버그 내장 
  • 단위테스트 지원
  • RESTful API 
  • Jinja2 템플릿 엔진 내장 
  • 쿠키 지원 
  • 100% WSGI 호환 
  • 유니코드 지원
  • 확장성 

 

 

 

 

 

 

02. bootstrap

---

 

 

🔹 트위터가 만든 HTML, CSS, JS 개발을 위한 오픈소스 툴킷

 

• 반응형(responsive), 모바일위주(mobile first) 웹 개발을 위한 웹 프레임워크
• 전문가들이 미리 만들어놓은 css, js, 클래스들을 사용하여 높은 품질의 웹페이지를 손쉽게 개발
• jQuery 프레임워크를 이용

 

👀 반응형 :  미디어쿼리처럼 모바일 기기에 맞게 자동으로 작동하는 것 

 

 

🔹 프로젝트 시작 방법

 

• 소스를 다운로드하여 사용하는 방법 
• CDN (content delivery network) 를 이용하는 방법 : CDN 서버에서 제공하는 css, js 파일을 링크하여 사용, 기본 템플릿을 복사하여 시작 
• 패키지 매니저를 이용하여 설치하여 사용 (npm) 

 

 

 

 

🔹 레이아웃 - 컨테이너

 

• Bootstrap은 전문가가 디자인한 클래스(class)들의 모음
• 첫 번째 해야 하는 일은 컨테이너 클래스 사용하기

 

 

 

🔹 레이아웃 - 그리드 시스템

 

• 일련의 컨테이너, 행 및 열을 사용하여 내용을 정렬하고 구성
• 플렉스 박스로 제작되며 완전히 반응형이다. 

 

 

🔹 레이아웃 - 미디어객체 

 

* class = media 
* alt : 마우스를 가져다 대면 그림에 text 가 뜸 

 

 

 

 

🔹 컨텐츠 - 타이포그래피 

 

 

 

 

🔹 컨텐츠 - 테이블 

 

 

 

🔹 컨텐츠 - 이미지, figure

 

• 반응형 이미지 : .img-fluid 
• 섬네일 이미지 : .img-thumbnail 
• 이미지 정렬 : .float-left , .float-right 

 

 

 

🔹 컴포넌트 - 알림

 

 

🔹 컴포넌트 - 배지

 

 

 

🔹 컴포넌트 - 버튼

 

 

 

🔹 컴포넌트 - 버튼그룹

 

 

🔹 컴포넌트 - 카드 

 

 

 

🔹 컴포넌트 - 캐러셀

 

• 캐러셀 : 회전목마와 같이 순환하는 슬라이드 쇼(이미지 또는 텍스트 슬라이드)를 구성하는 컴포넌트

 

 

🔹 컴포넌트 - 컬랩스 

 

• 컬랩스 : 특정 버튼을 클릭하면 해당 내용이 보였다가 안 보였다가 하는 기능

 

 

 

 

 

🔹 컴포넌트 - 드롭다운

 

 

 

🔹 컴포넌트 - 폼

 

 

 

🔹 컴포넌트 - 점보트론

 

• 다른 페이지로 이동 : 더 알아보기 

 

 

🔹 컴포넌트 - 목록그룹

 

 

 

🔹 컴포넌트 - 모달

 

• 모달 : 아래의 키워드로 위치를 입력하면 해당 위치에 띄워줌

 

 

 

🔹 컴포넌트 - 내비게이션 

 

 

 

🔹 여러 페이지를 갖는 메뉴 시스템 작성하기 

 

• 홈페이지 메뉴 구상 
• Index.html 파일에 내비게이션바 추가 : 메뉴 item 파일명 지정 
• 이 파일을 복사해 다른 파일명으로 저장