CSS ⑨ Bootstrap(부트스트랩)

부트스트랩?

Twitter에서 개발한 HTML, CSS, JavaScript로 이루어진 오픈 소스 프레임워크 입니다.
웹 페이지 레이아웃, 버튼, 폼, 타이포그래피 등의 다양한 UI 컴포넌트를 쉽게 구현할 수 있습니다.
반응형 웹 디자인을 지원하므로 모바일 기기에서도 웹 페이지가 적절하게 표시됩니다.
오픈 소스로 배포되어 있으며, 무료로 사용할 수 있습니다.
부트스트랩을 이용하면 빠르고 쉽게 깔끔하고 모던한 UI를 만들 수 있습니다.

특징

반응형 웹 디자인 지원 : 모바일 기기에서도 적절하게 웹 페이지가 표시되도록 반응형 웹 디자인을 지원합니다.
다양한 UI 컴포넌트 : 레이아웃, 버튼, 폼, 타이포그래피 등 다양한 UI 컴포넌트를 제공합니다.
쉬운 사용성 : 문서와 예제 코드가 풍부하게 제공되어, 쉽게 사용할 수 있습니다.
크로스 브라우징 : 다양한 브라우저에서 일관된 디자인을 제공하여 크로스 브라우징을 지원합니다.
다양한 테마 : 다양한 테마를 제공하여, 사용자가 적절한 디자인을 선택할 수 있습니다.
오픈 소스 : 오픈 소스로 배포되어 있으며, 무료로 사용할 수 있습니다.
커스터마이징 가능 : 사용자의 취향에 맞게 컴포넌트를 수정하거나, 필요한 컴포넌트를 추가할 수 있습니다.
검색 엔진 최적화(SEO) 지원 : 검색 엔진 최적화를 고려하여 코드를 작성하였습니다.

https://getbootstrap.kr/

Bootstrap

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기

getbootstrap.kr

제공 요소

Grid System: 유연한 레이아웃을 만들기 위한 그리드 시스템을 제공합니다. 이를 사용하여 쉽게 다양한 디바이스에 대응하는 반응형 웹사이트를 구축할 수 있습니다.
Typography: 다양한 글꼴, 텍스트 스타일 및 텍스트 효과를 제공합니다.
Forms: 폼 요소를 디자인하는데 도움이 되는 클래스와 스타일을 제공합니다.
Buttons: 버튼을 만드는 데 사용되는 클래스와 스타일을 제공합니다.
Navigation: 다양한 탐색 메뉴를 디자인하는데 도움이 되는 클래스와 스타일을 제공합니다.
Modal: 모달 창을 디자인하는데 사용되는 클래스와 스타일을 제공합니다.
Alerts: 다양한 경고 메시지를 디자인하는데 사용되는 클래스와 스타일을 제공합니다.
Icons: 다양한 아이콘 폰트와 아이콘 클래스를 제공합니다.
Images: 이미지 크기 조정, 원형 이미지, 썸네일 등의 클래스와 스타일을 제공합니다.
JavaScript plugins: 슬라이드쇼, 모달 창, 드롭다운 메뉴 등과 같은 자바스크립트 플러그인을 제공합니다.

사용 방법

CSS 적용

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

JavaScript 적용

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

빠른 시작

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

회원가입 페이지 간단 예제

<!DOCTYPE html>
<html>
<head>
	<title>회원가입 페이지</title>
	<!-- 부트스트랩 CDN 추가하기 -->
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<h1>회원가입</h1>
		<form>
			<div class="form-group">
				<label for="inputName">이름</label>
				<input type="text" class="form-control" id="inputName" placeholder="이름을 입력하세요">
			</div>
			<div class="form-group">
				<label for="inputEmail">이메일</label>
				<input type="email" class="form-control" id="inputEmail" placeholder="이메일을 입력하세요">
			</div>
			<div class="form-group">
				<label for="inputPassword">비밀번호</label>
				<input type="password" class="form-control" id="inputPassword" placeholder="비밀번호를 입력하세요">
			</div>
			<div class="form-group">
				<label for="inputPassword2">비밀번호 확인</label>
				<input type="password" class="form-control" id="inputPassword2" placeholder="비밀번호를 다시 입력하세요">
			</div>
            <br>
			<button type="submit" class="btn btn-primary">회원가입</button>
		</form>
	</div>
    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
crossorigin="anonymous"></script>
</body>
</html>

저작자표시 비영리 변경금지

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ⑧ 반응형 웹과 미디어 쿼리 (0)	2023.03.20
CSS ⑦ 그리드(grid) 레이아웃 (0)	2023.03.20
CSS ⭐ ⑥ flex 박스 레이아웃 (0)	2023.03.16
CSS ⑤ 웹 폰트, 아이콘 폰트 사용하기 + 실습예제 (0)	2023.03.16
CSS ④ 전환 효과 - (3) 변형 효과(transform) (0)	2023.03.16

CSS 적용

JavaScript 적용

빠른 시작

회원가입 페이지 간단 예제

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

검색 태그

티스토리툴바