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

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

 

---

 

부트스트랩, 어떻게 사용해야할까? - 파트1

udlab.tistory.com/5

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

 

 

---

 

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

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

 

---

 

5. 부트스트랩 그리드란?

부트스트랩 그리드 시스템은 레이아웃을 만들기 위한 규격이며. 특히 반응형 레이아웃에 특화되어있습니다. 그렇기에 부트스트랩을 제대로 다루기 위해서는, 그리드 시스템의 동작원리를 이해할 필요가 있습니다. 그리드는 행과 열 부분에 적어도 한 개 이상의 컨테이너를 갖게됩니다.

 

 

https://getbootstrap.com/docs/4.1/layout/grid/

Grid system

 

부트스트랩 그리드는, 부트스트랩 자바스크립트나, 다른 CSS 컴포넌트 없이도 단독으로 사용이 가능합니다. 사용을 위해서는 그리드와 플렉스 클래스를 포함하는 'bootstrap-grid.css' 파일을 다운로드하여 연결시켜주기만 하면 됩니다.

이렇게 코딩을 하게되면, 하나의 커다란 컬럼이 좌우너비로 생겨나는걸 확인할 수 있습니다.

 

부트스트랩의 단일 칼럼 레이아웃

 

 

두개의 칼럼영역

 

부트스트랩의 2단 칼럼

 

 

3단 칼럼영역

 

부트스트랩의 3단 칼럼

 

 

 

실제로 부트스트랩에서 사용되는 칼럼 영역은, 위의 시안처럼 회색 외곽선을 갖고있진 않습니다. 그냥 보기 편하시라고 추가해둔것이니, 오해가 없길 바랍니다. 자세한 레이아웃은 코드플라이의 에제를 확인해보세요

 

예제 링크

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

 

 

 

 

기본적인 그리드 컨셉은 이해하기가 그리 어렵지 않습니다. 다만 여기서 몇가지 질문들이 있을 수 있을것 같네요.

•  왜 컨테이너가 굳이 필요한가요?
•  개별 칼럼을 다른것들에 비해 혼자 더 넓게 만들순 없나요?

 

이런 질문들에 대해서는 추후에 다시 대답을 드리도록 하겠습니다. 하지만 우선, 그리드를 사용하는데 있어. 가장 중요한 내용들을 먼저 이야기하도록 하겠습니다.

 

---

 

 

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

 

대부분 부트스트랩 사용에 어려움을 겪으시는 분들은, 그리드의 기본규칙이나 속성을 잘 알지 못하기 때문인 경우가 많습니다. 그러니 다음 내용을 천천히 읽어보세요. 분명 금방 이해하실 수 있을 겁니다.

 

 

---

 

부트스트랩 그리드란?

그리드의 법칙

 

1. 개별 칼럼은 항상 좌우 행에 직접 연결된 - 자식 개체여야합니다. 
2. 행은 오로지 칼럼 단위만 포함할 수 있습니다. 
3. 행은 언제나 컨테이너 안에 배치되어야합니다

 

이 규칙들은 매우 단순하지만, 가장 중요한 것들입니다. 칼럼과 행은 항상 함께 있어야하며, 다른것들이 포함되어서는 제대로 동작할 수가 없습니다. 굉장히 단순한 문제인것 같지만, 여기에 관련된 문제로 도움을 청하는 경우를 자주 봐왔던 것 같습니다. 그러니 부디, 이 세가지 규칙을 항상 엄수해주세요. 

 

---

 

부트스트랩 그리드란?

그리드를 제대로 사용하기

 

컨테이너

기본적인 예제에서는, 컨테이너가 개별 행들을 감싸고 있다는걸 알 수 있습니다. 컨테이너는 기본적으로, 부트스탤 최상위 오브젝트 입니다.

 

 

칼럼과 행과는 다르게 - 컨테이너는 다른 요소들이나 컨텐츠들을 포함할 수 있습니다. 컨테이너라는 규격은 부트스트랩의 여러 규격을 위한 공통 규격이기 때문입니다.

 

언뜻 보면, 컨테이너가 불필요해보인다고 생각하실수도 있을겁니다. 하지만 컨테이너는 개브라우저의 뷰포트상 UI 요소들을 좌우로 정렬하는데에도 사용됩니다.

 

 

뷰포트 : 브라우저 윈도우 내부에서, 화면을 표시하는 영역

 

---

 

부트스트랩 4는 2가지 타입의 컨테이너를 갖고있습니다. 제가 사용한 예제에서는 'container'라는 규격만 사용했지만. 이외에도 '좌우 최대 너비를 가진 'container-fluid'라는 규격도 있답니다. 그러니 원하는 내용을 골라서 사용하세요.

 

https://getbootstrap.com/docs/4.0/layout/overview/#containers

Overview

 

 

