41기 개발자과정

20211116 부트스트랩 설정

segment 2021. 11. 16. 17:23

부트스트랩이란?

- html, css, js 프레임 워크
- html, css, js를 활용하여 만들진 많은 콤포넌트 제공
- 부트스트랩을 활용하여 제작된 사이트는 반응형 웹사이트가 된다.
- 반응형 웹사이트 : 디바이스 크기에 맞춰 화면이 변환하는 웹사이트

 

 

경로 : http://bootstrapk.com

 

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드

bootstrapk.com

 

 

 

1. 현재 사용할 버전은 3버전이다. 5버전까지 나와있지만 5버전에서는 제이쿼리를 제공하지 않는다.

3버전은 제이쿼리 기반.

 

2. 해당 폴더구조를 변경하지 않고 그대로 워크스페이스에 복사해준다.

 

3. resource 폴더를 생성하에 그 아래에 복사해주었다.

4.  제이쿼리 기반으로 사용하므로 js 폴더를 만들어서 복사해주기.

 

5.  기본 템플릿 :

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>

    <!-- 부트스트랩 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="js/bootstrap.min.js"></script>
  </body>

 

6. 부트스트랩의 css, js 파일과 html5문서, html5의 메타테그가 필요 

1)  메타테그 ie브라우저의 최신 문서 모드로 변환해주는 메타테그 

 

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

2) 사용자의 디바이스 크기에 맞춰 사이트의 전체 가로크기 100% 맞춰주는 메타테그  

 <meta name="viewport" content="width=device-width, initial-scale=1">

 

3) bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js 파일 필요하므로 경로 재설정하여 복사.

<link href="resource/bootstrap-3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/bootstrap-3.3.2/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="resource/bootstrap-3.3.2/js/bootstrap.min.js"></script>

7. 제이쿼리 :  bootstrap.js의 상위에 제이쿼리 파일이 있어야한다. 

<script src="resource/js/jquery-3.6.0.min.js"></script>