부트스트랩, 어떻게 사용해야할까? -파트 1 (번역본)

 

이 게시물은 Medium, wd stack 채널의 How to bootstrap 이라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다.

 

---

 

 

세계에서 가장 인기있는 프론트엔드 라이브러리, 부트스트랩 (Bootstrap)

저는 2013년부터 부트스트랩 3.0과함께 업무를 진행해왔습니다. 부트스트랩 관련 문서들도 직접 작성해왔고,스택오버플로우 (개발자들의 성지같은 곳)의  부트스트랩 분야에서 가장 상위권 유저이기도 합니다. 이 문서에서는 부트스트랩의 사용법에 대해 자세하고, 명확하게 설명해보려합니다.

https://getbootstrap.com/

 

이야기를 진행하기 이전에, 몇가지 조건사항이 있습니다. 이 글을 읽고 이해하기위해서는 HTML과 CSS에대한 이해가 어느정도 필요합니다. 만약 웹사이트를 구축한 경험이나, CSS의 세부속성에대해 알지 못하는 경우. 이 글을 이해하는데에 어려움을 겪을 수 있습니다. 예를 들어 CSS에서의 #abc와 .abc의차이가 무엇인지 모르는 사람이라면 더욱더 그렇겠죠. 그러니 이 게시글을 읽기 전에, HTML의 기본과 CSS에대해서 배워두기를 추천드립니다.

 

 

부트스트랩을 사용하려해봤지만, 저한텐 너무 어려워요.

걱정마세요. 전 적어도 약 2천개 이상의 부트스트랩 관련 질문들을 스택오버플로우에서 답변해왔습니다. 그리고 수많은 어려움을 겪는 부트스트랩 유저들을 보아왔죠. 이 글을 읽고, 공식문서도 꼭 읽어보세요. 그리고 일단 한번 실험해보세요. 이제부터 이 글에서는, 부트스트랩이 얼마나 쉽고, 멋진 도구인지를 보여드릴겁니다.

 

 

 

이 문서에는 어떤 내용들이 담겨있나요 ?

• 부트스트랩은 무엇이고, 또 왜 써야하나요?
• 부트스트랩을 시작하는 방법
• 부트스트랩 CSS로 네비게이션 바 만들기
• 부트스트랩 그리드를 사용하는 방법
• 부트스트랩을 통한 반응형 디자인 만들기
• 부트스트랩으로 자바스크립트 기반 컴포넌트를 사용하는 법
• 부트스트랩을 커스터마이즈하는 방법

 

 

---

 

1. 부트스트랩은 무엇이고, 또 왜 써야하나요?

부트스트랩은 CSS와 자바스크립트 파일들로 이루어져있습니다. 말그대로 웹 규격을 위한 프레임워크인것이죠. 그렇기에 웹개발을 더 편히고, 빠르게 진행할 수 있도록 도와줍니다. 부트스트랩은 안정적이고, 반응형 웹을 지원하며, 매우 편리한 장점을 갖고있습니다. 또한 현재 4.3버전까지 나와있기때문에, 프레임워크로서도 성숙단계에 오른 셈이죠.

 

---

 

 

부트스트랩을 사용한 실제 기본사례

 

부트스트랩 사용전

https://www.codeply.com/go/o10in431jm

 

 

 

 

 

 

부트 스트랩 적용 후

https://www.codeply.com/go/RMPQJ3AqJn

 

 

 

위의 사례와 같이. 부트스트랩이 적용되자 웹페이지의 내용들이 즉시 새로운 레이아웃을 갖게되는걸 알 수 있습니다. 부트스트랩에서는 HTML, 마크업 규격, CSS 클래스 등을 그대로 사용할 수 있습니다. 한번 CSS의 텍스트 센터 기능을 사용해보죠.

물론 부트스트랩 없이도 동일한 방식을 사용 가능합니다. HTML과 CSS로도 동일한 방식을 사용할수 있죠.

 

 

 