1. 고정된 좌우너비 + 화면상에서 중심정렬된 레이아웃

 

 

 

2. 전체 너비를 포함하는 최대 좌우너비의 컨테이너 

 

 

컨테이너는 현재 브라우저 해상도에 맞게, 반응형으로 스케일이 변경됩니다. 그렇기에  화면 크기에 따라, 좌우 너비가 최대범위까지 늘어나게되죠.  

 

 

컨테이너는  그리드 컬럼과 행 뿐 아니라,어떤 컨텐츠건 담을 수 있습니다. 그러나 그리드의 컬럼과 행을 사용할 경우, 항상 컨테이너 안에 들어가있어야합니다. 여기에 관련된 내용은 예제를 참고하세요

 

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

 

그리드를 사용할 경우, 최소 한개 이상의 행이 컨테이너 안에 배치되어야합니다. 이외에도 여러개의 행을 컨테이너 안에 넣을 수 있습니다. 이렇게 만들어진 컨테이너는 한 화면에서 여러개를 사용할 수도 있습니다. 만들고자하는 구조에따라서 여러가지로 변형이 가능하니, 일단은 너무 신경쓰지 않도록 합시다.

 

행은 기본적으로 -15px의  좌우 마진을 갖고있습니다. 또한 컨테이너의 패딩값은 15px로, 마진의 음수값에 대비하게 되어있죠. 그렇기 때문에 만약 컨테이너 안에 행을 넣지 않을 경우, 별도로 존재하는 행은, 기본적으로 자신의 영역을 넘어서 튀어나오는 형태가 됩니다. 이 경우 좌우로 움직이는 스크롤 영역이 생겨버리게되죠.

---

 

 

부트스트랩 그리드란?

행과 열 (행과 칼럼)

 

부트스트랩을 사용하면서 자주 느끼게되는 것이. '.row' 함수는 사실 row라는 명칭이 아닌 - 다른 것으로 명명되었으면 더 좋았을듯 합니다. 이 'row라는 명칭은 - 우리가 일반적으로 알고있는 상식적인 '행'이란 내용과 자주 헷갈리게되기 때문입니다. (사실상 이 행은 우리가 알고있는 행열의 개념이 아니라는 이야기입니다.)

부트스트랩의'행'은 기본적으로 - 그냥 컬럼의 연관요소입니다. 그러니 컬럼과 행을 그냥 같이 다니는 한 가족으로 생각하시면 이해가 쉽습니다. 

가끔은 칼럼의 레이아웃을 좌우로 넓게 사용해야하는 경우가 있습니다. 다만 대부분의경우는 칼럼은 위아래로 펼쳐진 길다란 규격으로 사용됩니다. 이러한 좌우 레이아웃과, 상하 레이아웃은 반응형 디자인의 핵심요소 중 하나입니다. 그렇기 때문에 '행'은 항상 1개 이상의 칼럼을 담고있어야합니다. 

 

 

 

⛔ 행 (row)에 직접적으로 개별 컨텐츠를 집어넣으면 절대 안됩니다!  

 

 

✅ 행 (row) 안에는 항상 컬럼만이 들어갈 수 있습니다. 그 다음, 컬럼 안에 컨텐츠를 넣어주세요

---

 

이외에도 '.row'에 flex 속성을 달아주는건 꽤나 중요한 일인데요. 컬럼은 플렉스박스의 자식 요소들로서 각 행 (row)와 동일한 높이값을 갖게됩니다. 플렉스박스는 기본적으로 좌우와, 상하 정렬을 모두 갖고있기 때문이죠. (우측, 중심, 하단 정렬 등등)  이 부분은 부트스트랩 4의 플랙스와 자동마진에 대한 문서를 확신해보시면 쉽게 이해할 수 있습니다.

 

https://getbootstrap.com/docs/4.1/utilities/flex/

Flex

 

 

자, 이제 행과, 컬럼에 대해 더 깊게 이해를 해볼 시간입니다. 이들이 어떻게 작동하는지. 각각 다른 타입의 컬럼은 어떤것들이 있는지. 그리고 이들이 어떤식으로 개별 레이아웃에서 사용되는지를 확인해봅시다.

 

---

 

부트스트랩 그리드란?

칼럼의 멋진 특징들

• 뷰포트상에 좌우로 나열되는 규격들을 생성해줍니다.
• 개별 칼럼은 각자 다른 너비를 갖게 만들 수 있습니다.
• 개별 화면 해상도에 따라, 각자 다른 너비를 지정할 수 있습니다.
• 좌우 정렬 레이아웃과 상하 정렬 레이아웃의 구현이 가능합니다. 
• 동일한 행 안에서는 다른 칼럼들과 위치를 바꾸는 것도 가능합니다.
• 동일한 행 안에서 - 다른 칼럼들과 동일한 높이값을 갖습니다.
• 좌우 너비를 키우거나, 줄이는 것도 가능합니다.
• 화면 해상도에 따라 좌우 레이아웃을 위해 규격으로 자동으로 묶어주고, 쌓아올리는게 가능합니다.
• 칼럼 내에 다시 행과, 칼름을 포함하는 다중폴더 구조를 지원합니다.

 

