부트스트랩 - 시작 템플릿 데모
안녕하세요, 열정적인 웹 개발자 여러분! 오늘 우리는 부트스트랩의 fascinujący 세계로 뛰어들어 그 시작 템플릿을 탐구해보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 여러분을 이 여정으로 안내하는 것을 기대하고 있습니다. 그럼 좋아하는 음료를 손에 들고 편안하게 앉아, 시작해보겠습니다!
시작 템플릿이란?
부트스트랩의 시작 템플릿에 뛰어들기 전에, 시작 템플릿이 정확히 무엇인지 이해해보겠습니다. 이것을 사이트 구조에 대한 사전 제작된 레시피라고 생각해보세요. 레시피가 당신에게 기본적인 재료와 지시를 제공하여 맛있는 요리를 만들도록 하는 것처럼, 시작 템플릿은 웹 프로젝트를 시작하기 위한 필수적인 HTML, CSS, 그리고 JavaScript를 제공합니다.
부트스트랩의 맥락에서 시작 템플릿은 필요한 부트스트랩 컴포넌트와 종속성을 포함한 기본 HTML 파일입니다. 그림을 그리기 위해 비CANVAS에 모든 그림 도구가 이미 설치되어 있고 준비되어 있는 것과 같은 느낌입니다!
시작 템플릿을 사용하는 이유는 무엇인가요?
당신은也许 đang 고민할 것입니다, "왜 시작 템플릿에 신경 쓰죠? 처음부터 모두 직접 작성할 수 없나요?" 사실, 그럴 수 있습니다. 하지만 제 초기 교사 생활 중에 일어난 이야기를 공유해드릴게요.
제가 가르치는 학생 중 한 명은 모든 것을 기본부터 만들기로 고집했습니다. 그는 칭찬할 만하지만, 부트스트랩이 몇 분 만에 해결할 수 있는 기본 레이아웃 문제로 몇 주 동안 고생했습니다. 그 학생처럼 되지 마세요 - 더 지혜롭게 일하세요!
시작 템플릿을 사용하면:
- 시간 절약
- 필요한 모든 종속성 보장
- 일관된 시작 점 제공
- 실제 콘텐츠와 기능에 집중 가능
이제 '왜'를 이해했으니, '어떻게'를 살펴보겠습니다!
부트스트랩 시작 템플릿
여기 기본 부트스트랩 시작 템플릿이 어떻게 보이는지 보여드리겠습니다:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>이를 조각별로 분해해보겠습니다:
문서 유형 선언
<!doctype html>이 줄은 브라우저에게 이것이 HTML5 문서임을 알립니다. 대화를 시작하기 전에 자신을 소개하는 것처럼, 이는 모든 것의 톤을 설정합니다.
HTML 태그
<html lang="en">이것은 HTML 문서를 여는 것으로, 언어가 영어임을 지정합니다. 책을 열고 영어로 쓰여져 있다고 보는 것과 같습니다.
머리 부분
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head><head> 부분은 문서에 대한 메타데이터를 포함합니다. 이를 분해해보겠습니다:
-
<meta charset="utf-8">: 이는 HTML 문서의 문자 인코딩을 지정합니다. UTF-8은 모든 문자를 표현할 수 있는 대중적인 문자 인코딩입니다. -
<meta name="viewport" content="width=device-width, initial-scale=1">: 이는 웹 페이지가 반응형이 되고 모든 장치에서 잘 보이도록 합니다. -
<link>태그는 부트스트랩의 CSS 파일을 CDN에서 가져옵니다. 이는 웹 페이지의 스타일 가이드북을 가져오는 것과 같습니다. -
<title>: 이는 브라우저 탭에 나타나는 웹 페이지의 제목을 설정합니다.
몸 부분
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body><body> 부분은 웹 페이지의 주요 콘텐츠가 들어갑니다. 이 시작 템플릿에서는 다음을 포함합니다:
- 간단한 "Hello, world!" 제목을 시작으로.
- 부트스트랩 기능을 위한 JavaScript 파일. 두 가지 선택지가 있습니다:
- Option 1: 부트스트랩과 Popper.js가 포함된 단일 번들 파일.
- Option 2: Popper.js와 부트스트랩을 별도로 가져오는 파일 (기본적으로 주석 처리됨).
시작 템플릿 사용법
이제 우리가 시작 템플릿을 분석했으니, 이를 사용해보겠습니다! 다음은 간단한 예제입니다:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>My First Bootstrap Page</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">Welcome to My Website!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>이 예제에서 우리는 부트스트랩 클래스를 사용하여 간단한 히어로 유닛(강조된 메시지 상자)을 추가했습니다. 이를 분해해보겠습니다:
-
<div class="container">: 이는 반응형 고정 너비 컨테이너를 만듭니다. -
<h1 class="mt-5">:mt-5클래스는 제목 상단에 마진을 추가합니다. -
<p class="lead">:lead클래스는 이 퍼러그래프를 강조합니다. -
<hr class="my-4">: 이는 가로선을 만들며, y축에 마진을 추가합니다. -
<a class="btn btn-primary btn-lg">: 이는 큰, 주요 색상의 버튼을 만듭니다.
결론
그렇습니다, 여러분! 우리는 부트스트랩 시작 템플릿의 세계를 여행하며, 그들이 무엇인지 이해하고 간단한 웹 페이지를 만드는 방법을 배웠습니다. 기억하시면, 이것이 시작에 불과합니다. 부트스트랩은 많은 컴포넌트와 기능을 제공하여 아름답고 반응형 웹사이트를 만들 수 있습니다.
마지막으로, 제가 가르치는 또 다른 학생을 떠올립니다. 그녀는 이 exact同一个 템플릿을 시작으로 하여, 학기 말에 인턴십을 따내는 포트폴리오 사이트를 만들었습니다. 누구 알까요? 몇 개월 후에 당신이 그렇게 될지도 모릅니다!
계속 연습하고 탐구하며, 가장 중요한 것은 즐기세요. 웹 개발은 예술이자 과학이기도 하니, 창의력을 발휘해보세요. 다음에 다시 만날 때까지, 행복하게 코딩하세요!
Credits: Image by storyset