제1강.  부트스트랩4 소개

컨텐츠 정보

본문

세계에서 가장 유명한 프런트 앤드(html, css, javascript) 프레임웍인부트스트랩 최신버전입니다.


4d11c0866ac03ac8530161bbbf99dd65_1521771328_6323.png
부트스트랩4는 모바일 우선 반응형 홈페이지를 만드는데 사용되는 가장 인기있는 프레임워크 Bootstrap의 최신버전입니다.


부트스트랩4는 무료입니다. 누구나 다운로드하거나 몇가지 방법으로 사이트에 적용할 수 있습니다.


https://getbootstrap.com/ 


1. 부트스트랩4강좌는 부트스트랩4에 대한 일반적인 강의를 진행하고,

2. 부트스트랩3과 뚜렷하게 변경된 부분은 별도로 다시 다루고,

3. 최종적으로 그누보드5를 위한 몇 번의 테마작업을 진행합니다.


마찬가지로, '실전홈페이지제작'강좌 이용회원은 무료로 이용할 수 있습니다.


** IE9이하 버전을 반드시 지원해야 한다면 부트스트랩3을 이용해야 합니다. 부트스트랩4는 더이상 IE9를 지원하지 않습니다.


부트스트랩이란?

  • 부트스트랩은 빠르고 쉬운 웹 개발을 위해 무료로 이용할 수 있는 프론트 앤드 프레임웍입니다.
  • 부트스트랩은 타이포그라피(문자), 양식, 버튼, 표, 네비게이션, 모달, 이미지슬라이드(캐러셀) 및 기타  Javascript플러그인을 위한 디자인 템플릿을 포함합니다.
  • 부트스트랩을 사용하면 반응형 사이트를 쉽게 만들 수 있습니다.


** 반응형 웹디자인은 소형 스마트폰부터 대형 PC에 이르기까지 모든 장치에 맞게 자동으로 조정되는 웹사이트를 만들 수 있습니다.


부트스트랩4의 장점

  • 사용 편의성 : HTML과 CSS에 대한 기본지식만 있으면 누구나 부트스트랩4를 사용할 수 있습니다.
  • 반응형 기능 : 부트스트랩 반응형 CSS는 스마트폰, 테플릿, 데스크탑에 맞게 조정됩니다.
  • 모바일 우선 : 부트스트랩4는 모바일 우선 정책을 따르는 스타일 중심입니다.
  • 브라우저 호환성 : 최신 브라우저와 호환됩니다. (IE10, Chrome, Firefox, Safari, Opera)


부트스트랩4 적용방법 


웹사이트에 반영하는 2가지 방법:

  • CDN을 이용하는 방법
  • getbootstrap.com에서 다운로드하는 방법


CDN을 이용하는 방법

부트스트랩4를 다운로드하지 않고 CDN(Content Delivery Network)을 이용할 수 있습니다.


MaxCDN에서 제공하는 Bootstrap4의 CSS 및 Javascript을 포함하는 예:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

CDN을 쓸 때의 장점:

많은 웹이용자가 이미 다른 사이트를 방문할 때 MaxCDN에서 Bootstrap4를 다운로드합니다.(사이트 방문할 때) 이런 결과로 사이트를 방문할 때 해당 사용자 컴퓨터의 캐시로 접속이 빨라집니다. 또한, 대부분의 CDN은 사용자가 파일을 요청할 때 가장 가까운 서버에서 파일을 제공하므로 로드시간이 빨라집니다.


** 단순 부트스트랩 CSS부분만 사용할 경우는 상관이 없지만 부트스트랩4에서 제공하는 Javascript컴포넌트(예:모달, 툴팁, 팝업 등)를 사용하고자 할 경우 jQuery와 Popper.js를 포함해야 합니다.


다운로드하는 방법

부트스트랩4를 직접 다운로드하여 호스트할 경우 https://getbootstrap.com을 이용하십시오.


부트스트랩4로 웹페이지 만드는 과정


1. HTML5 doctype 추가

부트스트랩4는 html5 doctype을 필요로 하는 HTML요소와 CSS속성을 사용합니다.

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

2. 모바일 우선

부트스트랩4는 모바일 장치에 반응하도록 설계되었습니다. 모바일 우선 스타일은 핵심 프레임웍의 일부입니다.


올바른 랜더링과 확대/축소를 보장하려면 <head>요소내에 아래 <meta>태그를 추가해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

-, width=device-width 부분은 페이지의 너비를 장치의 화면 너비에 따라 설정합니다.

-, initial-scale=1 부분은 페이지가 브라우저에 의해 처음 로드될 때 초기 확대/축소 레벨을 설정합니다.


3. 컨테이너 (Containers)

부트스트랩4는 사이트 내용을 감싸기 위해 요소가 필요합니다.


선택 가능한 2가지 컨테이너 클래스:

  1. container클래스는 반응형 고정폭 컨테이너를 제공합니다.
  2. .container-fluid 클래스는 뷰포트의 전체 너비에 걸쳐 전체 너비 컨테이너를 제공합니다.

4d11c0866ac03ac8530161bbbf99dd65_1521793205_1741.png   4d11c0866ac03ac8530161bbbf99dd65_1521793205_2295.png
 

부트스트랩4 두가지 기본 형태


-, 고정폭 컨테이너를 적용하는 예

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <title>Bootstrap 4 고정폭 예</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>고정폭 클래스 예</h1>
  <p>.container를 쓰는 경우입니다.</p> 
</div>

</body>
</html>


- 전체폭 컨테이너를 갖는 예

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <title>Bootstrap 4 전체폭 예</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>고정폭 클래스 예</h1>
  <p>.container-fluid를 쓰는 경우입니다.</p> 
</div>

</body>
</html>


댓글목록

등록된 댓글이 없습니다.

강좌