(반응형 웹을 위해서. 개별 칼럼 영역이 여러가지 형태로 변형 / 응용될 수 있다는 이야기를 해주고있네요.)

 

---

 

부트스트랩 그리드란?

부트스트랩의 칼럼에 대한 모든것

 

부트스트랩의 칼럼은 사용이 매우 간편합니다. 그저 '행'안에 직속으로 들어가는 자식요소라는것만 잊지마세요. 칼럼은 기본적으로 뷰포트 상에 좌우로 나열되는 규격을 만들어줍니다. 그리고 그 사이에 있는 공간을 - gutter (사이 간격) 이라고 부릅니다.

 

3칼럼 구조와 gutter

 

부트스트랩의 기본적인 12 칼럼 그리드 구조

 

 

실제로 칼럼 구조는 색상을 포함하고있진 않습니다. 이 역시도 - 그저 보기 편하시라고 임의로 색상을 정했다는걸 기억해주세요. 

 

컬럼은 기본적으로 12개의 칸을 갖고있지만. 이걸 다시 더 큰 규격으로 합쳐서 사용할 수도 있습니다. 예를 들어 6개의 칼럼으로 변형할수도 있죠. 

 

컬럼은 기본적으로 12개의 그리드로 나뉠 수 있는 구조인데요. 여러개의 칼럼을 합쳐서 위와같이 4, 3, 2, 1개의 큰 규격으로 사용할 수도 있습니다. 물론 응용하자면, 12개의 유닛 이상으로도 단위를 사용할 수도 있긴 합니다. 하지만 이부분은 좀 더 나중에 이야기하도록 하죠.

 

 

컬럼은 이러한 다양한 변형구조를 통해, 여러가지 응용구조를 만들 수 있습니다.

 

 

기본적으로 부트스트랩의 그리드는 12개의 유닛으로 나뉩니다. 하지만 언제나 12개여야만 하는건 아니죠. 플렉스박스 덕분에, 부트스트랩 4의 컬럼은 새로운 자동 레이아웃 개념을 지원하게 되었습니다. 유닛단위에 영향을 받지않는 컬럼의 신규기능 덕분에 레이아웃을 디자인하는게 더 자유로워졌죠.

 

 

https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns

Grid system

 

 

 

부트스트랩 4의 자동 레이아웃 그리드 예제

https://www.codeply.com/go/6rPBFWFNPS

 

 

---

 

 

자, 이제 우리는 컬럼을 좌우 레이아웃으로 만드는 방법을 알게됐습니다. 하지만 여기에서, 개별 컬럼의 크기를 줄이거나, 늘이는 방법에 대해서 잠시 이야기해보죠. 

 

컬럼은 기본적으로 화면 해상도에 따라 - 다른 좌우 너비를 갖도록 지정할 수 있습니다.

 

 

이것을 바로 반응형 디자인이라고 하는데요. 이것이 어떤식으로 동작하는지에 대해서도, 앞으로 이야기를 해보게될겁니다. 하지만 우선, 컬럼에대한 이야기를 끝내야겠죠. 기존에 12개 이상의 컬럼이 한 '행' 안에 들어가도라도 문제가없다는 이야기를 했었죠? 

 

칼럼은 기본적으로 동일 행에 좌우로 놓여있을 수도 있고. 동시에 상하로 쌓이는 구조일 수도 있습니다. 이걸 바로 상하로 쌓거나, 묶어준다고 이야기하는데요. 이러한 방식을 사용할 경우, 하나의 '행'은 12개 이상의 칼럼을 갖게됩니다. 이걸 바로 칼럼 랩핑이라고 합니다.

 

동일 행 안에 있는 칼럼은- 자신의 층 이외에도 다른 층의 12개의 유닛을 동시에 포함할 수 있습니다. 

하나로 묶인 36개의 그리드 유닛. 층별로 12개씩이라고 생각하시면 편합니다.

 

 

 

칼럼 너비와 램핑을 통해 - 여러가지 반응형 해상도에 대응할 수가 있는데요. 이걸 그리드 브레이크포인트라고 합니다.

 

칼럼은 동일 행 내에서라면 각자 위치를 변경할 수도 있습니다. 반응형 레이아웃에 적합한 방식이죠.

 

 

 

또한 컬럼은 자신의 내부에 다시 - 자신의 자식 요소로서 0 행과 칼럼들을 포함할 수 있습니다. 이걸 내부규격 나누기 (다중폴더구조, Nesting) 이라고 합니다. 

 

 

 

