우선 Bootstrap이 무엇인지 알아보자!!
1. BootStrap이란?
Bootstrap은 CSS와 JavaScript로 구성된 프론트엔드 UI 프레임워크
쉽게 말하면, 반응형 디자인과 기본적인 UI 컴포넌트(버튼, 카드, 네비게이션 바 등)를 빠르게 만들 수 있도록 미리 스타일과 기능을 제공하는 라이브러리야.
특징
- 미리 정의된 CSS 클래스를 사용하여 쉽게 디자인 적용 가능
- 반응형 디자인(Responsive) 지원 (Grid 시스템 제공)
- JavaScript 기능 내장 (모달, 드롭다운, 슬라이드 등)
- 빠른 개발이 가능하지만, 디자인이 정형화되어 커스텀하려면 수정해야 함
저번 프로젝트에서는 우리 팀은 Tailwind CSS를 썻다고 한다.
BootStrap vs. Tailwind CSS
- Bootstrap: 미리 정해진 스타일이 있어서 빠르게 사용 가능
- Tailwind CSS: 클래스 단위로 디자인을 직접 조합하여 커스텀하기 편리
Vue.js랑 Bootstrap은 뭐가 다른가?
Bootstrap은 CSS/JS 기반의 UI 프레임워크,
Vue.js는 SPA(Single Page Application) 개발을 위한 JavaScript 프레임워크
내가 간단하게 이해한건 걍 CSS 편하게 쓰게 해주는게 Bootstrap, Vue.js는 뭐랄까 진짜 Spring Boot마냥 라우터를 쓰는 그형식에 맞춰 SPA개발에 임하게 해주는 JavaScript 프레임워크이다!!!
우리 팀프로젝트에서는 그러면 Vue.js와 Bootstrap을 조합해서 사용하는게 공식 기술 스택이 되지 않을까 싶다. 교과과정에서 배운것이니.
그렇다면 기본적으로 Bootstrap을 이용한 반응형 웹 페이지를 아주 간단하게 제작해보겠다.
그 전에 반응형 웹페이지가 무엇일까?
반응형 웹페이지(Responsive Web Page)란?
반응형 웹페이지란 화면 크기에 따라 자동으로 레이아웃과 스타일이 조정되는 웹페이지를 말해!
즉, PC, 태블릿, 스마트폰 등 다양한 기기에서 최적화된 화면을 제공할 수 있도록 만들어진 웹사이트야.
고마워요 GPT!!
이게 처음엔 잘 이해가 안 갔는데 100%의 의미는 화면을 꽉 채운다는 뜻이다. container 클래스를 사용할 때 만약 화면 크기가 576~768 사이일 때에는 컨테이너 요소의 크기가 540px로 고정된다는 소리이다
그렇다면 container-fluid를 하면 화면 크기가 어떻게 되든 계속 꽉채운다는 소리다.
보통은 .container를 많이 쓴다고 한다.
근데 표를 보면 container-sm이랑 container클래스랑 차이가 없어 보이지 않나?
교수님과 여쭤보고 GPT에 물어본 결과...
- 만약 container-sm이 없고 container-md부터 존재한다면, container와의 관계가 헷갈릴 수 있다
- 따라서 container-sm을 포함하는 것이 일관된 클래스 네이밍 체계를 유지하는 방법이다
- 그리고 원한다면 container-sm의 값을 바꿀 수 있으므로 조금 더 유연하게 사용이 가능하다
- 명확한 의도를 전달하기 위해!!! container-sm을 사용하면 **"이 컨테이너는 최소 sm (≥576px)에서 고정 너비를 가지는 것이 의도된 디자인"**이라는 의미를 부여할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offcanvas Accordion Menu</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
</head>
<body>
<div class="container-sm text-center text-white">
<div class="row border border-5 m-1 bg-primary">
<div class="col border-end border-5">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row border border-5 m-1 bg-primary">
<div class="col border-end border-5">
1 of 3
</div>
<div class="col border-end border-5">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
</body>
</html>
하다 보니 느낀건데 각 행과 열마다 border-5, bg-primary를 하드 코딩하는것은 말이 안된다.
분명 다른 방식으로 적용할 텐데 일단 지금은 간단하게 테스트 해보는거니 넘어가겠다.
'SKALA > Front-end' 카테고리의 다른 글
| Vue.js , v-show vs v-if 차이 (0) | 2025.03.31 |
|---|---|
| Vue.js, watch() 메소드, 사용법 (0) | 2025.03.28 |
| 비동기 작업과 콜백 지옥. Promise, async / await (0) | 2025.03.20 |
| DOM, DOM 객체 이벤트 다루기 실습 (1) | 2025.03.19 |
| Javascript 얕은 복사, 깊은 복사 (0) | 2025.03.18 |
