반응형 HTML CSS 오픈프레임워크 :: 부트스트랩
▶ 부트스트랩
|
“ 부트스트랩은 반응형이며, 모바일 우선인 웹 프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크 입니다. ”
부트스트랩 은 프론트엔드 웹 개발을 더 빠르고 쉽게 만들어줍니다. 모든 기술수준의 사용자들, 모든 형태의 기기들, 모든 크기의 프로젝트들을 위해 만들어졌습니다.
프레임워크 란 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는것을 말합니다.
결국 부트스트랩은 반응형 HTML, CSS 등을 재사용이 가능하게끔 클래스 형태로 이미 만들어져 제공하는 것 입니다.
▶ 부트스트랩을 사용하는 이유
|
▷ 부트스트랩은 HTML, CSS 코드가 이미 만들어져 있어 사용자가 사용하기에 있어 편리합니다.
HTML 및 css에 많은 노력을 기울이지 않고 부트스트랩을 적용하면 간단한 코드의 추가만으로 웹페이지의 반응형 디자인을 손쉽게 제작할 수 있습니다.
▷ 모든 웹페이지의 디자인은 그리드시스템이 필요합니다.
효율적이고 보기 좋은 레이아웃을 만들기 위해서 많은 노력이 필요한데, 부트스트랩은 그리드시스템을 간단한 사용방법으로 적용할 수 있게 갖춰놓았습니다.
▷ 사용하기 편할 뿐 만 아니라 오픈프레임워크이기 때문에 여러 사용자와 공유해서 사용이 가능합니다.
▷ 웹 사이트에는 하나의 페이지만 존재하는 것이 아니라 많으면 수십 개의 페이지가 있고, 각 브라우저에 따라서 달라질 수 있는 스타일을 하나로 통일시켜 주기 어렵습니다.
부트스트랩을 적용하면 쉽게 일관성을 유지할 수 있습니다.
▶ 부트스트랩 적용
|
▷ 부트스트랩 홈페이지에서 다운로드 하고, 서버에 업로드 합니다.
▷ HTML문서에 아래 코드를 추가합니다. 예제에서 사용된 경로는 실제와 다를 수 있습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1> <link rel="stylesheet" href="/css/bootstrap.min.css"> <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="/js/bootstrap.min.js"></script>
▷ 부트스트랩의 유용한 기능들을 마음껏 사용합니다.
▶ 부트스트랩 유용한 기능
|
▷ 드롭다운(dropdown)
: 사용자가 정의한 목록 중 하나를 선택할 수 있는 토글메뉴 입니다.
.data- 속성과 자바스크립트로 구현할 수 있으며, .data-toggle="dropdown"속성은 반드시 포함해야 합니다.
예제
<div class="container"> <div class="dropdown" id="mydropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown" aria-expanded="true"> ALLStory <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">VisionPLUS</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">e-ZERO</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Game Friends</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">On-line marketing</a></li> </ul> </div> </div>
자바스크립트
$(".dropdown-toggle").dropdown();
$(".dropdown-toggle").dropdown("toggle");
결과 : 버튼 클릭
▷ 캐러젤(carousel)
: 이미지 슬라이드 기능을 하게하는 플러그인 입니다.
예제
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-color: red; width:100px; height: 100px;"></div>
<div class="item" style="background-color: blue; width:100px; height: 100px;"> </div>
<div class="item" style="background-color: yellow; width:100px; height: 100px;"> </div>
<div class="item" style="background-color: green; width:100px; height: 100px;"> </div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
자바스크립트
$(".carousel").carousel();
$(".carousel").carousel({
interval : 2000;
pause : false;
});
$(".carousel").carousel('cycle');
$(".carousel").carousel('pause');
$(".carousel").carousel('number');
$(".carousel").carousel('prev');
$(".carousel").carousel('next');옵션
○ interval : 캐러젤의 항목을 자동으로 전환하는 지연시간 입니다. 기본값은 5000ms이며, flase시 캐러젤이 자동회전하지 않습니다.
○ ipause : 마우스가 캐러젤의 항목 안으로 들어오면 자동회전이 멈추고, 나가면 다시 동작합니다. 기본값은 'hover', false시 자동회전이 멈추지 않습니다.
메서드
○ cycle : 캐러젤의 항목들이 왼쪽에서 오른쪽으로 회전 합니다.
○ pause : 자동회전을 정지시킵니다.
○ number : 캐러젤의 특정 항목으로 이동합니다.
○ prev : 이전 항목으로 이동합니다.
○ next : 다음 항목으로 이동합니다.
결과
▷ 그리드(grid) 시스템
: 반응형 웹 페이지를 만들기 위해 가장 많이 사용되는 기능입니다. 부트스트랩에서는 기본적으로 12개의 컬럼으로 나누어 기능을 제공합니다.
각각의 태그를 테이블의 형식대로 .row와 .col 클래스로 구성이 가능합니다. 해당 기능으로 구성된 웹 페이지는 구동환경(크기)에 따라 반응형으로 동작하게 됩니다.
부트스트랩에서 반응형으로 사용할 HTML의 요소들을 둘러싸는 기본 클래스로 .container를 제공합니다.
<div class="container">
.row 클래스는 .container 클래스 안에 위치해야 정상적인 배열이나 패딩을 지원 해 줍니다.
미디어쿼리
: 미디어쿼리는 반응형 웹 사이트를 만들 때 필수적으로 사용되는 요소 입니다. 웹 프라우저의 해상도를 감지하여, 해상도에 따른 CSS를 적용시킬 때 사용됩니다. { ... } 안에 각각 해상도에 맞는 css를 작성합니다.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
옵션
: 그리드시스템에서 사용하는 칼럼의 클래스 종류에는 기본적으로 4가지가 있습니다.
○ .col-xs- : 매우 작은 기기(스마트폰 등)에서 항상 가로로 배치합니다.
○ .col-sm- : 768px 이하에서는 세로로 표시합니다.
○ .col-md- : 992px 이하에서는 세로로 표시합니다.
○ .col-lg- : 1200px 이하에서는 세로로 표시합니다.
사용 예
<div class="col-sm-3 col-md-6 col-lg-9"></div>
한 클래스 안에 동시에 사용이 가능하며 12개의 컬럼 중 표시할 컬럼 갯수를 표현합니다. 사용 목적 및 환경에 따라 적절한 설정을 합니다.
예제
<div class="container"> <div class="row"> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> <div class="col-md-1"> col-md-1 </div> </div> <div class="row"> <div class="col-md-2"> col-md-2 </div> <div class="col-md-2"> col-md-2 </div> <div class="col-md-2"> col-md-2 </div> <div class="col-md-2"> col-md-2 </div> <div class="col-md-2"> col-md-2 </div> <div class="col-md-2"> col-md-2 </div> </div> <div class="row"> <div class="col-md-3"> col-md-3 </div> <div class="col-md-3"> col-md-3 </div> <div class="col-md-3"> col-md-3 </div> <div class="col-md-3"> col-md-3 </div> </div> <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 class="col-md-6"> col-md-6 </div> <div class="col-md-6"> col-md-6 </div> </div> <div class="row"> <div class="col-md-12"> col-md-12 </div> </div> </div>
결과
한 행에 12컬럼보다 많이 배치될 경우
<div class="row"> <div class="col-md-9"> col-md-9 </div> <div class="col-md-4"> col-md-4 </div> <div class="col-md-8"> col-md-8 </div> </div>
결과
컬럼 오프셋
: .col-md-offset- 클래스를 사용하여 해당 컬럼을 우측으로 옮깁니다. 만약 .com-md-offset-2 이면 해당 컬럼을 우측으로 2컬럼만큼 이동시킵니다.
<div class="row> <div class="col-md-4"> col-md-4 </div> <div class="col-md-3 col-md-offset-2"> col-md-3 </div> <div class="col-md-3"> col-md-4 </div> </div>
결과
정리
○ 부트스트랩은 12개의 컬럼으로 나누어 기능을 제공합니다.
○ 그리드시스템은 .container 클래스 안에서 동작합니다.
○ .col 클래스는 반드시 .row클래스에 포함되어야 합니다.
○ 예제에서 알아본 그리드시스템의 기능 외에도 .visible, .clearflx, .push 와 .pull 기능이 있습니다.
.visible : 특정 화면에서만 컬럼을 보여지게 설정이 가능합니다.
.clearflx : 세로길이가 다른 컬럼을 동일한 위치에 놓이도록 합니다.
.push와 .pull 기능을 이용해 컬럼의 순서를 바꿀 수 있습니다.
▶ 마치며
|
부트스트랩은 GitHub 를 통해서 유행처럼 번져나가 많은 웹 사이트들이 부트스트랩을 사용하게 되었고, 커스터마이징이 되어 있지 않은 웹 사이트는 비슷하게 보여집니다. 그럼에도 불구하고 부트스트랩은 많은 웹 개발자가 사용하고 있고, 부트스트랩의 여러 기능을 사용자가 적은 노력으로 간편하게 사용할 수 있다는 점은 상당히 매력적입니다. 간단한 그리드시스템, 고급스러운 디자인 어느 것 하나 만족스럽지 않을 수 없었습니다. 위에서 예제로 든 기능 외에도 여러 가지 유용한 기능들이 있습니다.
보다 자세한 내용 및 기능들은 http://bootstrapk.com 부트스트랩 홈페이지를 참고하면 되겠습니다.
부트스트랩 사용법에 대해 쉽게 적용해 볼 수 있는 http://w3schools.com/ w3schools도 참고하시면 좋습니다.
출처: http://blog.allstorycorp.com/2 [Allstory Tech Blog]