https://getbootstrap.com/docs/4.1/layout/grid/#nesting

Grid system

 

 

개별 컬럼은 너비를 늘이거나, 줄일 수도 있습니다. 하단의 예시는 자동레이아웃이 적용된 칼럼입니다. 

 

 

 

---

 

 

6. 부트스트랩을 통한 반응형 디자인 만들기

 

• 그리드 티어 / 미디어 쿼리, 그리고 브레이크 포인트
• 반응형 디자인에 들어가서도, 행과 컬럼에 대한 내용은 계속해서 연관이 있습니다. 

 

반응형 디자인은 - 기본적으로 좌우 화면 너비에 영향을 받습니다. 부트스트랩4는 총 5개의 반응형 브레이크포인트를 가지는데요. 위에서 다뤘던 컬럼의 예시에서 - lg / md / xl 같이. 쓰였던 명칭들이 바로 이 브레이크 포인트에 대한 표현입니다.

 

---

 

부트스트랩을 통한 반응형 디자인 만들기

반응형 디자인의 브레이크 포인트 

 

• (xs) : Xsmall 입니다. 화면 너비가 576px보다 작을 경우에 해당합니다. (기본 설정 해상도) 
• sm : Small 입니다. 화면 너비가 576px보다 클 경우에 해당합니다.
• md : Medium입니다. 화면 너비가 768px보다 클 경우에 해당합니다.
• lg : Large 입니다. 화면 너비가 992px보다 클 경우에 해당합니다.
• xl : X Large 입니다. 화면 너비가 1200px보다 클 경우에 해당합니다.

 

xsmall에 괄호를 친 이유는. XS해상도가 기본 브레이크포인트 이기 때문입니다. '-xs' 해상도는 부트스트랩의 3.0 버전대부터 - 현재의 4.0 버전에 이르기까지. 기본값으로 사용되어왔습니다. 그렇기에 실제 해상도를 지정할 때, 'col-xs-6'라고 지정하는 것이 아니라 'col-6' 라고 지정해주면 됩니다. (xs는 표기하지 않아도 됨)

 

부트스트랩은 CSS 미디어쿼리를 사용해, 반응형 브레이크포인트를 만들어냅니다. 그렇기에 각각 다른 화면 너비에서도 별도의 설정 없이 사용이 가능합니다. 예를 들어, 각자 화면 너비의 50%를 차지하는 두개의 컬럼이 있다고 해보죠.

이 두개의 'col-sm-6'라는 표기는 - 12개의 그리드 유닛 중에 각자 6개의 유닛을 사용하겠다는 의미입니다 (상당히 직관적이죠) 일반적으로 sm (small)으로 지정되는 디바이스는 768 px 정도로 설정이 되어있습니다.

 

 

 

만약 768보다 작은 해상도가 된다면. 두개으ㅢ 컬럼은 좌우 너비로 100%를 가지는, 상하로 쌓이는 구조가 됩니다.

 

다른 해상도에 대한 지정을 하지 않았음에도, 이런 형태가되는 것은. (xs) 엑스 스몰 사이즈가 기본적으로 브레이크포인트에 지정이 되어있기 때문입니다. 그렇기 때문에 컬럼의 좌우 너비를 따로 지정하지 않더라도, 50%의 좌우너비는 오로지 768 이상의 화면에서만 지정이 되게 됩니다.

 

---

 

부트스트랩을 통한 반응형 디자인 만들기

모바일 퍼스트! (모바일을 위한 레이아웃)

(xs)가 기본적인 브레이크포인트가 되면서, 아래의 두 방식은 모두 동일하게 동작하게 됩니다. (기본 설정값이기때문에, 길게 쓸 필요가 없는것)

 

 

더 큰 브레이크포인트는, 해상도 변화시 작은 프레이크포인트의 레이아웃 정보를 덮어쓰게 됩니다.

• 화면이 커질 경우 : xs (기본설정) > sm > md > lg > xl
• 화면이 작아질 경우 : xl > lg > md > sm > xs(기본설정)

 

 

마치 위의 col-sm-6의 사례처럼. 아래의 두 표현은 동일한 결과를 만들어냅니다. 

 

(이렇게 작성할 경우. 12개중 몇개의 유닛을 사용할지에 대한 내용은 그대로 승계받고. sm, md, lg등 - 개별 유닛만 달라진다는 이야기입니다. 고로 - 따로 세부 설정을 할게 아니라면. 한개의 명령어를 쓰는것만으로도 - 여러 해상도를 대응할 수 있다는 이야기죠.)

 

 

---

 

해상도에 따른 별도의 칼럼 너비를 지정하려면, 작은 해상도를 덮어쓰는 적절한 브레이크포인트를 작성해주면 됩니다. 예를 들어 sm 해상도에서는 3개의 칼럼을 사용하되. md 해상도에서는 4개의 칼럼을 사용하도록 만드는 경우는 다음과 같은 표현으로 충분합니다.

 

