컨텐츠 정보
본문
세계에서 가장 유명한 프런트 앤드(html, css, javascript) 프레임웍인부트스트랩 최신버전입니다.
부트스트랩4는 모바일 우선 반응형 홈페이지를 만드는데 사용되는 가장 인기있는 프레임워크 Bootstrap의 최신버전입니다.
부트스트랩4는 무료입니다. 누구나 다운로드하거나 몇가지 방법으로 사이트에 적용할 수 있습니다.
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가지 컨테이너 클래스:
- container클래스는 반응형 고정폭 컨테이너를 제공합니다.
- .container-fluid 클래스는 뷰포트의 전체 너비에 걸쳐 전체 너비 컨테이너를 제공합니다.
부트스트랩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>- 이전강좌부트스트랩4 그리드(Grids) 18.03.23
댓글목록
등록된 댓글이 없습니다.