MixedCode

3일차
3.1 부트스트랩 템플릿 프로젝트 반영하기
3.2 레이아웃(마스터) 및 컨텐츠 페이지 구성하기
3.3 컨텐츠 및 입력폼 페이지 구성하기

3.4 부트스트랩 기본 사용법
3.5 로컬 웹서버  설치 및 사용법

이전 강의까지 반응형 템플릿 HTML 페이지들을 이용해 ASP.NET MVC5의 화면을 담당하는 레이아웃페이지뷰,컨텐츠페이지뷰,입력폼 페이지뷰등을 만들어 보았습니다.
물론 부트스트랩 템플릿에 존재하는 HTML페이지를 그대로 ASP.NET MVC5 웹 프로젝트에 추가해 정적인 웹페이지를 구성해도 되지만  HTML페이지 마다 존재하는
공통영역(레이아웃 페이지)을 하나의 소스로 관리하여 유지보수관리의 효율성을 높이고 추후 웹 프로그래밍 적용을 쉽게하기 위해 각각의 HTML 템플릿 페이지들을 MVC의 뷰(View)로 변환작업을 진행하였습니다.

제공된 템플릿의  HTML소스를 그대로 ASP.NET MVC5의 뷰로는 쉽게 전환하였지만 해당 템플릿 내용이나 포맷이 여러분의 입맛에 정확히 맞아 떨어지지 않을수도 있을것입니다. 템플릿을 이용해 여러분이 제공코자하는 서비스 컨셉을 정확히 전달하고 그내용인  컨텐츠를  정확히 사용자에게 전달하려면 아무래도 템플릿을 변경하거나 컨텐츠 내용을 신규로 작성할수도 있어야합니다.  그래서 최소한 부트스트랩의 사용법과 그 사용 환경을 이해하고 있어야합니다.

1.부트스트랩 사용 환경 이해하기


-반응형 웹 개발 스타일 시트 프레임워크인 부트스트랩의 소개 및  기초 환경세팅 방법은 1일차 강의 내용중 "반응형웹(Responsive Web)이란?" 를 참고하시면 되지만 여러분이 보유하고 있는 템플릿은 부트스트랩을 이용해 개발된 템플릿이기 때문에  이미 HTML소스 및 ASP.NET MVC5 로 변환된 레이아웃 페이지 뷰에는 이미 부트스트랩으로 개발할수 있는 환경이  세팅되어 있습니다.
-부트스트랩의 소개 및  기초 환경세팅 링크보기 : http://mixedcode.com/Article/Index?aidx=1055

A. 템플릿의 부트스트랩 사용환경 확인하기
1)html 템플릿 페이지 환경 확인
-템플릿중 index.html 페이지의 부트스트랩 환경을 확인해보도록 하겠습니다.

-부트스트랩 관련 메타태그 설정 및 스타일시트 파일 참조정보를 확인해 주십시오.


-부트스트랩 사용 관련 JQuery 파일과 부트스트랩 자바스크립트파일 참조 정보를 확인해주십시오.
 
2) ASP.NET MVC5 부트스트랩 사용 환경 확인하기
- html 템플릿을 레이아웃 페이지뷰 와 컨텐츠뷰로 변경 한 후 BundleConfig.cs를 이용해 구성한 부트스트랩 링크정보를 확인해보겠습니다.
 

-부트스트랩 관련 스타일시트 파일 참조정보를 확인해 주십시오.
-부트스트랩 사용 관련 JQuery 파일과 부트스트랩 자바스크립트파일 참조 정보를 확인해주십시오.


-레이아웃 페이지의 부트스트랩 관련  메타태그 설정정보 와 BundleConfig파일내 스타일시트 설정정보를 불러오는  @Styles.Render메소드와
하단의 스크립트 정보를 불러오는 @Script.Render메소드 정보를 확인해 주십시오. 


3) 부트스트랩 필수 HTML 환경 설정 
<!DOCTYPE html>
<html lang="en">
  ...
</html>

-부트스트랩은 HTML버전중 HTML5버전 문서포맷을  공식 지원하기 때문에 반드시 모든 웹페이지 문서는 최상단에는  HTML5문서임을 선언하는 <!DOCTYPE html> 태그가 선언되어 있어야 하며 html태그로 시작하여 html태그로 종료되어야 합니다.

<meta charset="UTF-8">
-한글,중국어,일어와 같은  유니코드 문자 지원을 위해서는 문자타입을 반드시 utf-8로 선언합니다.
 
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=2, user-scalable=no">

-부트스트랩 3.0 이상 버전에서는 모바일 환경이 기본 사용자 환경으로 인식될수 있게 하기 위해 반드시 메타태그의 viewport 기본 가로폭설정을
동적으로 각각의 디바이스별 해상도 가로폭값으로 지정될수 있게 설정해야합니다.
-initial-scale : 초기 화면 축소/확대 비율을  설정할수 있으며 1은 100% 설정값입니다.
-minimum-scale : 최소 축소 비율을 제어하며 사용자가 너무 화면을  작게 줄이는것을 방지합니다.
-maximum-scale : 최대 확대 비율을 제어하며 사용자가 너무 화면을  크게 늘리는것을 방지합니다.
-user-scalable : 화면의 확대/축소 기능을 사용 할지 말지를 결정합니다.