부트스트랩 4의 자동 레이아웃 컬럼은 - 반응형 기반으로 동작합니다. 이러한 간편함 때문에, 12개 유닛 단위를 넘게 사용하더라도, 해상도 대응에 크게 문제가 없는 것이죠. 자동 레이아웃 컬럼들은 그 어떠한 레이아웃 구성이라 하더라도, 완벽하게 대응해낼 수 있습니다. 그러나 12 유닛 단위의 그리드 칼럼은 - 항상 변형 / 응용될 수 있다는걸 기억하세요.

 

 

https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns

Grid system

 

---

 

자, 이번엔 자동 레이아웃 그리드의 예제를 한번 보죠.

3개의 동일한 너비의 칼럼이 있다고 해봅시다. 이 세개의 칼럼들은 좌우 너비에 관계없이 항상 가로로 배치가 되어있을겁니다. 그 이유는 xs 브레이크포인트가 기본으로 설정이 되어있기 때문인데요.

 

아래의 3개의 반응형 칼럼들을 보면. 이 칼럼들은 sm의 576px 해상도를 넘을때 까지, 상하로 쌓여있는 구조가 됩니다. (기본 xs가 576px까지 기본 상하로 쌓여있는 구조)

 

 

항상 브레이크포인트의 해상도 표기는 - 필요에따라 변형을 가할 수 있단걸 기억하세요. 예를 들어 두개의 칼럼을 좌측의 사이드바와, 우측에 배치된 페이지처럼 사용하려면. 아래 예제와 같은 방식으로 사용이 가능합니다. 

 

• Sidebar : 스몰 사이즈 이상부터는, 12개의 유닛들 중 2개를 활용하겠다.
• Main content : 항상, 남아있는 해상도 전체를 활용하겠다. ( 다른게 없으면 100%, 사이드바가 함께있으면 80%)
  

결과적으로 위의 설정값은. xs 해상도를 제외하면 - 사이드바와 전체 컨텐츠가 - 20 : 80 의 구조를 유지하는 레이아웃이 됩니다.

 

 

---

 

부트스트랩을 통한 반응형 디자인 만들기

반응형 레이아웃의 핵심, 브레이크포인트와 칼럼

작은 화면에서 개별 칼럼은 항상 세로로 쌓이게됩니다. 물론 본인이 'col-*' 같은 명령을 준다면 상황이 달라지겠죠. 이 명령어는 상하로 쌓이는 형태를 방지해주는 명령입니다.

또한 작은 단위에서 명령을 내린 브레이크포인트는. 더 높은 단위의 브레이크 포인트에서도 동일한 방식으로 동작하게됩니다. 그렇기에 화면 해상도에따라 다른 결과를 보여주고싶다면, 별도의 브레이크 포인트를 작성해야하죠. 그렇기 때문에

 

• col-md-6 하나만 작성하더라도 
• col-md-6 / col-lg-6 두개를 작성한 경우와 동일한 결과를 보여줍니다.

 

행(row)는 기본적으로 flex 속성을 갖고있습니다. 그렇기에 행 내의 다른 칼럼들은 항상 동일한 높이값을 갖게되죠. 좌우/상하 레이아웃에서는 - 자동 마진을 사용하거나, 플렉스 박스(flexbox)의 align-tiems 이나 justify content를 사용해도 문제가 없습니다.

 

 

Auto Margin의 경우

https://getbootstrap.com/docs/4.1/utilities/flex/#auto-margins

 

Justify Content의 경우
https://getbootstrap.com/docs/4.1/utilities/flex/#justify-content

 

---

 

7. 부트스트랩에서 자바스크립트 사용하기

자, 이번에는 부트스트랩에서 쓰이는 자바스크립트에 대한 내용을 이야기해볼겁니다.

부트스트랩의 문서를 살펴보면, UI 컴포넌트의 문서의 대부분이 스타일링된 CSS 컴포넌트에 대한 내용이라는걸 알수 있습니다. CSS는 기본적으로 스타일을 꾸미는 용도로 사용되지만, 자바스크립트는 이들을 동작하게 하는 용도입니다. 

일부 부트스트랩의 UI 컴포넌트들은, CSS 기반의 규격과 스타일링만을 지원합니다. 기본적으로 자바스크립트를 기반으로한 규격이 아닌 상태입니다. 예를 들어 기존에 보았던 뱃지나, 빵가루, 버튼, 카드규격, 입력창, 점보트론, 페이지네이션 등은 - 자바스크립트 기반의 규격을 지원하지 않습니다. 이러한 규격을 제외한 다른 규격들은 - 자바스크립트를 통한 변형이나 / 포매팅을 지원합니다.

 