이렇게 단순한 예제에서는 이 차이가 크게 느껴지진 않을겁니다. 그러나 복잡한 구조를 갖게되는 페이지들을 만들게되면 상황이 달라집니다. CSS 클래스들을 매번 작성해줘야하고, 변경될 때마다 다시 세팅을 해줘야하니까요. 그런 CSS가 여러 브라우저에서 호환성이 확실하게 보장될 수 있을까요? 반응형 웹을 지원하게된다면 또 어떻게 될까요? 당연한 이야기지만 이런 방식은 결코 편리한 방식이 되지 못합니다. 그렇기에 때문에 이런 문제를 해결하기 위해 부트스트랩을 사용하게되는 것이죠.

 

 

 

 

다양한 화면에 대한 반응형 지원, 재사용 가능한 CSS를 강점으로 내세운 부트스트랩

 

---

 

2. 부트스트랩을 시작하는 방법

대부분의 사람들은 부트스트랩의 '설치법'에대해서 물어보는 경우가 많습니다. 그러나 부트스트랩은 엄밀히 말하면 설치를 하는 개념이 아닙니다. 그저 CSS와 자바스크립트를 통해 - 소스를 끌어와 사용하는 것이죠.

NPM이나, Nuget같은 툴들을 통해 개발환경을 만들어본적이 있으시다면 이해가 쉽습니다. 이 문서에서는 CDN 기반으로 부트스트랩을 어떻게 사용할 수 있는지만 알면 충분합니다. 기본 공식 탬플릿의 내용처럼, 부트스트랩은 - 부트스트랩 CDN을 통해 끌어와 사용이 가능합니다. 그저 HTML 헤드 태그 안에 부트스트랩 CSS만 추가해주면 되거든요.

 

 

 

텍스트 한줄만 추가해주세요!

 

 

---

 

기본 공식 탬플릿

https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template

 

이후에 추가적으로 부트스트랩 자바스크립트를 - 전체 바디 태그가 닫히기 전. 스크립트 태그 내에 감싸 넣어주세요. 부트스트랩 4의 경우 jquery와 popper.js를 필요로 하므로, 이 부분도 잊지말고 세팅을 해줘야합니다.

 

 

 

---

 

 

부트스트랩을 시작하는 방법

바로 시작해보기

이 문서에서는, 코드플라이의 부트스트랩 4 지원기능을 통해, 부트스트랩예제를 실행해볼겁니다. 따로 세팅을 할 필요도 없고, 가장 빠르고, 편리한 방법이니 초심자들도 배우기가 편리한 방법입니다.

 

 

코드플라이 (부트스트랩 4.13 버전)

https://www.codeply.com/go/p/bootstrap_4.1.3

 

 

(현재 최신버전 부트스트랩은 4.3버전으로, 해당 코드플라이의 4.13버전과 약간의 차이가있을 수 있습니다.)

 

 

---

 

주의 : 만약 본인이 CSS의 상세 스펙에대해서 잘 알지 못한다면, 이 게시글을 이해하기는 어려울 겁니다. 그러니 기본적인 HTML과 CSS에 대한 이해를 바탕으로 한 이후에 다시 읽어보시는걸 추천합니다.

 

https://opentutorials.org/course/2039

HTML 수업 - 생활코딩

 

---

 

 

3. 부트스트랩의 CSS를 사용하는 방법

기존에 이야기했듯이, 부트스트랩은 CSS와 자바스크립트 파일을 통해 만들어진 프레임워크입니다. 그러니 일단, CSS 쪽에 대한 이야기를 해보죠. 우리는 앞으로 다음과같은 두 가지를 더 알아볼겁니다.

 

1) UI 요소 스타일 : 버튼, 폰트, 색상, 뱃지, 타이포, 진행바 등등

2) 부트스트랩 그리드 : 행과 열, 레이아웃을 잡는데 도움을 주는 기능

 

자, 이제 부트스트랩이 웹개발을 어떻게 도와주는지. 개별 도구들에 대해 이야기를 해보겠습니다.

 

 

---

 

부트스트랩의 CSS 스타일 사용법

코드플라이를 기반으로 했떤 부트스트랩 예제를 통해 이야기를 진행해보겠습니다. 일단 부트스트랩이 실제 사이트에 어떤 영향을 주는지를 확인해봐야겠죠?

 

https://www.codeply.com/go/RMPQJ3AqJn

 

 

