동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
세계에서 가장 유명한 프런트 앤드(html, css, javascript) 프레임웍인부트스트랩 최신버전입니다.
부트스트랩4는 모바일 우선 반응형 홈페이지를 만드는데 사용되는 가장 인기있는 프레임워크 Bootstrap의 최신버전입니다.
부트스트랩4는 무료입니다. 누구나 다운로드하거나 몇가지 방법으로 사이트에 적용할 수 있습니다.
1. 부트스트랩4강좌는 부트스트랩4에 대한 일반적인 강의를 진행하고,
2. 부트스트랩3과 뚜렷하게 변경된 부분은 별도로 다시 다루고,
3. 최종적으로 그누보드5를 위한 몇 번의 테마작업을 진행합니다.
마찬가지로, '실전홈페이지제작'강좌 이용회원은 무료로 이용할 수 있습니다.
** IE9이하 버전을 반드시 지원해야 한다면 부트스트랩3을 이용해야 합니다. 부트스트랩4는 더이상 IE9를 지원하지 않습니다.
부트스트랩이란?
** 반응형 웹디자인은 소형 스마트폰부터 대형 PC에 이르기까지 모든 장치에 맞게 자동으로 조정되는 웹사이트를 만들 수 있습니다.
부트스트랩4의 장점
부트스트랩4 적용방법
웹사이트에 반영하는 2가지 방법:
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가지 컨테이너 클래스:
부트스트랩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>
등록된 댓글이 없습니다.