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

사용자 도구

사이트 도구

현재 위치: start » wiki » bootstrap » bootstrap_note » bs_get_started
wiki:bootstrap:bootstrap_note:bs_get_started

차이

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

차이 보기로 링크

다음 판 		이전 판
wiki:bootstrap:bootstrap_note:bs_get_started [2021/03/23 17:36]
emblim98 만듦 		wiki:bootstrap:bootstrap_note:bs_get_started [2023/01/13 18:44] (현재)
줄 18: 줄 18:
 ====예제==== ====예제====
 <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="jumbotron text-center">
 +        <h1>My First Bootstrap Page</h1>
 +        <p>Resize this responsive page to see the effect!</p>
 +    </div>
 +
 +    <div class="container">
 +        <div class="row">
 +            <div class="col-sm-4">
 +                <h3>Column 1</h3>
 +                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
 +                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
 +            </div>
 +            <div class="col-sm-4">
 +                <h3>Column 2</h3>
 +                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
 +                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
 +            </div>
 +            <div class="col-sm-4">
 +                <h3>Column 3</h3>
 +                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
 +                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
 +            </div>
 +        </div>
 +    </div>
 +
 +</body>
 +</html>
 </HTML> </HTML>
 +\\
 +=====Bootstrap History=====
 +부트스트랩은 트위터의 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)이 만들고, 2011년 8월 깃허브에서 오픈 소스로 배포되었습니다.\\
 +2014년 6월, 부트스트랩은 깃허브에서 최고의 프로젝트였습니다.\\
 +\\
 +=====Why Use Bootstrap?=====
 +부트스트랩의 장점:\\
 +  * 사용의 편리함 : 단지 기본적인 HTML과 CSS의 지식만 있으면 누구든지 부트스트랩 사용을 시작할 수 있습니다.
 +  * 반응형 기능 : 부트스트랩의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정됩니다.
 +  * 모바일 우선 접근 방식 : 부트스트랩 3에서, 모바일 우선 스타일은 핵심 프레임워크의 일부분입니다.
 +  * 브라우저 호환성 : 부트스트랩은 모든 최신 브라우저(크롬, 파이어폭스, 인터넷 익스플로러, 엣지, 사파리, 오페라)와 호환됩니다.
 +\\
 +=====Where to Get Bootstrap?=====
 +웹 사이트에 부트스트랩 사용을 시작하는 두 가지 방법이 있습니다.\\
 +  * getbootstrap.com에서 부트스트랩을 다운로드
 +  * CDN으로 부트스트랩을 포함
 +\\
 +=====Bootstrap CDN=====
 +부트스트랩을 직접 다운로드하고 호스팅하지 않으려면, CDN (Content Delivery Network)으로 부트스트랩을 포함시킬 수 있습니다.\\
 +MaxCDN은 부트스트랩의 CSS와 JavaScript에 대한 CDN 지원을 제공합니다. 또한 jQuery도 포함시켜야 합니다.\\
 +\\
 +====MaxCDN:====
 +<code css>
 +<!-- Latest compiled and minified CSS -->
 +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  
 +<!-- jQuery library -->
 +<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
 +<!-- Latest compiled JavaScript -->
 +<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=====
 +===1. Add the HTML5 doctype===
 +부트스트랩은 %%HTML5 doctype%%이 필요한 %%HTML%% 요소와 %%CSS%% 속성을 사용합니다.\\
 +페이지 시작 부분에 lang 속성 및 올바른 문자 세트와 함께 %%HTML5 doctype%%을 항상 포함하세요.\\
 +<HTML>
 +<!DOCTYPE html>
 +<html lang="en">
 +  <head>
 +    <meta charset="utf-8">
 +  </head>
 +</HTML>
 +\\
 +===2. Bootstrap 3 is mobile-first===
 +부트스트랩 3는 모바일 장치에 반응하도록 설계되었습니다. 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.\\
 +\\
 +적합한 렌더링과 터치 확대/축소(touch zooming)를 보장하기 위해, ''<head>'' 요소 내부에 하기의 ''<meta>'' 태그를 추가하세요\\
 +<HTML>
 +<meta name="viewport" content="width=device-width, initial-scale=1">
 +</HTML>
 +\\
 +''width=device-width'' 부분은 (장치에 따라 달라지는) 장치의 화면 너비를 따르도록 해당 페이지의 너비를 설정합니다.\\ 
 +\\
 +''initial-scale=1'' 부분은 해당 페이지가 브라우저에서 페이지를 처음으로 로딩할 때 초기의 확대/축소 수준(zoom level)을 설정합니다.\\
 +\\
 +===3. Container===
 +부트스트랩에는 사이트 콘텐츠를 감싸는 포함 요소(containing element)가 필요합니다.\\
 +\\
 +선택할 수 있는 두 개의 컨테이너 클래스가 있습니다.\\
 +   - ''.container'' 클래스는 반응형 고정 너비의 컨테이너를 제공합니다.
 +   - ''.container-fluid'' 클래스는 뷰포트(viewport)의 전체 너비에 걸쳐있는 화면 전체 너비의 컨테이너를 제공합니다.
 +\\
 +=====Two Basic Bootstrap Pages=====
 +하기의 예제에서는 반응형 고정 너비의 컨테이너를 가진 기본 부트스트랩 페이지를 위한 코드를 확인합니다.\\
 +====예제====
 +<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"">
 +        <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}} {{tag>오션 Bootstrap Get Started}}
/volume1/web/dokuwiki/data/attic/wiki/bootstrap/bootstrap_note/bs_get_started.1616488571.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki