차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:bootstrap:bootstrap_note:bs_get_started [2021/03/23 18:39]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_get_started [2023/01/13 18:44] (현재)
@@ 줄 79: / 줄 79: @@
 부트스트랩을 직접 다운로드하고 호스팅하지 않으려면, CDN (Content Delivery Network)으로 부트스트랩을 포함시킬 수 있습니다.\\
 MaxCDN은 부트스트랩의 CSS와 JavaScript에 대한 CDN 지원을 제공합니다. 또한 jQuery도 포함시켜야 합니다.\\
+\\
 ====MaxCDN:====
 <code css>
@@ 줄 90: / 줄 91: @@
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </code>
+\\
+**부트스트랩 CDN 사용의 한 가지 이점 :**
+많은 사용자가 이미 다른 사이트를 방문 할 때 MaxCDN에서 Bootstrap을 다운로드했습니다.\\
+결과적으로 사이트를 방문할 때 캐시에서 로딩되어 로딩 시간이 빨라집니다.\\
+또한 대부분의 CDN은 사용자가 파일을 요청하면 가장 가까운 서버에서 제공되므로 로딩 시간이 빨라집니다.\\
+\\
+**jQuery**
+부트스트랩은 자바 스크립트 플러그인 (모달, 툴팁 등)에 jQuery를 사용합니다.\\
+그러나 Bootstrap의 CSS 부분만 사용하는 경우에는 jQuery가 필요하지 않습니다.\\
 \\
 =====Create First Web Page With Bootstrap=====
@@ 줄 123: / 줄 133: @@
 \\
 =====Two Basic Bootstrap Pages=====
-하기의 예제에서는 반응현 고정 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.\\
+하기의 예제에서는 반응형 고정 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.\\
 ====예제====
 <HTML>
+<!DOCTYPE html>
+<html lang="en">
-</HTML>
+<head>
+    <title>Bootstrap Example</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+</head>
+<body>
+    <div class="container"">
+        <h1>My First Bootstrap Page</h1>
+        <p>This part is inside <strong>a .container class.</strong></p>
+        <p><strong>The .container class</strong> provides a responsive fixed width container.</p>
+    </div>
+</body>
+</html>
+</HTML>
+\\
+하기의 예제에서는 전체 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.\\
+<HTML>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Bootstrap Example</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+</head>
+<body>
+    <div class="container-fluid"">
+        <h1>My First Bootstrap Page</h1>
+        <p>This part is inside <strong>a .container-fluid class.</strong></p>
+        <p><strong>The .container-fluid class</strong> provides a full width container, spanning the entire width of the viewport.</p>
+    </div>
+</body>
+</html>
+</HTML>
+\\
 {{tag>오션 Bootstrap Get Started}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구