Modals (팝업창)

https://getbootstrap.com/docs/4.1/components/modal/

Modal

 

 

Carousel (카루셀)

https://getbootstrap.com/docs/4.1/components/carousel/

Carousel

 

 

 

Collapse (열리고 닫히는 규격)

https://getbootstrap.com/docs/4.1/components/collapse/

Collapse

 

 

Nav Bar (네비게이션바)

https://getbootstrap.com/docs/4.1/components/navbar/

Navbar

 

 

Popovers (팝오버)

https://getbootstrap.com/docs/4.1/components/popovers/

Popovers

 

 

Scrollspy (스크롤 영역 시각화)

https://getbootstrap.com/docs/4.1/components/scrollspy/

Scrollspy

 

 

Tooltips (툴팁)

https://getbootstrap.com/docs/4.1/components/tooltips/

Tooltips

 

 

또한 이러한 규격들을 지원하기 위해서, 부트스트랩은 1세대 자바스크립트 라이브러리인. jquery를 필요로합니다. 부트스트랩이 자바스크립트 기반의 jquery 플러그인을 통해 만들어졌기 때문이죠. 이러한 자바스크립트 기반의 컴포넌트들을 다루는 방식은 크게 두가지가 있습니다.

 

---

 

부트스트랩에서 자바스크립트 사용하기

데이터 속성값을 통해, UI 컴포넌트 다루기

 

 

자바스크립트 컴포넌트를 다루기위한 일반적으로 자주 사용되는 방식은, 데이터 속성값을 통한 방식입니다. 이러한 방식은 추가적인 자바스크립트나, jquery 코드를 필요로하지 않고, 내부의 속성값만 조금 변경해주면 동작하는 형식입니다. 

프리셋 형태의 컴포넌트 속성값들

 

 

---

 

부트스트랩에서 자바스크립트 사용하기

jquery 코딩을 통해 UI 컴포넌트 다루기

 

자바스크립트 컴포넌트를 다루기위한 또다른 방식은. jquery를 이용하는 방식입니다. jquery의 선택자나 요소들, 문법에 맞는 형식으로 - 개별 컴포넌트들을 커스터마이징 할 수 있습니다. 

jquery 코딩을 통해 기능을 건드리는 방식

 

 

 

이외에도 개별UI 요소들의 문서 하단을 보면 - jquery 코딩을 통해 다룰 수 있는 내용들이 표기되어있으니, 참조하시면 됩니다.

예시 : 버튼 UI의 jquery 기반 정보

 

---

 

부트스트랩의 개별 UI 컴포넌트 옵션은 항상 데이터 속성과 함께 연결되어있습니다. 그렇기에 대부분의 UI 컴포넌트들은 자동으로 부트스트랩의 'data-toggle="..." ' 와 같은 속성값이나, 클래스와 연결되어있습니다. 그러나 일부 UI 컴포넌트들은 이와 다른 경우가 있는데요. 그 두가지는 바로 popover와 tooltip 입니다. 이 두가지 UI 컴포넌트는 항상 직접 - jquery를 통해 인식을 시켜줘야합니다.

 

popover와, tooltip 컴포넌트 예제

 

자바스크립트 기반의 UI 컴포넌트를 사용할 때에는, 항상 공식 문서의 UI 설명란을 확인하는 것이 좋습니다. 그러니 제 3사 (써드파티)의 튜토리얼. 특히 W3 Schools같은 곳의 설명은 참조하지 않는 편이 낫습니다. 공식문서가 아닌 튜토리얼들은 버전업에 따라 너무 쉽게 내용이 달라지거나, 지원이 종료되는 경우가 많기 때문입니다. 이런 튜토리얼을 그대로 따라했다가는 곤란한 상황을 겪기에 딱 좋습니다.

 

https://medium.com/wdstack/top-10-bootstrap-4-answers-50d8d73d95df

Top 10 Bootstrap 4 Answers

 

 

---

 

 

8. 부트스트랩을 커스터마이징하는 방법

 

부트스트랩을 원형 그대로 사용하게되는 경우는 많지 않을겁니다. 그렇기에 스타일이나, 외형을 변경해야하는 경우가 종종 발생하죠. 특히 색상 팔레트나, 폰트, 둥글림 처리 등등의 내용들은 자주 변경될 수 있는 것들이죠. 이외에도 반응형 레이아웃을 위한 브레이크 포인트나, 그리드의 gutter(칼럼 사이의 간격), 칼럼의 그리드 갯수 같은 것들도 변형이 가능합니다. 

 

일반적으로 부트스트랩을 커스터마이징하는 방법에는 크게 두가지 방법이 있습니다.

 

---

 

부트스트랩을 커스터마이징 하는 방법

CSS를 통해 덮어씌우기