TIP)뷰포트 메타태그에 대해
뷰포트 메타태그는 애플측에서 사용했던  모바일 전용 해상도 설정 메타 태그로  현재는 표준에 가깝게 사용되고 있는 태그로  웹페이지의 뷰포트 설정을 하지 않으면  애플 태블릿 장치에서는 기본 뷰포트 사이즈가 980px으로 설정되기 때문에 전체 내용이 보여지기 위해  비율이 축소되 페이지가 작게 보이는 문제가 발생하므로  반드시  반응형으로 개발되는 웹페이지는 뷰포트 가로폭 설정값을 width=device-width로 지정해야합니다.
참고 링크 URL) http://aboooks.tistory.com/352

4)부트스트랩 프레임워크 버전 확인하기
-현재 템플릿에서 사용하고 있는 부트스트랩의 버전을 확인해보겠습니다.
-부트스트랩 스타일 시트 파일이 존재하는  assets폴더내의 아래 경로 \assets\vendor\bootstrap\css 내의 bootstrap.min.css파일 또는 bootstrap.css파일을 더블클릭해서 열어보면 아래 CSS 주석정보를 확인할수 있습니다.

/*!
 * Bootstrap v3.3.6 (
http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (
https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

샘플 템플릿의 부트스트랩 사용 버전은 v3.3.6 버전이구요, (2016년 08월 시점 최종버전은 ver 3.3.7이며 4.0버전이 배포예정입니다.)
트위터에서 카피라이트(저작권)을 보유하고 있으며  MIT라이센스를 가지며 Github를 통해 관리되는 오프소스 임을 확인할수있습니다.
여러분이 보유한 템플릿의 부트스트랩 버전정보도 확인해보시기 바랍니다.

Tip)부트스트랩과 트위터와의 관계
부트스트랩은 트위터의 디자이너와 엔지니어였던 Mark Otto 와 Jacob Thornton이 트위터 직원으로  근무하던 시절에 사내 프로젝트로
FrontEnd 개발표준을 만들기 위해 만들어지기 시작 되었기 때문에 현재도 트위터가 저작권을 보유하고 있습니다.

Tip)bootstrap.min.css파일 과 bootstrap.css 의 차이
스타일시트 파일과 자바스크립트  오픈소스 파일들을  자세히 보면  min이란 글자가 붙은 파일과 그렇지 않은 동일명의 파일들이 존재합니다.
min파일은 원래 제공되는 소스파일을 압축한 버전의 파일로 기능자체는 원본소스와 동일하지만 압축과정을 통해 원래 소스보다 파일 용량이 적습니다.

.min.파일 형태로 압축하는 이유는 해당 파일이 존재하는 서버에서 실제 작동되는 운영환경인 사용자 컴퓨터의 브라우저에 내려받기 위해서는 적은용량의 파일로 압축하여 내려받는것이 떠 속도가 빠르기 때문입니다. 일반적으로 원본소스파일과 .min파일은 동일한 기능을 제공하므로 실제 서비스 환경에서는 보다 빠른 웹페이지 화면 렌더링 과 작동을 위해 원본의 압축파일인 min파일을 이용합니다.


2.부트스트랩  활용하기


-부트스트랩 사이트에서 제공하는 기본샘플 소스를 다운받고  참조하여 몇몇 샘플을  직접 프로젝트에서 만들어 보도록 하겠습니다.

A.부트스트랩 개발 기본샘플 웹페이지 확인하기
-하기 사이트의 중간에 Samples 를 통해 직접 부트스트랩을 이용해 만들어진 샘플을 브라우저를 통해 확인해볼수 있습니다.
http://getbootstrap.com/getting-started/

B.부트스트랩 개발 기본샘플 다운로드
-상기 샘플 웹페이지의 샘플소스를  아래 주소를 통해  로컬로 다운로드하여 소스를 확인할수 있습니다.
https://github.com/twbs/bootstrap/archive/v3.3.7.zip
압출을 풀면 \bootstrap-3.3.7\bootstrap-3.3.7\docs\examples 폴더내 기본 개발샘플파일들이 제공됩니다. starter-template폴더에 index.html을 열어보시고 코드를 확인해보시기 바랍니다.

C. 컨텐츠 화면  레이아웃 구성하기
- 컨텐츠 페이지의 레이아웃을  부트스트랩 그리드시스템을 통해 구성하는 방법을 알아 보겠습니다.
- 샘플 페이지는
http://getbootstrap.com/examples/grid/ 이며 로컬 샘플소스는 \bootstrap-3.3.7\bootstrap-3.3.7\docs\examples\grid\index.html 입니다.

1) 데모 컨텐츠뷰  만들기
- TestController.cs에 BootDemo1 액션메소드를 만듭니다.
- BootDemo1에 오른쪽 마우스 클릭 뷰추가를 클릭합여 레이아웃이 있는 BootDemo1컨텐츠뷰를 추가합니다.
- Views\Test\BootDemo1.cshtml 컨텐츠뷰를 클릭하고 다음과 같이 코드를 작성합니다.



2) 부트스트랩 그리드 시스템 구조 및 원리
-부트스트랩을 이용해  화면을 구성하는 방법은 그리드라는 화면분할 구성방식을 사용합니다.
-부트스트랩의 그리드(화면분할) 시스템은 HTML 태그중 Div 태그를 와 CSS를 이용해 시각적으로 보이거나 보이지 않는 영역을 표시하고 분할할수 있으며 
화면을 수직으로 분할시 "col" 이란 명칭으로 정의하고 수평으로  분할시 "row" 란 명칭으로 클래스내에 정의하여 영역을 수직,수평 분할 할수 있습니다.
또한 수직분할(col)의 경우 전체 영역을 가상으로 12등분하여 비율을 1에서 12까지로 지정할수 있게하여  지정된 비율로 수직영역의 가로폭을
자동 조절될수
있게합니다.
디바이스 해상도별로  자동 비율 조절 기능을 제공하는데 xs,sm,md,lg등의 명칭(예약어)을 이용하여 디바이스별 기본 해상도를  기준으로 디바이스별로
컬럼 가로폭 비율을 세부적으로 조절할수 있습니다.

-부트스트랩의 수평/수직분할 방식은 Div태그내에 클래스명을 row로 선언하여 먼저 수평영역을 정의하고 하위에 여러 Div 태그와 클래스명을 col-md-4 이런포맷으로 선언하여 하나의 수평영역을 여러개의 수직영역(컬럼)으로  분할합니다.

다음은 하위영역을 표기하는 <div class="col-md-4">형식의 의미를 서술한 내용입니다.
ㄴcol : 수평영역에 하나의  수직영역(컬럼)을 추가합니다.
ㄴmd: 해상도 유형중 데스크톱 해상도(992px이상)일때의 컬럼 분할비율정의를 한다는 의미합니다.
ㄴ4 : 수평영역(row)을 12개 영역으로 블록화하였을경우 4비율만큼 영역을 자동으로 차지하겠다는 의미입니다.

Tip)부트스트랩 해상도별 구분 예약어
ㄴxs = Extra small devices  Phones (<768px)
ㄴsm = Small devices  Tablets (≥768px)
ㄴmd= Medium devices Desktops (≥992px)
ㄴlg = Large devices Desktops (≥1200px) )

3) 부트스트랩 화면 분할 및 해상도별 비율 조절하기
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
위의 부분소스를  다시 풀어 해석해보면 <div class="row"></div> 로 정의된 수평영역을 3개의 수직컬럼으로 구성하되  각각의 수직컬럼은 데스크톱 기본 해상도를 기준으로 12개 블록중 4비율만큼  각각 동일 가로폭 비율로 자동 조절되며 데스트톱 기본 설정 해상도인 가로폭이 992 이상인 해상도에서는  동일 비율을 유지한채 사이즈가 동일하게 늘어나며  992 사이즈 미만 해상도 일경우 태블릿,폰 환경으로 인식하여 각각의 컬럼이 줄바꿈이 발생하여 블록이 쌓이는것처럼 
각 컬럼이 각기 수평영역을 100%로 늘려 한줄씩 차지합니다.


상기 BootDemo1  컨텐츠를 디버깅 모드로 브라우저로  오픈한 후 웹브라우저 사이즈를 줄이거나 늘려보면  해당 해상도에 맞게 적절하게 화면의 그리드가 변경되는것을 확인할수 있습니다.

LINK) 부트스트랩 스타일  정보 링크 
http://getbootstrap.com/css/


D) 부트스트랩 테마 적용하기
- 부트스트랩은 7가지의 주요 테마 색상을 지원합니다.
- default,primary,success,info,waring,danger,link 등의 7가지 테마를 주요 html 태그에서 클래스 지정을  통해 사용이 가능합니다.
      
 <button type="button" class="btn btn-sm btn-default">Default</button>
 <button type="button" class="btn btn-sm btn-primary">Primary</button>

버튼의 경우  class="btn btn-sm btn-default" 방식으로  default 테마를 지정합니다.

-주요 테마 지원 기능으로는  button,table,image,label,badge,dropdown,navigation menu bar,alert layer,progress bar,list,panel,well,Carousel 등이 있습니다.
-샘플 웹페이지는 
http://getbootstrap.com/examples/theme/  로컬 샘플소스 경로는 \\bootstrap-3.3.7\bootstrap-3.3.7\docs\examples\theme\index.html 입니다.


간략히  부트스트랩  CSS 프레임워크의  주요 제공 기능을 살펴 보았는데요.
여러분의  컨텐츠 제공 내용과 방식에 따라 좀더 다양한 부트스트랩 기능을 활용해야 할수도 있습니다.
부트스트랩 사이트와  샘플 페이지를 참고해 가면서 템플릿에서 부족한 부분들은 직접 만들어 보시거나 변경해보실것을 추천드리며
부트스트랩에 대한 간략 사용법을 갈음하도록 하겠습니다.





Comments

Leave a Reply

*