부트스트랩 - 앨범 데모
열려라, 야심찬 웹 개발자 여러분! 오늘 우리는 부트스트랩의 흥미로운 세상으로 뛰어들어 아름다운 앨범 데모를 만들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 여정을 단계별로 안내해 드리겠습니다. 그러니 마음에 드는 음료를 한 잔 챙겨서 편안하게 앉아, 이 코딩 모험을 함께 시작해 보세요!
앨범이란?
코드로 뛰어들기 전에, 웹 디자인의 맥락에서 앨범이 무엇인지 이야기해 보겠습니다. 디지털 사진 앨범을 생각해 보세요. 단순한 사진들이 아니라, 다양한 유형의 콘텐츠를展示할 수 있습니다. 이는 제품, 포트폴리오 작품, 또는 블로그 포스트 등을 시각적으로 아름답게 보여주는 방법입니다.
우리의 경우, 우리는 앨범의 각 항목을 나타내는 카드로 구성된 반응형 그리드를 만들 것입니다. 테이블에 polaroid 사진을 정리하는 것처럼, 하지만 웹 페이지에서 그렇게 하겠습니다!
프로젝트 설정
단계 1: HTML 구조
우리의 앨범 데모를 위한 기본 HTML 구조를 설정해 보겠습니다. 부트스트랩의 CSS와 JavaScript 파일을 사용하여 우리의 일을 더 쉽게 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Album Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 우리의 앨범 콘텐츠가 여기 들어갈 것입니다 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>이것이 우리의 기초입니다. 그것을 비어 있는 캔버스로 생각해 보세요. <link> 태그는 부트스트랩의 스타일을 가져오고, 하단의 <script> 태그는 그 JavaScript 기능을 로드합니다.
앨범 레이아웃 생성
단계 2: 헤더 추가
우리의 앨범에 간단한 헤더를 추가해 보겠습니다:
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>내 멋진 앨범</strong>
</a>
</div>
</div>
</header>이 코드는 우리의 페이지 상단에 어둡게 보이는 네비게이션 바를 생성합니다. 그것은 우리의 사진 앨범의 표지와 같습니다!
단계 3: 주 콘텐츠 영역
이제 우리의 앨범 항목이 살아있을 주 콘텐츠 영역을 설정해 보겠습니다:
<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- 앨범 항목이 여기 들어갈 것입니다 -->
</div>
</div>
</div>
</main>이 구조는 우리의 앨범에 밝은 배경을 제공하고 반응형 그리드를 설정합니다. 그것은 우리가 기억을 채우기 위해 준비된 빈 사진 앨범 페이지와 같습니다!
단계 4: 앨범 항목 생성
이제 우리의 앨범에 몇 가지 항목을 추가하는 재미있는 부분입니다:
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">썸네일</text>
</svg>
<div class="card-body">
<p class="card-text">이 카드는 지원 텍스트 아래에 자연스럽게 이어지는 더 많은 콘텐츠로 이끌어주는 더 넓은 카드입니다.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">보기</button>
<button type="button" class="btn btn-sm btn-outline-secondary">수정</button>
</div>
<small class="text-muted">9분</small>
</div>
</div>
</div>
</div>이 코드는 단일 앨범 항목을 생성합니다. <svg> 요소는 이미지의 플레이스홀더입니다. 실제 프로젝트에서는 이를 <img> 태그로 대체하여 실제 이미지를 가리키도록 합니다.
여러 항목을 생성하려면, 이 코드 블록을 이전에 생성한 row div 내에서 여러 번 복사하고 붙여넣기하면 됩니다.
앨범 향상
단계 5: 푸터 추가
우리의 앨범을 마무리하기 위해 간단한 푸터를 추가해 보겠습니다:
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">TOP으로 돌아가기</a>
</p>
<p class="mb-1">앨범 예제는 부트스트랩의 저작권이 있지만, 자유롭게 다운로드하고 커스터마이즈해 주세요!</p>
</div>
</footer>이것은 우리의 페이지 하단에 좋은 마무리를 제공하며, 필요한 경우 "TOP으로 돌아가기" 링크와 저작권 정보를 제공합니다.
모든 것을 함께 모음
이제 우리가 모든 구성 요소를 통해 완전한 HTML 파일이 어떻게 보이는지 확인해 보겠습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Album Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>내 멋진 앨범</strong>
</a>
</div>
</div>
</header>
<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- 앨범 항목 1 -->
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">썸네일</text>
</svg>
<div class="card-body">
<p class="card-text">이 카드는 지원 텍스트 아래에 자연스럽게 이어지는 더 많은 콘텐츠로 이끌어주는 더 넓은 카드입니다.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">보기</button>
<button type="button" class="btn btn-sm btn-outline-secondary">수정</button>
</div>
<small class="text-muted">9분</small>
</div>
</div>
</div>
</div>
<!-- 위의 앨범 항목 구조를 반복하여 더 많은 항목을 생성합니다 -->
</div>
</div>
</div>
</main>
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">TOP으로 돌아가기</a>
</p>
<p class="mb-1">앨범 예제는 부트스트랩의 저작권이 있지만, 자유롭게 다운로드하고 커스터마이즈해 주세요!</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>결론
그렇습니다, 여러분! 우리는 부트스트랩을 사용하여 아름다운 반응형 앨범 데모를 만들었습니다. 기억하시나요, 한 학생이 한 번 말한 적이 있습니다. "선생님, 저는 HTML로 이렇게 프로페셔널한 것을 만들 수 있다고 상상도 못했습니다!" 부트스트랩과 같은 프레임워크는给你们一个起点，让你们专注于内容和创意。
계속 연습하고, 탐구하고, 가장 중요한 것은 즐기세요! 다음에 만날 때까지, 행복한 코딩 되세요!
Credits: Image by storyset