728x90
반응형
안녕하세요! 오늘은 Bootstrap을 활용해 실제 웹 페이지를 완성하는 미니 프로젝트를 소개하려고 합니다. 그리드 시스템, 폼, 버튼, 네비게이션 바 등 다양한 Bootstrap 컴포넌트를 조합해 깔끔하고 기능적인 웹 페이지를 만들어볼 거예요. 이 예제는 간단한 비즈니스 웹사이트로, 실제 프로젝트에서 쉽게 적용할 수 있는 구조입니다.
프로젝트 개요
우리가 만들 웹 페이지는 홈페이지 구조를 갖춘 간단한 웹사이트입니다. 이 페이지에는 다음과 같은 요소가 포함됩니다:
- 네비게이션 바: 로고와 메뉴 링크를 포함한 상단 네비게이션.
- 히어로 섹션: 주요 메시지를 보여주는 큰 배경 이미지 섹션.
- 서비스 섹션: 3개의 카드로 구성된 서비스 안내.
- 문의 폼: 간단한 문의나 가입을 위한 폼.
- 푸터: 저작권 정보와 링크 포함.
각 섹션을 Bootstrap의 그리드 시스템과 컴포넌트를 사용해 구성해 볼게요.
프로젝트 코드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미니 프로젝트 예제</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- 네비게이션 바 -->
<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 ml-auto">
<li class="nav-item"><a class="nav-link" href="#">홈</a></li>
<li class="nav-item"><a class="nav-link" href="#">서비스</a></li>
<li class="nav-item"><a class="nav-link" href="#">문의하기</a></li>
</ul>
</div>
</nav>
<!-- 히어로 섹션 -->
<div class="jumbotron text-center bg-primary text-white">
<h1 class="display-4">Welcome to My Website</h1>
<p class="lead">Bootstrap을 활용해 웹페이지를 손쉽게 제작하세요!</p>
<a href="#" class="btn btn-light btn-lg">더 알아보기</a>
</div>
<!-- 서비스 섹션 -->
<div class="container">
<h2 class="text-center my-4">우리의 서비스</h2>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Service 1">
<div class="card-body">
<h5 class="card-title">서비스 1</h5>
<p class="card-text">서비스 1에 대한 간단한 설명입니다.</p>
<a href="#" class="btn btn-primary">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Service 2">
<div class="card-body">
<h5 class="card-title">서비스 2</h5>
<p class="card-text">서비스 2에 대한 간단한 설명입니다.</p>
<a href="#" class="btn btn-primary">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Service 3">
<div class="card-body">
<h5 class="card-title">서비스 3</h5>
<p class="card-text">서비스 3에 대한 간단한 설명입니다.</p>
<a href="#" class="btn btn-primary">자세히 보기</a>
</div>
</div>
</div>
</div>
</div>
<!-- 문의 폼 -->
<div class="container my-5">
<h2 class="text-center">문의하기</h2>
<form>
<div class="form-group">
<label for="name">이름</label>
<input type="text" class="form-control" id="name" placeholder="이름을 입력하세요">
</div>
<div class="form-group">
<label for="email">이메일</label>
<input type="email" class="form-control" id="email" placeholder="이메일을 입력하세요">
</div>
<div class="form-group">
<label for="message">메시지</label>
<textarea class="form-control" id="message" rows="3" placeholder="문의 사항을 적어주세요"></textarea>
</div>
<button type="submit" class="btn btn-primary">보내기</button>
</form>
</div>
<!-- 푸터 -->
<footer class="bg-dark text-white text-center py-3">
<p class="mb-0">© 2023 My Website | All Rights Reserved</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
코드 설명
이 예제는 간단하지만 필요한 모든 기본 요소를 포함한 미니 프로젝트 웹페이지로, 각 구성 요소는 다음과 같이 사용됩니다.
- 네비게이션 바: navbar 클래스를 사용해 기본적인 상단 네비게이션을 구성했어요. 메뉴 항목은 오른쪽에 배치되며 반응형 토글 기능이 포함되어 있습니다.
- 히어로 섹션: jumbotron 클래스를 사용해 메인 이미지와 메시지를 표시합니다. 주목을 끌고 싶은 내용을 중앙에 배치하고 버튼을 추가해 시선을 유도할 수 있습니다.
- 서비스 섹션: 그리드 시스템을 활용해 3개의 열로 구성된 카드 레이아웃을 만들었어요. 카드마다 이미지, 제목, 설명, 버튼이 포함되어 있어 서비스나 제품을 소개하는 데 유용합니다.
- 문의 폼: 사용자로부터 정보를 받을 수 있는 입력 폼으로, form-group과 form-control 클래스를 사용해 입력 필드와 버튼을 정리합니다.
- 푸터: bg-dark와 text-white 클래스를 사용해 어두운 배경의 푸터를 구성하였습니다.
요약 및 다음 단계
이 예제는 Bootstrap을 활용해 실용적인 웹 페이지의 기본 구조를 구축하는 방법을 보여주었습니다. 네비게이션 바, 히어로 섹션, 서비스 카드, 문의 폼, 푸터 등 실전 프로젝트에서 자주 사용되는 요소들을 조합해 완성도 높은 웹 페이지를 만들 수 있습니다. 다음 단계로는 페이지 디자인을 다듬고, Bootstrap의 다양한 컴포넌트를 추가해 더 복잡한 기능을 추가해보세요. 페이지를 반응형으로 조정해 다양한 디바이스에서도 최적화된 화면을 제공할 수 있도록 연습해보세요!
728x90
반응형
'프로그래밍 > Bootstrap' 카테고리의 다른 글
| 11. 코드를 더 짧게! Bootstrap 유틸리티 클래스로 효율적인 스타일링 (0) | 2024.11.12 |
|---|---|
| 10. 사용자 경험을 높이는 Bootstrap 모달과 팝업 창 만들기 (0) | 2024.11.12 |
| 9. 정보를 더 깔끔하게! Bootstrap 카드와 리스트 그룹 활용하기 (0) | 2024.11.12 |
| 8. 웹사이트의 첫인상, Bootstrap 네비게이션 바 쉽게 디자인하기 (0) | 2024.11.12 |
| 7. 깔끔한 폼 디자인, Bootstrap 폼과 입력 필드 스타일링 (0) | 2024.11.12 |