원활한 유지보수를 위해, CSS 커스터마이징은 별도의 custom.css 파일을 통해 진행하는 편이 낫습니다. 그렇기에 bootstrap.css 원형 파일은 그대로 유지하는것이 안전하죠. 예를 들어 CSS 를 덮어씌우는 방식은 다음과 같습니다.

 

말 그대로, 변형이 필요한 요소값들을 추가하여, 스타일 시트를 소스를 하나 더 추가해주면 됩니다. 예를 들어 - 부트스트랩의 기본 스타일인 버튼과, 카드 구조 등의 둥글림 처리를 없애고싶다면 어떨까요? custom.css 파일을 사용한 예제를 한번 확인해봅시다.

 

 

이렇게 기본적인 방식으로. 스타일링을 제거하거나, 변형할 수 있습니다.

 

CSS 추가 설정은 항상 추가적인 CSS 클래스 설정에 의해 덮어씌워지게 됩니다. 그렇기에 부트스트랩의 개별 클래를 덮어쓰는 코드를 추가하지 않은 이상, 별도로 - !important 같은 옵션을 따로 줄 필요가 없습니다.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity

 

---

 

부트스트랩을 커스터마이징 하는 방법

SASS를 통해 커스터마이징하기

 

만약 본인이 SASS에 익숙하고, 이런 방식을 꼭 써야한다면. 부트스트랩을 custom.scss 파일을 통해 커스터마이징 할 수도 있습니다. 다음 문서를 확인해보면, SASS를 통해 부트스트랩을 커스터마이징 하는 방식이 있으니. 한번 확인해보세요.

https://getbootstrap.com/docs/4.1/getting-started/theming/

Theming Bootstrap

 

다만 이 문서는 기본적으로 SASS를 사용하는 큰 틀만 알려줄 뿐이기 때문에. 본인의 상황에 맞는 상세한 메뉴얼을 제공하고있지는 않습니다. custom.scss를 사용할 경우에 발생할 수 있는 여러 문제들은, 본인이 직접 해결해야합니다.

---

 

1) 부트스트랩의 SASS 폴더 구조는 별도로 관리해야한다

SASS를 통한 커스터마이징은 부트스트랩 scss 파일과 별도로 만드는것이 좋습니다. 별도로 만들어진 scss 파일은 부트스트랩의 소스 자체에는 그 어떠한 영향도 미치지 않기 때문이죠. 그렇기에 유지보수에 매우 유리한 구조가 됩니다.

scss 폴더 내에는 존재하되, 부트스트랩의 기본 scss의 폴더와는 별도의 위치에 배치하는것을 추천합니다

 

 

 

 

2) 부트스트랩의 SASS는, 변형된 내용을 부트스트랩 내부로 불러와야한다.

부트스트랩에서 SASS를 통한 커스터마이징은, 부트스트랩파일을 덮어씌우는 과정이 필요합니다. 일반적으로는 varibles.scss 파일 같은것 하나만으로도 충분하겠지만. 상황에 따라 복잡한 커스터마이징의 경우는. functions, mixins 같은 부트스트랩 파일을 불러와 - 변형을 가해야합니다. 또한 변형 이후에는 항상 @import "bootstrap" 명령어를 통해, 변형된 내용을 부트스트랩 내부로 불러와줘야합니다. 

@import로 기능을 불러온 이후, 변형을 가하고, 다시 @import로 부트스트랩에 전송하는 형식

 

 

 

https://getbootstrap.com/docs/4.0/getting-started/theming/#importing

Theming Bootstrap

 

이외에도 스타일링을 포함하여 - 부트스트랩에는 없는 클래스를 추가할수도 있습니다.

.row에 신규 클래스인 .row-dark와, 그 스타일값을 생성하는 경우에 대한 예제

 

---

 

3) SASS를 통한 수정이 제대로 동작한다면, CSS 결과창에도 덮어씌우기가 진행되어있을 겁니다. 그러니 @import 기능이 동작하지 않을 경우, 항상 내부 소스 주소들을 확인해주세요.

SASS를 통해 변형이나, 덮어씌우기가 가능한 요소들은 다음 내용을 참조해주세요

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

twbs/bootstrap

 

이외에도 SASS를 통해 전역으로 적용할 수 있는 예시들이 있으니, 확인해보시기를 추천합니다.

https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options

Theming Bootstrap

 

 

SASS를 통한 커스터마이징을 사용해야할 때는, 작업이 끝난 후 항상 @import "bootstrap" 명령어를 넣는걸 잊지마세요. 이 구문이 빠져있으면 커스터마이징은 절대로 동작하지 않습니다. 

 

---

 

SASS가 동작하는 단계를 다시 정리해보면 다음과 같습니다.