---

 

부트스트랩의 CSS

규격 초기화 (Reboot)

 

부트스트랩의 CSS는 웹페이지의 스타일을 초기화시킵니다. 브라우저들마다 각자 다른 기본 스타일을 갖고있다는 사실은 모두 알고계실겁니다.그러니 이 스타일일들을 초기화해서, 크로스브라우징 문제를 해결하는 것이죠.

 

---

 

 

부트스트랩의 CSS

폰트

 

웹디자인에 있어서 텍스트의 가독성과 크기비례만큼 중요한것도 없을 겁니다. 그렇기에 부트스트랩에서는 자체적인 폰트 규격을 부트스트랩 4로부터 가져와 사용하게됩니다.

 

 

 

부트스트랩에서 사용되는 CSS의 개별 텍스트는 다음과같은 스타일을 갖고있습니다.

부트스트랩 4의 타이포그래피

 

---

 

 

부트스트랩의 CSS

색상

 

웹사이트에 색상이 없다면 그 누구도 좋아하지 않겠죠. 부트스트랩에서는 상황맥락에 따른 9개의 기본 색상을 제공합니다. 이런 색상들은 HTML UI 요소들에 매우 쉽게 적용할 수 있죠. 또한 각자 명칭을 갖고있기 때문에, 새로운 색상 팔레트를 만들 때에도 유용하게 사용될 수 있습니다.

 

 

또한 부트스트랩의 CSS는 여러 컨텐츠들. 테이블이나, 표, 이미지등에도 손쉽게 적용될 수 있습니다.

 

https://getbootstrap.com/docs/4.1/content/images/

Images

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

getbootstrap.com

 

 

---

 

 

부트스트랩의 CSS

UI 컴포넌트 살펴보기

 

부트스트랩의 UI 컴포넌트들에 대한 사례들을, 빠르게 한 번 훑어보도록 하겠습니다. 이런 요소들은 부트스트랩을 사용한다면, 웹페이지에 간단하게 떼어다 붙이듯 사용할 수 있습니다.

 

경고메시지 (Alerts)

 

 

 

경고메시지 (Alerts)

 

 

빵가루 (Breadcrumbs)

 

 

 

버튼 (Buttons)

 

 

 

리스트그룹과 카드 구조 (Cards and List Groups)

 

 

 

 

슬라이드 카루셀 (Carousel)

 

 

 

아코디언 형식 탭 (Collapse Accordion)

 

 

드롭다운 버튼(Dropdowns)

 

 

 

입력창 / 규격 (Forms & Inputs)

 

 

입력 그룹 (Input Groups)

 

 

기본 팝업 (Modals)

 

 

 

탭 메뉴 (tabs)

 

 

 

네비게이션 바 (Navbars)

 

 

 

페이지네이션 (Pagination)

 

 

 

 

팝오버 (Popovers)

 

 

스크롤 표기 (Scrollspy)

 

 

---

 

 

부트스트랩의 CSS

UI 컴포넌트 사용방법

 

부트스트랩의 UI 컴포넌트 사용법은 매우 간단합니다. 그냥 부트스트랩 CSS 요소를 HTML 마크업에 맞게 작성해주면 됩니다. 예를 들어서, Primary 색상의 버튼을 하나 사용한다고해보죠.

 

 

HTML과 부트스트랩 CSS간의 연결관계

 

 

위의 그림을 보면, Primary 버튼이 기본적인 색상과 다른 색으로 지정된걸 볼 수 있습니다. 그 이유는 웹페이지가 'theme.css' 파일을 통해 - 부트스트랩에 적용되었기 때문입니다. bootstrap.min.css 이후에 적용되는 테마는 - 기본적인 부트스트랩 CSS 스타일에 덮어씌워집니다. 여기서 테마에대한 커스터마이즈는 추후에 다시 설명드리겠습니다.

 

 

위에서 봤던 버튼의 속성을 좀더 자세히 살펴보면

버튼이  '.btn'과 'btn-primary' 라는 명령에 의해 스타일링이 되고있다는 것을 알 수 있습니다. 그럼 이 두가지 CSS 속성을 좀더 자세히 알아볼까요?

 

 

