부트스트랩 소개 및 활용
부트스트랩
- 웹 디자인을 목적으로 하는 오픈 소스의 Framework
- CSS와 JAVA 스크립트로 이루어진 라이브러리
- 트위터 내부의 인터페이스 일관성을 목적으로 개발(Blue Print)
- 오픈 소스로 공개되면서 Bootstrap으로 바뀜
프레임 워크 (Framework)
- 소프트웨어의 생산성 문제 때문에 개발된 방법
- 반복된 구조나 기능들을 추상화 시켜 재사용을 가능하도록 하는 소프트웨어 환경
Bootstrap의 장점
- 저렴한 비용
- 오픈소스 이기 때문에 무료로 이용 가능
- 저렴한 비용으로 다양한 테마 구매 가능
- 시간 절약
- 웹 페이지를 만들 때, 코딩에 대한 부담 감소
- HTML, CSS 코드가 이미 형성 되어 있음
- 사용하기 간편한 그리드 시스템
- 태블릿, 스마트폰 등 다양해지는 화면의 사이즈에 맞게 비율에 따라 디자인 가능
- 모바일 자동 적용(반응형)
- 다양한 디바이스 크기에 맞게 요소 배치
- 모바일 우선 지원
- Desktop용 제작 > mobile용 자동으로 제작
Bootstrap의 단점
- 기존 set-up과의 충돌
- 기존에 제작된 코드들과 새로운 코딩들이 충돌, 버그 발생
- 대용량
- 부트스트랩 전부를 이용할 경우 126KB의 CSS와 29KB의 자바 스크립트 포함
- 로딩 시간 길어짐, 모바일 배터리 문제
- 보편화
- 자체적으로 디자인한 것에 비해
- 공장에서 찍어낸 듯한 느낌을 피하기가 어려움
- 불필요한 class들 발생
- 도메인 객체 모델이 불필요한 class로 가득 채워 짐
- 좋은 웹디자인 규칙을 어김
부트스트랩 적용
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<p class="text-left">좌측정렬된 텍스트.</p>
<p class="text-center">중앙정렬된 텍스트.</p>
<p class="text-right">우측정렬된 텍스트.</p>
<p class="text-justify">양쪽정렬된 텍스트.</p>
<p class="text-nowrap">그냥 텍스트.</p>
<!-- 순서없는 -->
<ul>
<li>...</li>
</ul>
<!-- 순서있는 -->
<ol>
<li>...</li>
</ol>
<!-- 스타일 없는 -->
<ul class="list-unstyled">
<li>...</li>
</ul>
<!-- 한줄로 보여주는 -->
<ul class="list-inline">
<li>...</li>
</ul>
<!-- 기본예제 -->
<table class="table">
...
</table>
<!-- 줄무늬 행 -->
<table class="table table-striped">
...
</table>
<!-- 맥락적인 클래스들 -->
<!-- `tr`, `td`, `th` 모두 사용 가능 -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
<!-- 반응형 웹 테이블 -->
<div class="table-responsive">
<table class="table">
...
</table>
</div>
부트스트랩을 이용한 설문조사 문서
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>나의 설문조사</title>
</head>
<body>
<h2>설문조사</h2>
<form>
<h3>설문자</h3>
<div class="form-group">
<label for="exampleInputEmail1">이메일 주소</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
</div>
<div class="form-group">
<label for="exampleInputPassword1">암호</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
</div>
<h3>학년를 선택하시오</h3>
<div class="radio"><label><input type="radio" name="학년" value="1학년">1학년<br></label></div>
<div class="radio"><label><input type="radio" name="학년" value="2학년">2학년<br></label></div>
<div class="radio"><label><input type="radio" name="학년" value="3학년">3학년<br></label></div>
<div class="radio"><label><input type="radio" name="학년" value="4학년">4학년<br></label></div>
<h3>HTML부터 웹앱까지를 듣는 이유는?</h3>
<div class="checkbox"><label><input type="checkbox" name="홈페이지를 만들고 싶어서" value="수강이유">홈페이지를 만들고 싶어서</label></div>
<div class="checkbox"><label><input type="checkbox" name="실무전산 필수학점을 위해서" value="수강이유">실무전산 필수학점을 위해서</label></div>
<div class="checkbox"><label><input type="checkbox" name="김근우 교수님과의 교제를 위해서" value="수강이유">김근우 교수님과의 교제를 위해서</label></div>
<div class="checkbox"><label><input type="checkbox" name="그냥" value="수강이유">그냥</label></div>
<h3>학기수를 선택하시오</h3>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!-- <button type="submit" class="btn btn-default">제출</button> -->
<input class="btn btn-default" type="submit" value="전송하기"></input>
<input class="btn btn-danger" type="reset" value="취소하기"></input>
</form>
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>