목차
- 서론
- Bootstrap의 정의
- Bootstrap의 특징 및 장점
- 본론 : Bootstrap의 Docs
- Bootstrap 사용법
gridfluid- grid options
offset-md<kbd>- color
imgtablebtn_form+btn_groupcardmodal- menu
carousel- sweetalert
- daypicker
- toastui
select- font-awesome
- 결론
서론
1. Bootstrap의 정의
부트스트랩은 개발자가 보다 효율적이고 빠르게 작업 할 수 있도록 지원해주는 웹기반 프레임 워크로, 마치 레고를 만드는 과정과 같이 만들어진 코드들을 조합하여 홈페이지를 만든다고 생각하면 된다.
2. Bootstrap의 특징 및 장점
우선적으로, 개발자의 작업 속도가 대폭 상승된다. 이미 만들어진 코드를 조합하는 것이기에 별도의 CSS 작업없이 오직 HTML만으로 결과물을 낼 수 있어 상당히 유용하다는 장점이 있다.
다만, 해당 프레임워크의 탬플릿은 거의 유료이기 때문에 어느정도 투자를 해야하며, 개발자의 주관이 섞인 커스터마이징에 다소 제약이 있을 수 있다는 단점이 있다.
하지만, 투입대비 프레임워크의 생산성이나 속도면에서 훨신 월등하며, 자체 제작을 원한다면 Tailwind라는 프레임워크를 쓰는 것을 추천한다.
이제부터 설명할 부트스트랩의 Docs들은 암기가 필수는 아니지만, 외워두면 더욱 좋기에 프로젝트를 많이 만들며 익혀두도록 하자.
본론
1. Bootstrap 사용법
설명에 앞서 부트스트랩 사용방법은
<head>와<body>에 각각 부트스트랩에서 제공하는 링크들을 작성하는 것에서부터 시작한다. 이는 웹기반의 프레임워크이기에 부트스트랩 데이터저장소에서 정보를 끌어다 사용하기 때문이다.
또한 기능을 의미하는 Docs를 사용하기 위해서는, 해당 Docs에 class를 주는 것이 특징이다.(ex,class="container")
- head :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">- body:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
2. grid
부트스트랩의 레이아웃은 1행에 기본 12개의 열이 들어가는 것을 숙지해둬야한다. 그리고 CSS의 그리드와 유사하게 부모요소에
container가 필요하지만, 그와 달리, 부모요소 바로 아래 행이 오고 그 아래 열이 들어간다는 다소 특이한 특징이 있다.<div class="container"> <div class="row"> <div class="col-md-4 b">hello</div> <div class="col-md-4 b">hello</div> <div class="col-md-4 b">hello</div> </div> </div>앞서 언급한대로 1행에 12개의 열이 들어가기 때문에, 위 예시와 같이 요소를 3개 만들고 싶으면 12 / 3 = 4 즉, 4를
class="col-md-n"n에 줘야한다. 참고로 예시의 class b는 스타일 속성을 위해 두번째 클래스를 만든 것이다.
또한 grid에 여러 행을 주고 싶을때, 간단하게 container안에만 나열시키면 된다. 하지만, row를 늘리는 방식으로 작업하는 것이 좋은데, 이는 row까지 없애면 잘못하다 ui가 깨질 우려가 있기 때문이다.<div class="container"> <div class="row"> <div class="col-md-3 b">hello</div> <div class="col-md-3 b">hello</div> <div class="col-md-3 b">hello</div> <div class="col-md-3 b">hello</div> </div> <div class="row"> <div class="col-md-4 b">hello</div> <div class="col-md-4 b">hello</div> <div class="col-md-4 b">hello</div> </div> <div class="row"> <div class="col-md-6 b">hello</div> <div class="col-md-6 b">hello</div> </div> </div>
3. grid-fluid
grid안에 들어갈 컨텐트를 왼쪽 정렬 및 사이즈 조절을 해주는 Docs로 CSS의
position: absolute;와 유사하다.<div class="container-fluid"> <div class="row"> <div class="col-md-4 b">hello</div> <div class="col-md-4 b">hello</div> <div class="col-md-4 b">hello</div> </div> </div>
4. grid options
부트스트랩은 반응형까지 고려하여 만들어진 프레임워크로, col 속성값에 추가하여 반응형을 관리 할 수 있다는 특징있다.
<div class="col-md-3 col-sm-12 b">hello</div>위 예제에서 md-3는 768px 이상부터 4열씩 차지하겠다는 것을 의미하고, sm-12는 576px 이상부터 1열씩 차지하겠다는 것을 의미한다.
5. offset
행을 비워두겠다는 것을 의미하는 독스로 그리드 옵션 앞에 작성한다.
<div class="col-md-3 offset-md-3 b">hello</div>6.
<kbd>키보드 단축키와 같이 키보드의 자판을 나타내고 싶을 때 사용한다.
<kbd>Ctrl + k</kbd>
7. color
색상을 입히는 것으로 버튼과 텍스트에 사용하며, 사용 예시는 GitPage를 참고하자.
8. img
이미지의 경우, 자신이 갖는 크기가 있기 때문에 열에 맞춰주는
fluid와 함께 작성해줄 것을 권장한다.<img class="img-fluid rounded-circle" src="./a.jpg" alt="제주oooo">참고로, 이미지 독스 옆에 작성한 것은 이미지의 테두리와 모양을 조절한 것으로, 아주 빈번하게 사용된다.
9. table
<table class="table table-dark table-striped table-hover">표를 생성하는 독스로 앞에서부터 형태, 색상, 패턴, 기능을 나타낸다.
10. btn_form
각종 버튼들과 제출양식에 사용할 폼들이 들어있는 GitPage를 공유하는 것으로 설명을 대체한다.
다만,btn-group은 알아둬야 하는데, 이는 일정간격으로 벌어지는 버튼을 붙여놓는 특징이 있다. 하지만, 그렇다고 하나의 버튼이 되는 것이 아니라 단순하게 버튼간의 간격이 좁혀진다는 것을 의미한다.<div class="btn-group m-3">
11. card
CSS의 article과 비슷하게 컨텐츠를 꾸며줄 수 있는 공간을 제공하는 것이다.
<div class="col-md-3 mt-4"> <div class="card" style="width: 18rem;"> <img src="./a.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>참고로 이는 col, 즉, 열 안에 들어가야하는 요소이기 col안에 작성한다
12. mordal
버튼을 누르면 화면에 추가적으로 화면이 뜨는데, 이를 모달 창이라고 한다. 주로 버튼과 함께 사용한다.
사용 예제는 VScode -> Bootstrap을 참고.
13. menu
홈페이지에 상단에 있는 메뉴를 나타내는 독스로, 클래스는
navbar를 사용하여 나타낸다.
사용 예제는 VScode -> Bootstrap을 참고.
14. carousel
홈페이지에 화면을 전환시키는 배너를 의미하며, 클래스는
carousel를 사용한다.
사용 예제는 VScode -> Bootstrap을 참고.
15. sweetalert
Bootstrap을 사용할 때, 모달창을 좀 더 역동적이고 화려하게 구현하고 싶을 때 사용하는 프레임워크로 sweetalert 홈페이지에 들어가 사용하면 된다.
16. daypicker
달력으로 입력하고 싶은 연도, 월, 일을 기록할 수 있는 기능으로, 국가별로 날짜를 기록하는 관습이 다르기 때문에 이점에 유의하며 사용해야 한다.
자세한건 VScode -> Bootstrap을 참고.
17. toast ui
NHN에서 개발한 마크다운을 기반으로 한 Wysiwyg에디터의 일종으로, 현재 가장 많이 쓰이며 추천받고 있다. 여기서 Wysiwyg에디터는 문서를 HTML상에 편하게 작성하고 편집할 수 있도록 도와주는 에디터를 의미한다.
사용방법은 toast ui 홈페이지에 들어가, example들 중 마음에 드는 것을 선택하여 HTML, JavaScript 소스와 toast ui 라이브러리에 접근할 CDN코드를 받아와 사용한다.
18. select
여러 항목중 원하는 것을 고르는데 사용하는 선택지를 만드는데 사용하며, 경우에 따라 여러방법으로 응용 할 수 있다.
<select class="selectpicker"> // 가장 평범한 select <option>A</option> <option>B</option> <option>C</option> </select><select class="selectpicker" multiple> // 항목을 여러개 선택할 수 있는 select <option>A</option> <option>B</option> <option>C</option> </select><select class="selectpicker" data-live-search="true"> // 항목이 많을 경우, 항목을 입력하여 찾을 수 있게 하는 select <option>A</option> <option>B</option> <option>C</option> </select><select class="selectpicker" multiple data-selected-text-format="count"> // 여러 항목을 선택할 경우, 항목을 넘버링 시키는 select <option>A</option> <option>B</option> <option>C</option> </select>
19. font-awesome
보다 다양한 아이콘 사용이 필요할 때, font-awesome홈페이지에서 제공하는 CDN코드를 이용한다. 양식은
img와svg를 많이 사용한다.
결론
Bootstrap은 필수는 아니지만 배워두면 충분히 스팩으로 사용할 수 있으며, 업무의 효율성을 극대화 시키기 때문에, 이를 이용한 프로젝트를 만들어 포트폴리오에 추가하는 것을 적극 권장한다.
