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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Get Started======
<WRAP left notice 80%>
  * description : Bootstrap Get Started
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-23
</WRAP>
<WRAP clear></WRAP>
\\
=====What is Bootstrap?=====
   * 부트스트랩은 더 빠르고 더 쉬운 웹 개발을 위한 무료 프런트엔드 프레임워크입니다.
   * 부트스트랩은 선택할 수 있는 자바스크립트 플러그인과 더불어 typography, forms, buttons, tables, navigation, modals, image carousels 및 기타 여러가지를 포함합니다.
   * 부트스트랩은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공합니다.
\\
**반응형 웹 디자인(Responsive Web Design)**\\
반응형 웹 디자인은 소형 스마트폰에서 대형 데스크톱에 이르는 모든 기기에서 보기 좋게 자동 조정되는 웹 사이트를 만드는 것입니다.\\
\\
====예제====
<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>
\\
=====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}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
