부트스트랩 사용법

Wed, 21 Aug 2024 00:24:39 GMT

01: Bootstrap 개요

1) Bootstrap 이란? 부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 라이브러리 입니다. 부트스트랩을 기반으로 하는 다양한 응용 라이브러리가 있으며 부트스트랩에 일부를 보완해 여러분들만의 CSS 라이브러리를 구축해 나갈수 있습니다.

부트스트랩을 제대로 사용하기 위해서는 앞에서 배운 HTML과 CSS 의 기본개념을 확실하게 이해하고 있어야 합니다. 특히 DOM, CSS의 상속관계, 선택자, 블럭/인라인, position 등에 대한 완전한 이해가 필요 합니다.

만일 부트스트랩을 잘 사용할 수 있게 된다면 다른 CSS라이브러리들도 얼마든지 도입해 사용할 수 있는 능력을 갖추게 되었다고 볼 수 있습니다.

2) Bootstrap 시작하기 부트스트랩의 세부 설정이나 테마를 수정해 개발하거나 react, vue 등의 프론트엔드 프레임워크에서 부트스트랩을 사용하는 경우 전체 라이브러리를 다운받아 새롭게 빌드해서 사용하는 개념으로 접근할 수 있지만 백엔드 기반의 웹프로그램이나 간단한 프론트엔드 웹프로그램을 개발하는 경우에는 CDN(Contents Delivery Network) 을 통해 부트스트랩 css 와 자바스크립트 라이브러리를 포함하는 것만으로도 사용이 가능 합니다.

react, vue 와 같은 프론트엔드 프레임워크에서 기본 Bootstrap 을 사용하는 방법도 있지만 jQuery 사용에 따른 문제점이나 기타 프레임워크 구조를 일관되게 적용하기 위해 해당 프레임워크용으로 별도 제작된 Bootstrap 플러그인을 사용하기도 합니다. react-bootstrap, bootstrap-vue 등이 이에 해당 합니다. Bootstrap CDN 부트스트랩의 최신버전은 4.3.1 이며 다음과 같이 외부 스타일시트를 사이에 추가 하면 바로 부트스트랩을 사용할 수 있습니다.

Bootrap JavaScript 부트스트랩의 일부 컴포넌트들은 이벤트에 반응하는 구조로 되어 있어 jQuery를 비롯한 몇몇 자바스크립트 라이브러리를 필요로 합니다.

코드가 길어진 이유는 integrity 와 crossorigin 속성 때문인데 이들은 보안과 관련된 것으로 자바스크립를 이용한 보안공격에 대비한 것으로 사용하는 것을 권장 합니다.

3) 알아둘 사항 부트스트랩은 일관된 디자인 적용을 위해 기본 HTML 태그들의 기본 CSS속성들을 재정의 하거나 수정된 초기값을 사용하고 있습니다.

box-sizing 박스 요소들의 일관된 사이즈 계산을 위해 전체 태그에 대해 box-sizing 속성을 border-box 로 변경해 사용하고 있습니다. 이는 일부 서드파티 라이브러리(Google Maps, Google Custom Search Engin 등)에 영향을 미칠수 있습니다. 이경우 필요한 클래스들에 대해 box-sizing 을 content-box 로 오버라이딩해서 사용해야 합니다.

.selector-for-some-widget { box-sizing: content-box; } HTML 속성 초기화 앞에서 언급한것 처럼 기본 HTML 속성들중 일부는 수정되거나 재정의 되어 있습니다. 부트스트랩을 처음 시작하는 경우에는 자세한 내용을 몰라도 괜찮지만 보다 정확한 구조를 이해하고 정밀한 조정이 필요한 경우 세부적인 사항을 알고 있으면 도움이 됩니다.

해당 내용은 본 강좌의 범위를 벗어나므로 자세한 사항은 다음 링크를 참고하기 바랍니다.

https://getbootstrap.com/docs/4.3/content/reboot/

4) 부트스트랩 사용법 부트스트랩 CSS 적용만으로 기본적으로 HTML 태그 속성들이 부트스트랩에 맞게 초기화 되어 기본 태그만 사용해도 기존과는 조금 다르게 나타 납니다. 부트스트랩을 이용해 화면을 제작하는 것은 부트스트랩에서 정의된 다양한 클래스(컴포넌트)들을 HTML에 적용하고 부가적인 속성이나 레이아웃과 관련된 속성들을 정의한 클래스들을 조합해 나가는 과정 으로 이해할 수 있습니다.

<태그 class="bs_class1 bs_class2 ..."> 예를 들어 부트스트랩에서는 다음과 같은 버튼을 제공하는데 버튼사용을 위해서는 btn 이라는 클래스를 기본으로 하고 btn-success 와 같이 추가적인 클래스를 함께 사용해 디자인을 적용하는 방식입니다.

이외에 좀더 복잡한 구조의 컴포넌트들이 정의 되어 있고 border, margin, padding, color, align, width, height 등과 같은 속성들을 사용하기 쉽도록 만든 유틸리티 클래스들이 있으며 이들역시 조합해서 사용하는 것이 가능 합니다.

