부트스트랩 템플릿 활용_혼자 반응형 웹 만들기
부트스트랩 Bootstrap
웹 페이지를 빠르게 예쁘게 만들 수 있게 도와주는 CSS + JS UI 프레임워크
부트스트랩의 장점
모바일 최적화, 반응형 가능
이때 사용하면 좋음
- 빠르게 프로토타입 제작할 때
- 반응형 웹 만들고 싶을 때
- UI 요소를 직접 디자인하기 어려울 때
- 스타트업 MVP 만들기 초고속 제작
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
디자이너가 없는 상태로 만들기 편함.
미리 CSS를 다 넣어놓음
부트스트랩 템플릿 (무료 다운 활용)
Start Bootstrap
startbootstrap.com
부트스트랩 > 문서 > 시작하기
https://getbootstrap.kr/docs/5.3/getting-started/introduction/
코드를 가져와서
모바일 최적화, 반응형 테스트 하기
화면 움직임에 따라 내용이 최적화 됨을 확인
문서에서 복붙하기만 한 코드 👇🏼
<!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.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Bootstrap Grid Box</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.box {
border: 2px solid #333;
padding: 10px;
text-align: center;
background-color: #f8f9fa;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container mt-4">
<div class="row">
<div class="col box">test1</div>
<div class="col box">test2</div>
<div class="col box">test3</div>
<div class="col box">test4</div>
<div class="col box">test5</div>
<div class="col box">test6</div>
<div class="col box">test7</div>
<div class="col box">test8</div>
<div class="col box">test9</div>
<div class="col box">test10</div>
<div class="col box">test11</div>
<div class="col box">test12</div>
</div>
</div>
</body>
</html>
화면 구현 코드👇🏼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>신규 등록 상품</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
padding: 40px;
}
.section-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 제목 -->
<div class="section-title">신규 등록 상품</div>
<!-- 검색 필터 -->
<div class="row g-2 mb-4">
<div class="col-md-2">
<select class="form-select">
<option selected>카테고리</option>
<option value="상의">상의</option>
<option value="하의">하의</option>
<option value="신발">신발</option>
<option value="패션잡화">패션잡화</option>
</select>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="제품명을 입력해주세요" />
</div>
<div class="col-md-2">
<button class="btn btn-primary w-100">조회</button>
</div>
</div>
<!-- 상품 테이블 -->
<table class="table table-bordered text-center align-middle">
<thead class="table-light">
<tr>
<th>카테고리</th>
<th>브랜드</th>
<th>상품명</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>상의</td>
<td>Supreme</td>
<td>슈프림 박스로고 후드티</td>
<td>390,000</td>
</tr>
<tr>
<td>하의</td>
<td>DIESEL</td>
<td>디젤 트랙 팬츠</td>
<td>188,000</td>
</tr>
<tr>
<td>신발</td>
<td>Nike</td>
<td>에어포스 1</td>
<td>137,000</td>
</tr>
<tr>
<td>패션잡화</td>
<td>Music&Goods</td>
<td>병행의 키링</td>
<td>29,000</td>
</tr>
</tbody>
</table>
<!-- 페이지 네비게이션 -->
<nav>
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</body>
</html>
'IT 스타트업 사업 개발(BD) 부트캠프' 카테고리의 다른 글
| 왜 MVP, 프로토타이핑이 중요할까? 결론 SPEED (0) | 2025.03.22 |
|---|---|
| 창업 아이템 발굴, 검증의 모든 것 BM(비즈니스 모델) (2) | 2025.03.21 |
| 웹개발 jQuery 심화 (0) | 2025.03.18 |
| 왜 javascript 말고 jQuery 사용해? JS > jQuery (0) | 2025.03.17 |
| CSS 활용 심화 display, position, float, clear (2) | 2025.03.16 |