.btn과 / .btn-primary의 개별 CSS 속성값

 

 

여기에서, 대체 왜 버튼이 두 속성으로 나뉘어있냐고 물으신다면. 그 답은 다음과 같습니다.

 

기본적으로 부트스트랩은 기본 UI 요소를 간단하게 변형할 수 있는 형태로 설계되었습니다. (예: .btn을  .btn-danger로 변형하여 사용 가능) UI 타입을 우선적으로 적용하고, 이후에 해당 요소에대한 스타일링을 별도로 진행할 수 있다는 것이죠. 이런 설계방식은 - 부트스트랩의 CSS를 커스터마이징하기에 아주 편리한 구조로 만들어줍니다.

 

---

 

 

자, 이제 부트스트랩 UI 컴포넌트를 사용한 예제를 한번 확인해봅시다.

 

https://www.codeply.com/go/Tb6vzh4yPY

 

 

 

 

 

 

뱃지 (badge : 뱃지 선언 후, 뱃지 속성을 바로 표기)

 

 

빵가루 (Breadcrumbs : 빵가루 선언 후, 리스트 태그 형태로 추가 작성)

 

 

 

버튼 (Buttons : 버튼 적용 후 클래스를 별도로 적용)

 

 

 

카드 규격 (Cards : 카드 규격 선언 후, 텍스트 속성과, 내용에 대한 선언 필요)

 

 

입력규격 (Forms & Inputs : 입력창을 위한 라벨링 이후, from 컨트롤 선언. 이후 세부 타입 옵션을 입력)

 

점보트론 (Jumbotron : 점보트론 사용선언 후, 디스플레이 타입과 텍스트 내용을 입력)

 

페이지네이션 (Pagination : 페이지네이션 선언 후, 개별 아이템과 링크를 리스트 형태로 입력)

 

 

진행창 (Progress : 프로그레스 선언 이후, 개별속성과 옵션값을 입력)

 

---

 

부트스트랩의 CSS

부트스트랩 UI 컴포넌트를 위해 쓴 HTML 마크업과 구조가 정확한지 어떻게 확인해야하나요?

이 부분은 부트스트랩 사용시에, 약간의 노력이 필요한 부분입니다. 기본적으로 부트스트랩 CSS는 HTML 구조에 맞는 특정한 문법이 있습니다. 예를 들어 버튼 (.btn / btn.-primary)을 사용할 때, HTML 문법은 별로 어렵지 않을겁니다. 그러나 네비게이션바나, 카루셀 등의 구조들은 보다 더 복잡한 형태를 띠고 있습니다. 그렇기에 사용하기 위해 약간의 시행착오가 필요해집니다.

 

만약 더 복잡한 구조의 UI 컴포넌트를 사용해야한다면, 부트스트랩의 공식 문서를 꼭 확인하세요. 대부분 문서에는 여러 예제사례가 포함되어있습니다.

 

https://getbootstrap.com/docs/4.3/components/alerts/

Alerts

 

 

또한 코드리플라이같은 곳에서는 부트스트랩을 위한 여러 컴포넌트의 코드소스를 바로 확인할 수 있도록 도와줍니다. 여기에 나와있는 예제를 수정 / 보완하여 사용하는 것도 매우 좋은 방법입니다.

 

 

https://www.codeply.com/go/p/bootstrap_4.1.1

해당 URL에서 Components 항목을 눌러보면 여러 UI 요소들이 등장합니다. 코드소스를 그대로 사용할 수 있으니, 한번 확인해보세요.

 

 

---

 

 

4. 부트스트랩 CSS로 네비게이션 바 만들기

대부분의 부트스트랩 UI 컴포넌트들은 문서로 정리가 잘 되어있는 편입니다. 다만 네비게이션 바의 경우, 좀더 자세한 설명이 필요할 것 같군요. 네비게이션 바는 그리드와 큰 연관이 있고, 부트스트랩에서 가장 중요하고, 자주 사용되는 UI 컴포넌트이기 때문입니다.

 

 

부트스트랩 4 - 네비게이션 예제 (추후 번역 예정)

https://medium.com/wdstack/bootstrap-4-custom-navbar-1f6a2da5ed3c