02: BS 컨테이너와 그리드

1) 컨테이너(Container) 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다. 보통

태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다. 다만 전체 구조를 잡기위해 부트스트랩에서는 두가지 컨테이너 모델을 제공하고 있습니다.

container

반응형으로 동작하며 고정폭을 가지고 있습니다. width 설정과 margin 설정을 통해 컨테이너와 브라우저 윈도우 사이의 여백을 조정할 수 있습니다.

container-fluid

viewport 전체 폭을 모두 차지하는 컨테이너 박스 입니다.

2) 그리드(Grid) 그리드는 테이블과 유사하게 화면을 분할해 원하는 레이아웃을 잡기위해 정의된 것으로 부트스트랩에서는 12개의 컬럼 구조를 사용할 수 있으며 5개의 화면크기와 관련된 옵션을 제공 합니다.

flexbox: 부트스트랩의 그리드는 flexbox(Flexible Box Layout Module)에 기반하고 있으며 flexbox 는 기존의 float, display, position 등을 이용한 박스 배치를 컨테이너 안에서 중심축을 기반으로 일관된 방식으로 배치하는 것이 가능합니다. 12 그리드 컬럼 화면을 12개의 컬럼으로 분할할 수 있으며 필요에 따라 컬럼을 묶어 더 큰 크기의 컬럼으로 사용할수도 있습니다.

5 그리드 옵션 부트스트랩의 그리드 시스템은 화면크기에 따라 사용할 수 있는 5개의 옵션을 제공합니다.

.col- (extra small devices - 화면크기 < 576px) .col-sm- (small devices - 화면크기 ≥ 576px) .col-md- (medium devices - 화면크기 ≥ 768px) .col-lg- (large devices - 화면크기 ≥ 992px) .col-xl- (xlarge devices - 화면크기 ≥ 1200px) 부트스트랩에서는 기본적으로 em 이나 rem 단위를 사용하지만 그리드 컨테이너의 폭을 계산하는데는 viewport 를 따라 px 을 사용합니다.

기본 사용법 row 와 col-- 클래스를 사용해 화면크기에 따른 컬럼과 로우를 지정하고 부가적인 유틸리티 클래스로 조정해 나가는 방식 입니다.

col-sm-1 //sm 사이즈의 1컬럼 크기 col-md-2 //md 사이즈의 2컬럼 크기 다음은 동일한 width 를 가지는 컬럼을 정의한 것입니다. 전체 화면폭을 분할하게 되고 화면 크기에 따라 크기는 비율에 따라 조정되지만 배치가 바뀌지는 않습니다.

.col

다음은 화면크기를 지정한 반응형 레이아웃으로 동일한 세개의 컬럼을 가지지만 화면크기가 576px 이하가 되면 상하로 배치가 변경 됩니다. 하나의 row 에 모든 컬럼을 배치하려면 구성 컬럼 크기의 합이 반드시 12컬럼 이하여야 하며 초과될 경우 다음 row 로 넘어가게 됩니다.

.col-sm-3

하나의 row 에서 임의로 컬럼을 다음 라인으로 옮기기 위해서는(column break) 중간에 .w-100 클래스를 가지는

를 추가 합니다.

col

03: BS 컴포넌트 컴포넌트는 부트스트랩에서 정의한 UI 요소로 버튼, 경고창, 네비게이션바 와 같이 화면 구성에 필요한 요소들을 정의해둔 클래스 집합 입니다.

컴포넌트는 클래스만 사용해도 동작하는 유형과 특정 태그와 함께 사용해야 하는 유형이 있습니다. 각각의 컴포넌트 문서와 사용예를 보고 적용하면 됩니다.

다음은 BS의 기본 컴포넌트 목록 입니다.

컴포넌트 설명 비고 Alerts 텍스트 메시지를 포함하는 알림 박스 유형에 따라 5가지 컬러스키마로 구성 가능 Badge 버튼과 유사한 모양으로 텍스트와 숫자뱃지로 구성 스마트폰 아이콘에 숫자 뱃지와 유사 Breadcrumb 웹사이트에서 현재 페이지의 위치 정보를 표기 /home / board / 자유게시판 형식 Buttons 다양한 색상과 디자인의 버튼을 지원. 이벤트 처리는 별도 JS 처리가 필요 Button group 버튼을 그룹으로 묶어 메뉴형태로 사용가능 수직 버튼 그룹 구성도 가능함 Card 카드와 같이 세로 형태의 박스에 사진, 텍스트 등으로 콘텐츠 구성 제목과 내용을 버튼, 링크등으로 구성 가능 Carousel 이미지 슬라이드 컴포넌트 Next, Prev 버튼, 인디케이터, 자동슬라이드쇼 가능 Collaps 일부 콘텐츠를 숨기거나 보여줄수 있는 컴포넌트 Accordion 형태의 사용도 가능 Dropdown

ysj_log.log

부트스트랩 사용법