한국어

Bootstrap 튜토리얼

Bootstrap 레이아웃

Bootstrap 콘텐츠

Bootstrap 컴포넌트

Bootstrap 폼

부트스트랩 도우미

Bootstrap 유틸리티

Bootstrap 데모

부트스트랩 - 블로그 RTL 데모

개요

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩의 세계로 도약하여 아름다운 블로그를 만들어 볼 것입니다. RTL(오른쪽에서 왼쪽으로) 지원을 포함하여 말이죠. 초보자라고 걱정하지 마세요 - 저는 유치원 교사가 하늘이 왜 파蓝인지 설명하는 것처럼 인내심을 가지고 단계별로 안내해 드리겠습니다. 시작해 보겠습니다!

Bootstrap-Blog RTL Demo

블로그는 무엇인가요?

코딩을 시작하기 전에 잠시 블로그가 무엇인지 이해해 보겠습니다. 디지털 일기장을 가지고 있고, 그곳에서 세상과 나의 생각, 경험, 고양이 영상을 공유할 수 있다고 상상해 보세요. 바로 그게 블로그입니다! 가장 최근의 게시물(또는 "포스트")이 가장 먼저 표시되는 방식으로 순차적으로 표시되는 웹사이트입니다.

이제 우리는 개발자 모자를 쓰고 부트스트랩을 사용하여 우리만의 블로그를 만들어 보겠습니다!

프로젝트 설정

먼저, 프로젝트를 설정해야 합니다. 컴퓨터에 새로운 폴더를 만들고 "bootstrap-blog-rtl"이라고 이름지어 주세요. 이 폴더 안에 HTML 파일을 "index.html"이라고 만들고, 좋아하는 텍스트 편집기로 이 파일을 엽니다.

기본 HTML 구조를 시작해 보겠습니다:

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome RTL Blog</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<h1>제 멋진 RTL 블로그에 오신 것을 환영합니다!</h1>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이를 해독해 보겠습니다:

  1. <html> 태그에서 dir 속성을 "rtl"로 설정하여 오른쪽에서 왼쪽으로의 레이아웃을 활성화합니다.
  2. 부트스트랩 CSS 파일과 부트스트랩 RTL CSS 파일을 포함합니다.
  3. 간단한 <h1> 태그를 추가하여 페이지를 테스트합니다.
  4. 마지막으로, <body>의 끝에 부트스트랩 JavaScript 바 ndle을 포함합니다.

네비게이션 바 생성

이제 블로그에 네비게이션 바를 추가해 보겠습니다. 부트스트랩의 네비게이션 바 컴포넌트를 사용하겠습니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">My 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 클래스는 네비게이션 바가 작은 화면에서汉堡 메뉴로 접히도록 합니다.

블로그 레이아웃 생성

이제 블로그의 주 레이아웃을 만들어 보겠습니다. 부트스트랩의 그리드 시스템을 사용하여 이원 컬럼 레이아웃을 만듭니다:

<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- 블로그 포스트가 여기에 들어갑니다 -->
</div>
<div class="col-md-4">
<!-- 사이드바 콘텐츠가 여기에 들어갑니다 -->
</div>
</div>
</div>

이는 블로그 포스트와 사이드바 콘텐츠를 위한 두 개의 컬럼을 생성합니다.

블로그 포스트 추가

메인 콘텐츠 영역에 몇 가지 샘플 블로그 포스트를 추가해 보겠습니다:

<div class="col-md-8">
<article class="blog-post">
<h2 class="blog-post-title">샘플 블로그 포스트</h2>
<p class="blog-post-meta">2023년 1월 1일에 <a href="#">Mark</a>에 의해 작성됨</p>
<p>이는 샘플 블로그 포스트입니다. 텍스트, 이미지, 그리고 다른 HTML 요소를 포함할 수 있습니다.</p>
<hr>
</article>

<article class="blog-post">
<h2 class="blog-post-title">다른 블로그 포스트</h2>
<p class="blog-post-meta">2023년 2월 15일에 <a href="#">Jacob</a>에 의해 작성됨</p>
<p>이 또한 샘플 블로그 포스트입니다. 원하는 만큼 추가할 수 있습니다!</p>
<hr>
</article>
</div>

각 블로그 포스트는 <article> 태그로 감싸여 있으며, 부트스트랩의 타이포그래피 클래스를 사용하여 포스트 제목과 메타 정보를 스타일링합니다.

사이드바 콘텐츠 추가

이제 사이드바에 콘텐츠를 추가해 보겠습니다:

<div class="col-md-4">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">제 블로그에 오신 것을 환영합니다! 여기서는 웹 개발, 고양이, 그리고 인생의 의미에 대한 제 생각을 공유합니다.</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>

이는 "About" 섹션과 "Archives" 목록을 사이드바에 추가합니다.

RTL 친화적이도록 만들기

우리의 블로그는 이미 부트스트랩 RTL CSS를 포함하여 RTL 친화적입니다. 그러나 RTL 레이아웃을 더욱 향상시키기 위해 커스텀 CSS를 추가해 보겠습니다:

<style>
body {
text-align: right;
}
.navbar-nav {
margin-right: auto;
margin-left: 0 !important;
}
.blog-post-meta {
text-align: left;
}
</style>

이를 <head> 섹션에 추가합니다. 이렇게 하면 텍스트가 오른쪽으로 정렬되고, 네비게이션 아이템이 왼쪽( RTL에서는 오른쪽)으로 정렬되며, 블로그 포스트 메타 정보가 왼쪽 정렬로 더 읽기 쉬워집니다.

결론

축하합니다! 지금까지 부트스트랩을 사용하여 기본 RTL 블로그 레이아웃을 만들었습니다. 다음은 우리가 사용한 주요 컴포넌트를 요약한 표입니다:

컴포넌트 목적
네비게이션 바 네비게이션 메뉴
그리드 시스템 페이지 레이아웃
타이포그래피 클래스 텍스트 스타일링
유틸리티 클래스 간격 및 배경

이것이 시작에 불과합니다. 부트스트랩 컴포넌트를 더 추가하거나, 댓글 시스템을 구현하거나, 콘텐츠 관리 시스템을 통합할 수 있습니다.

웹 개발은 레고 블록을 사용한 만들기와 같습니다 - 기본기를 다지고 나서는 마스터피스를 만들 수 있습니다. 연습을 계속하고, 호기심을 유지하며, 가장 중요한 것은 즐겁게 만들어 보세요!

미래의 웹 마법사 여러분, 행복한 코딩을! ?‍♂️?

Credits: Image by storyset

이전 튜토리얼:
Bootstrap-Carousel RTL 데모
다음 튜토리얼:
Bootstrap-Dashboard RTL Demo