Bootstrap 4 Navbar Examples

 

 

 

네비게이션 바의 컨텐츠 / 구조와 정렬

네비게이션 바에서는 부트스트랩이 지원하는 컨텐츠만을 사용해야합니다.

•   로고 / 브랜드
•   네비게이션 링크 / 버튼 / 드롭다운 버튼
•   연락 규격
•   텍스트

 

 네비게이션 바 내에 - 그리드 기반 행과 열 규격을 따로 사용하지 마세요. 네비게이션 바 내부에는 네비게이션을 위한 자체 규격에 대한 제한이 있습니다. 예를 들어 하단 예제의 ml-auto (좌측으로 자동마진 처리) 같은 클래스는 두번째 네비게이션 요소를 우측으로 정렬하기 위해 사용되었습니다.

 

---

 

부트스트랩 CSS로 네비게이션 바 만들기

브레이크 포인트 (반응형 처리 부분)

기본적으로 네비게이션 바는 모바일 규격의 작은 화면에 맞게 설계되어있습니다. 그렇기 때문에, expand 클래스를 통해 덮어씌우지않는한 - 개별 요소들이 상하로 쌓이는 구조가 되죠. 반응형 처리를 위해서 적용된 이 구문들은 총 다섯개의 포인트를 갖고있습니다.

 

• navbar-expand = 항상 펼쳐져있도록 강제하는 옵션
• navbar-expand-sm = 스몰 해상도 + 576px보다 큰 경우에 펼쳐짐
• navbar-expand-md = 미디엄 해상도 + 768px보다 큰 경우에 펼쳐짐
• navbar-expand-lg = 라지 해상도 + 992px보다 큰 경우에 펼쳐짐
• navbar-expand-xl = 엑스라지 해상도 + 1200px보다 큰 경우에 펼쳐짐

 

 

여기에 대한 자세한 내용은 코드플라이 예제를 참고하세요.

https://www.codeply.com/go/imngr08QRi

Codeply

 

---

 

 

부트스트랩 CSS로 네비게이션 바 만들기

밝은 테마 / 어두운 테마 배경

 

네비게이션 바는 크게 - 'navbar-light'타입과, 'navbar-dark'타입으로 나뉘어집니다. 이 두가지 타입들은 개별 브랜드와 링크, 그리고 햄버거아이콘의 색상테마에도 영향을 줍니다. 그러니 상황에 맞게 적절하게 사용하세요.

 

• 'navbar-dark' 는 어두운 색상의 배경에 어울립니다.
• 'navbar-light'는 밝은 색상의 배경에 어울립니다.

 

네비게이션 바에 색상을 부여할때에는 - bg-brimary 컬러 팔레트 등을 꼭 확인해보세요. 그렇지 않은 경우, 네비게이션바는 기본적으로 투명한 색상을 갖게됩니다.

 

 

 

부트스트랩 4 - 네비게이션 예제 (추후 번역 예정)

https://medium.com/wdstack/bootstrap-4-custom-navbar-1f6a2da5ed3c

Bootstrap 4 Navbar Examples

 

 

 

---

 

 

부트스트랩 CSS로 네비게이션 바 만들기

편리한 클래스들

 

부트스트랩은 전세계에서 사용되고있는 여러 CSS 기능들을 간단하게 클래스 선언을 통해 사용할 수 있습니다. 이 방식은 동일한 CSS를 선언하고, 또 반복해야하는 불필요한 과정을 제거해줍니다.

예를 들어서 CSS를 통해 스타일을 작성할 경우. 위의 내용을 반복적으로 작성해줘야합니다. 그러나 부트스트랩에서는 text-center라는 옵션 하나만 선언하면 충분하죠.

 

 

 

자, 이제 부트스트랩의 UI 컴포넌트를 스타일링하는 기초방법을 알게되었습니다. 다음 과정에서는 반응형 레이아웃을 지원하는 부트스트랩의 - 그리드 시스템을 알아보도록 하죠.

 

 

 

---

 

 

리플러스의 UD LAB에 대해 더 궁금하시다면, 다음 링크를 확인해보세요!

 

udlab.tistory.com/2

UD LAB - 이용안내