고정 헤더 영역
상세 컨텐츠
본문
반응형
부트스트랩(Bootstrap)은 오픈 소스의 프론트엔드 프레임워크로, 웹 개발에서 사용되는 HTML, CSS 및 JavaScript 코드를 빠르게 디자인하고 개발하는 데 도움을 주는 도구입니다. 부트스트랩은 반응형 웹 디자인을 쉽게 구현할 수 있도록 만들어진 강력한 도구이며, 모바일 기기, 태블릿, 데스크톱에 대한 호환성을 지원합니다. 아래는 부트스트랩의 주요 특징 및 5개의 간단한 샘플 코드입니다.
부트스트랩의 주요 특징
반응형 그리드 시스템: 부트스트랩은 12개의 컬럼 그리드 시스템을 제공하여 화면 크기에 따라 레이아웃을 조정할 수 있습니다.
사전 디자인된 CSS 클래스: 다양한 디자인 요소를 쉽게 적용할 수 있는 사전 디자인된 CSS 클래스를 제공합니다.
폼 컨트롤 및 입력 그룹: 폼 요소를 스타일링하고 입력 그룹을 만들 수 있는 클래스와 스타일이 포함되어 있습니다.
UI 컴포넌트: 모달, 드롭다운, 탭, 카루셀, 툴팁, 팝오버 등 다양한 UI 컴포넌트를 제공합니다.
테마 지원: 부트스트랩은 기본 테마뿐만 아니라 사용자 정의 가능한 테마도 제공하여 디자인을 빠르게 변경할 수 있습니다.
부트스트랩 샘플 코드
기본 텍스트와 버튼
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Hello, Bootstrap!</h1>
<p>This is a basic Bootstrap example.</p>
<button class="btn btn-primary">Click me</button>
</div>
</body>
</html>
반응형 그리드
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
네비게이션 바
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
버튼 그룹:
html
<div class="btn-group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
카드 (Card)
<div class="card" style="width: 18rem;">
<img src="image.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>
이러한 예시 코드를 기반으로 부트스트랩을 사용하여 반응형 웹 페이지를 구축할 수 있습니다.
반응형
놓치면 아쉬운 최신 트렌드
아이폰16 Pro, 자급제, 사전 예약, 네이버 쇼핑 top 50
