본문 바로가기
Programming/Website

[Website] 부트스트랩 (Bootstrap)

by goatlab 2023. 6. 1.
728x90
반응형
SMALL

부트스트랩 (Bootstrap)

 

부트스트랩은 웹 개발자들이 빠르게 반응형 웹사이트를 만들 수 있도록 도와주는 오픈 소스 프레임워크이다. 부트스트랩 5는 HTML, CSS, JavaScript를 사용하여 제공되며 다양한 레이아웃, 그리드 시스템, 컴포넌트 등을 제공하여 웹 개발을 손쉽게 만들어 준다.

 

  • jQuery 제거 : 부트스트랩 5에서는 jQuery를 사용하지 않는다. 대신, Vanilla JavaScript로 작성된 코드로 대체되어 더 가볍고 빠른 웹사이트를 제공한다.
  • 사용자 정의 및 확장성 : 부트스트랩 5는 사용자 정의가 더욱 쉽도록 설계되었다. 개발자들은 SCSS 변수를 활용하여 기본 스타일을 쉽게 변경할 수 있으며, 더 많은 유틸리티 클래스를 통해 디자인을 빠르게 조정할 수 있다.
  • 개선된 그리드 시스템 : 부트스트랩 5는 업데이트된 그리드 시스템을 제공하여 레이아웃 구성이 더욱 간편해졌다. 새로운 xxl 그리드 브레이크포인트가 추가되었고, 가변 그리드 간격, 열 정렬, 그리드 거터를 사용할 수 있다.
  • 업데이트된 컴포넌트 : 부트스트랩 5에서는 기존 컴포넌트들이 개선되고 새로운 컴포넌트들이 추가되었다. 예를 들어, 네비게이션 바, 버튼, 카드, 모달 등의 컴포넌트가 업데이트되었으며, 새로운 Offcanvas 컴포넌트가 추가되었다.
  • RTL (오른쪽에서 왼쪽) 지원 : 부트스트랩 5는 오른쪽에서 왼쪽(RTL) 언어를 지원한다. 이를 통해 아랍어, 히브리어 등 RTL 언어를 사용하는 사용자들을 위한 웹사이트를 쉽게 제작할 수 있다.
  • 폼 컨트롤 개선 : 부트스트랩 5는 폼 컨트롤을 개선하여 보다 일관성 있는 디자인과 더 나은 접근성을 제공한다.
  • 새로운 아이콘 라이브러리 : 부트스트랩 5는 새로운 아이콘 라이브러리인 Bootstrap Icons를 도입하였다. 이를 통해 1,000개 이상의 SVG 아이콘을 사용할 수 있으며, 웹 페이지의 디자인을 더욱 풍부하게 만들 수 있다.
  • 개선된 접근성 : 부트스트랩 5는 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 가이드라인에 따라 접근성을 개선했다. 이를 통해 시각장애인이나 기타 장애를 가진 사용자 들도 웹사이트를 이용할 수 있도록 도와준다.
  • 새로운 문서화 및 예제 : 부트스트랩 5에서는 개선된 문서화와 새로운 예제들을 제공한다. 개발자들은 이를 통해 더 빠르게 부트스트랩을 배우고 웹 페이지를 구축할 수 있다.
  • 새로운 커스텀 빌드 도구 : 부트스트랩 5는 새로운 웹 기반 커스텀 빌드 도구를 제공한다. 개발자들은 이 도구를 사용하여 필요한 컴포넌트와 기능만 선택하여 빌드할 수 있으며, 결과적으로 더 작은 파일 크기와 더 빠른 로딩 시간을 달성할 수 있다.

 

기본 템플릿 구조

 

부트스트랩을 사용할 때 기본 템플릿을 사용하면 시작이 쉽다. 기본 템플릿은 HTML5 문서 구조와 함께 부트스트랩의 CSS 및 JavaScript 파일을 불러오는 링크를 포함한다.

 

CSS 및 JavaScript 연결

 

부트스트랩의 기능을 사용하려면 CSS 파일과 JavaScript 파일을 연결해야 한다. 부트스트랩의 CDN 링크를 사용하거나, npm을 사용하여 로컬에 파일을 다운로드 받아 사용할 수 있다.

 

html

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
        <title>부트스트랩</title>
    </head>
    <body>
        <h1>안녕하세요</h1>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
        </script>
    </body>
</html>

728x90
반응형
LIST
저작자표시 비영리 변경금지

'Programming > Website' 카테고리의 다른 글

[Website] 컴포넌트 (Component) (1)  (0) 2023.06.05
[Website] 레이아웃 / 그리드 시스템  (0) 2023.06.05
[Website] Columns / TextBox / Flexbox  (0) 2023.05.26
[Website] 트랜지션 (Transition)  (0) 2023.05.26
[Website] 그림자 (Shadows)  (0) 2023.05.26

관련글

티스토리툴바