1.  bootstrap/variable.scss의 내용이 동작합니다. 이후 SASS를 통해 작성한 내용이  custom.scss파일을 생성하게됩니다. 
2. 이후에 별도로 작성한 커스텀값들이 준비되면. bootstrap/variable.scss에 담겨있는 내용들에 덮어씌워집니다.
3. 부트스트랩은 @import "bootstrap" 명령을 통해 - SASS 컴파일러가 진행한 내용을 정확한 CSS로 변경하여 - 부트스트랩의 기본 형태와, 커스텀 내용에 덮어씌워집니다. 

(결국 SASS를 통해 부트스트랩을 커스터마이징 하는게 어려운 가장 큰 이유는 - SASS 컴파일러가 부트스트랩의 기본 CSS를 건드리기 때문이라는걸 알 수 있네요.)

 

---

 

부트스트랩을 커스터마이징 하는 방법

부트스트랩의 커스텀 테마를 만드는 방법

 

 

SASS를 통한 부트스트랩의 커스터마이징은 결코 쉬운 과정이 아닙니다. 부트스트랩의 정확한 개별 요소를 잘 찾아내어 수정할 수 있는가에 그 성패가 달려있기 때문이죠. 그렇기에 이번에는 좀 더 쉬운 방식을 이야기해보려합니다. 

제가 만든 Themestr.app 이라는 서비스는 부트스트랩 4를 위한 커스텀 테마를 만들어줍니다. 만약 본인이 부트스트랩 테마를 만들고싶은데, SASS를 모른다면, 한번 사용해보세요.

https://themestr.app/

Themesrt는 시각적인 요소들을 통해 부트스트랩의 커스터마이징 과정을 아주 쉽게 만들어줍니다. 이 서비스에는 기본적은 스타터 테마들도 지원하고있으니, 여러 팔레트를 수정하느라 시간을 써야할 필요도 없습니다. 테마작업이 끝나고나면, 커스텀 SASS파일을 다운받거나, CSS로 이뤄진 커스텀 테마를 다운받을 수 있습니다. 만약 본인이 SASS 커스터마이징 방식을 사용하고싶다면, themestr 서비스로 만든 custom.scss를 통해 위의 과정을 거치시면 됩니다.

(초심자들도 쉽게 테마를 만들 수 있게, 약 4~5단계만 거치면 테마가 하나 만들어지네요. 그리고 해당 내용을 다시 css와 UI KIT 형태로 다운받을 수도 있습니다. 무료서비스인지라 한번쯤 건드려보시기를 추천드립니다.)

 

 

 

themestr 서비스에 대한 튜토리얼

https://www.youtube.com/watch?v=9XVGnyKTDwY

 

 

---

 

부트스트랩을 사용하는데 도움이되는 자료들

 

여기 부트스트랩을 사용하는데에 도움이될만한 글들과, 자료들을 좀 모아왔습니다. 필요하다면 한번쯤 확인해보시기를 추천합니다.

 

부트스트랩 공식 사이트

https://getbootstrap.com/

Bootstrap

 

 

 

코드플라이 - 부트스트랩 빠른 코딩 / 예제들

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

Codeply

 

https://www.codeply.com/bootstrap-4-examples

Bootstrap 4 Examples

 

부스스트랩 사용 : CDN 방식

https://www.bootstrapcdn.com/

Quick Start

 

 

부트스트랩 4 예제들

https://medium.com/wdstack/bootstrap-4/home

Bootstrap 4 Examples – WDstack – Medium

 

 

 

부트스트랩 4 치트시트

https://hackerthemes.com/bootstrap-cheatsheet/

Bootstrap 4 Cheat Sheet - The ultimate list of Bootstrap classes

 

부트스트랩 테마 빌더 (2가지)

https://bootstrap.build/

https://bootstrap.build/

 

https://themestr.app/

Bootstrap Theme Builder and Customizer - Themestr.app

이외에도 웹 상에는 다양한 부트스트랩 관련 자료들이 많지만, 그들중에 가장 유용한 자료를 엄선하여 올려두었습니다. 웹 상에는 여러 부트스트랩4 튜토리얼들과, 게시글들이 있지만 항상 버전을 확인해서 - 유효한 정보인지를 확인해야합니다. 특히나 W3schools처럼 정보가 불확실한 곳은 피하시는게 좋습니다.

 

 

---

 

이제 끝입니다! 

마침내 모든 이야기가 끝났군요. 시간을 들여 읽어주셔서 감사합니다. 이 글을 통해 여러분이 부트스트랩을 어떻게 사용하면 되는지를 좀더 이해하게 되셨기를 바랍니다. 여러분들의 피드백이 상당히 기대되네요. 이 게시글은 부트스트랩 테마 공식 가이드에도 포함된 글입니다. 부디 부트스트랩에 대해 접하게되는 좋은 기회가 되었기를 바랍니다.

 

 

---

 

 

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

udlab.tistory.com/2

UD LAB - 이용안내