부트스트랩 - 블로그 데모
블로그란 무엇인가요?
안녕하세요, 웹 개발자 지망생 여러분! 오늘은 부트스트랩을 사용하여 흥미로운 블로깅 세계에 들어보겠습니다. 하지만 코드를 다루기 전에 잠시 블로그가 정말 무엇인지 이해해 보겠습니다.
블로그는 "웹로그"의 약자로, 개인이나 소규모 그룹이 운영하는 정기적으로 업데이트되는 웹사이트나 웹 페이지로, 비공식적이거나 대화식 스타일로 작성됩니다. 이는 사람들이 다양한 주제에 대해 자신의 생각, 경험 또는 전문 지식을 공유할 수 있는 온라인 일기장과 같습니다.
2000年代初頭에 블로깅을 처음 시작했을 때를 기억합니다. 이는 비슷한 관심을 가진 전 세계 사람들과 연결할 수 있는 혁신적인 방법이었습니다. 이제 부트스트랩을 사용하여 우리 자신의 블로그를 만들어 보겠습니다!
부트스트랩 블로그 데모 설정
단계 1: 기본 HTML 구조
블로그의 기본 HTML 구조를 시작해 보겠습니다. index.html이라는 새 파일을 만들고 다음 코드를 추가하세요:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome Blog</title>
<!-- 부트스트랩 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 우리 블로그 콘텐츠가 여기 들어갈 자리 -->
<!-- 부트스트랩 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>이렇게 하면 기본 HTML 구조와 필요한 부트스트랩 CSS와 JavaScript 파일을 포함합니다. 이는 우리 블로그의 골격과 같습니다 - 나중에 콘텐츠와 스타일을 추가할 것입니다!
단계 2: 네비게이션 바 생성
이제 블로그에 네비게이션 바를 추가해 보겠습니다. <body> 태그 후에 다음 코드를 삽입하세요:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Awesome Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" 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="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>이 코드는 반응형 네비게이션 바를 생성하며, 홈, 关于, 연락처 페이지로 이동할 수 있는 링크를 포함합니다. navbar-expand-lg 클래스는 네비게이션 바가 더 큰 화면에서 확장되고 작은 화면에서 햄버거 메뉴로 축소되도록 합니다. 이는 블로그를 탐색하는 독자를 안내하는 GPS와 같습니다!
단계 3: 주요 콘텐츠 영역 추가
다음으로, 블로그 게시물의 주요 콘텐츠 영역을 만들어 보겠습니다. 네비게이션 바 후에 다음 코드를 추가하세요:
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- 블로그 게시물이 여기 들어갈 자리 -->
</div>
<div class="col-md-4">
<!-- 사이드바 콘텐츠가 여기 들어갈 자리 -->
</div>
</div>
</div>이렇게 하면 콘텐츠와 사이드바를 위한 컨테이너와 두 개의 열을 생성합니다: 블로그 게시물(8열 넓이)과 사이드바(4열 넓이). 이는 방의 공부 공간과 휴식 공간을 나누는 것과 같습니다 - 각각 특정 목적을 가지고 있습니다!
단계 4: 블로그 게시물 생성
이제 샘플 블로그 게시물을 추가해 보겠습니다. 블로그 게시물에 대한 주석이 있는 곳에 다음 코드를 삽입하세요:
<article class="blog-post">
<h2 class="blog-post-title">샘플 블로그 게시물</h2>
<p class="blog-post-meta">2023년 1월 1일 <a href="#">Mark</a>에 의해</p>
<p>이는 추가 문단 플레이스 홀더입니다. 이는 사용 가능한 공간을 채우고 더 긴 텍스트 스니펫이 주변 콘텐츠에 어떤 영향을 미치는지 보여주기 위해 작성되었습니다. 우리는 데모를 유지하기 위해 자주 반복할 것이므로, 이 정확한 텍스트 문자열을 찾아보세요.</p>
<h3>하위 제목</h3>
<p>이는 추가 문단 플레이스 홀더입니다. 이는 사용 가능한 공간을 채우고 더 긴 텍스트 스니펫이 주변 콘텐츠에 어떤 영향을 미치는지 보여주기 위해 작성되었습니다. 우리는 데모를 유지하기 위해 자주 반복할 것입니다.</p>
<a href="#" class="btn btn-primary">더 읽기</a>
</article>이렇게 하면 제목, 메타 정보, 문단, 그리고 "더 읽기" 버튼을 포함하는 간단한 블로그 게시물을 생성합니다. 이는 독자들에게 생각과 아이디어를 공유하는 편지와 같습니다!
단계 5: 사이드바 콘텐츠 추가
마지막으로, 사이드바에 콘텐츠를 추가해 보겠습니다. 사이드바 콘텐츠에 대한 주석이 있는 곳에 다음 코드를 삽입하세요:
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">My Awesome Blog에 오신 것을 환영합니다! 여기서 저는 기술, 코딩, 그리고 개발자로서의 삶에 대한 생각을 공유합니다.</p>
</div>
<div class="p-4">
<h4 class="font-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">2023년 3월</a></li>
<li><a href="#">2023년 2월</a></li>
<li><a href="#">2023년 1월</a></li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>이렇게 하면 "About" 섹션, 과거 게시물의 아카이브, 그리고 소셜 미디어 프로필 링크를 추가합니다. 이는 블로그에 개인적인 터치를 더해주고, 독자들에게 당신에 대해 더 알아볼 수 있는 기회를 제공합니다!
결론
이제 부트스트랩 블로그의 기본 구조가 완성되었습니다! 물론, 이것이 시작일 뿐입니다. 색상을 맞추고, 더 많은 게시물을 추가하고, 이미지를 포함시키고, 더 많은 것을 할 수 있습니다. 중요한 것은 간단하게 시작하고 거기서부터 점진적으로 발전시키는 것입니다.
블로그를 만드는 것은 단순히 코드 작성하는 것에 그치지 않습니다 - 당신의 목소리를 세상과 공유하는 것입니다. 따라서 실험을 두려워하지 마시고, 실수를 하고, 가장 중요한 것은 즐기세요!
기쁜 코딩을 기원하며, 블로그가 다른 사람들에게 영감을 주고 교육하는 놀라운 콘텐츠로 가득 차기를 바랍니다!
| 방법 | 설명 |
|---|---|
| 부트스트랩 CDN | 부트스트랩 CSS와 JS 파일을 포함하는 데 사용됩니다 |
| 컨테이너 | 콘텐츠를 중앙에 정렬하는 컨테이너를 생성합니다 |
| 행 | 가로 그룹의 열을 생성합니다 |
| 열 | 다양한 화면 크기에 따라 열 넓이를 정의합니다 |
| 네비게이션 바 | 반응형 네비게이션 헤더를 생성합니다 |
| 기사 | 독립적이고 자체完結된 콘텐츠를 위한语义 HTML5 요소 |
| 버튼 | 클릭 가능한 버튼을 생성합니다 |
Credits: Image by storyset