학교수업/웹프로그래밍

Bootstrap: CSS Framework

Ynghan 2023. 6. 16. 03:14

CSS Framework

W3.CSS는 기본적으로 데스크톱, 태블릿, 모바일 디자인을 지원하는 최신 CSS 프레임워크입니다.
W3.CSS는 jQuery 또는 기타 JavaScript 라이브러리와 독립적으로 설계되었습니다.

 

W3.CSS

W3Schools에서 만든 W3.CSS.
기본적으로 반응형 모바일 퍼스트 디자인을 지원합니다,
순수 CSS 프레임워크입니다. 즉, 자바스크립트가 아닌 HTML과 CSS만 사용합니다.
    (-) 자바스크립트를 사용하지 않기 때문에 W3.CSS로 대화형 웹사이트를 제작하기 어려울 수 있습니다.
    (+) 자바스크립트는 SEO의 적이기 때문에, 웹사이트의 검색 엔진 최적화(Search Engine Optimization)도 향상됩니다.

 

Bootstrap

트위터에서 만들었습니다.
HTML, CSS 및 JavaScript를 사용합니다.
    부트스트랩3 부터는 시작부터 모바일 친화적으로 설계
부트스트랩을 사용하려면 jQuery가 필요하므로 반드시 별도로 추가
    5이상은 필요 없음

jQuery
: 웹 페이지 개발을 위한 JS 라이브러리

Bootstrap 5

부트스트랩이란 무엇인가요?

부트스트랩은 더 빠르고 쉬운 웹 개발을 위한 무료 프론트엔드 프레임워크입니다.
부트스트랩에는 다음과 같은 HTML 및 CSS 기반 디자인 템플릿이 포함되어 있습니다.
    typography, forms, buttons, tables, navigation, modals, image carousels 및 기타 여러 가지,
    자바스크립트 플러그인 옵션도 포함되어 있습니다.
부트스트랩은 반응형 디자인을 쉽게 제작할 수 있는 기능도 제공합니다.

 

Bootstrap 5 예시

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <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>

 

Bootstrap 버전

Bootstrap 5는 jQuery 대신 바닐라 자바스크립트로 전환되었습니다.

 

Bootstrap을 사용하는 이유는 무엇인가요?

Bootstrap의 장점:

1) 사용하기 쉽습니다
: HTML과 CSS에 대한 기본 지식만 있으면 누구나 부트스트랩을 사용할 수 있습니다.

2) 반응형 기능
: 부트스트랩의 반응형 CSS는 휴대폰, 태블릿, 데스크톱에 맞게 조정됩니다.

3) 모바일 우선 접근 방식
: Bootstrap에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.

4) 브라우저 호환성
: 부트스트랩 5는 모든 최신 브라우저(크롬, 파이어폭스, 엣지, 사파리, 오페라)와 호환됩니다. IE11 이하에 대한 지원이 필요한 경우 BS4 또는 BS3를 사용해야 합니다.

 

Bootstrap 5는 어디서 구할 수 있나요?

*** MaxCDN:
Bootstrap 5 다운로드하기

 

Bootstrap 5로 첫 웹 페이지 만들기

1. HTML5 doctype 추가하기
2. Bootstrap 5는 모바일 우선
3. 컨테이너
두 가지 컨테이너 클래스 중에서 선택할 수 있습니다:
    1) .container 클래스는 반응형 고정 너비 컨테이너를 제공합니다.
    2) .container-fluid 클래스는 뷰포트의 전체 너비에 걸친 전체 너비 컨테이너를 제공합니다.

 

두 개의 기본 Bootstrap 5 페이지

다음 예는 기본 Bootstrap 5 페이지(반응형 고정 너비 컨테이너 포함)의 코드를 보여줍니다:

 

Container

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

 

Container-fluid

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>

Containers

1) .container 클래스는 반응형 고정 너비 컨테이너를 제공합니다.
2) .container-fluid 클래스는 뷰포트의 전체 너비에 걸친 전체 너비 컨테이너를 제공합니다.

 

고정 컨테이너

화면 크기에 따라 너비(max-width)가 달라진다는 점에 유의하세요:

 

유체 컨테이너

.container-fluid 클래스를 사용하여 항상 화면 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 만들 수 있습니다(너비는 항상 100%):

 

컨테이너 패딩

기본적으로 컨테이너에는 좌우 패딩이 있고 위쪽이나 아래쪽 패딩이 없습니다.
따라서 여분의 패딩이나 여백과 같은 간격 유틸리티를 사용하여 컨테이너를 더욱 보기 좋게 만드는 경우가 많습니다.
예를 들어 .pt-5는 "상단에 큰 패딩 추가"를 의미합니다: //pt( padding top의 의미 )
<div class="container pt-5"></div>​

 

컨테이너 테두리 및 색상

테두리 및 색상과 같은 다른 유틸리티도 컨테이너와 함께 사용되는 경우가 많습니다 :
<div class="container p-5 my-5 border"></div>

<div class="container p-5 my-5 bg-dark text-white"></div>

<div class="container p-5 my-5 bg-primary text-white"></div>​

p : 패딩 / my : 위아래 마진 / bg : 배경 색상 / text : 글자 색상

 

반응형 컨테이너

Class Extra small<576px Small≥576px Medium≥768px  Large≥992px Extra large≥1200px XXL≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Grid System

Bootstrap의 그리드 시스템은 플렉스박스로 구축되며 페이지 전체에 최대 12개의 열을 허용합니다.

 

flexbox 예시

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 20">3</div>
</div>
  • 총합이 12라는 제약이 없음
12개의 열을 모두 개별적으로 사용하지 않으려면 열을 함께 그룹화하여 더 넓은 열을 만들 수 있습니다:

그리드 시스템은 반응형이며 화면 크기에 따라 열이 자동으로 다시 정렬됩니다.

 

Grid Classes

부트스트랩 5 그리드 시스템에는 6개의 클래스가 있습니다:
.col- (초소형 디바이스 - 화면 너비 576px 미만)
.col-sm- (소형 디바이스 - 화면 너비가 576px 이상)
.col-md- (중간 크기 디바이스 - 화면 너비가 768px 이상)
.col-lg- (대형 디바이스 - 화면 너비 992px 이상)
.col-xl- (대형 디바이스 - 화면 너비가 1200px 이상)
.col-xxl- (대형 디바이스 - 화면 너비가 1400px 이상)

위의 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.
팁: 각 클래스는 확장되므로 sm과 md의 너비를 동일하게 설정하려면 sm만 지정하면 됩니다.

 

부트스트랩 5 그리드의 기본 구조

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
다음은 부트스트랩 5 그리드의 기본 구조입니다:

첫 번째 예: 행을 만듭니다(<div class="row">).
    - 그런 다음 원하는 수의 열을 추가합니다(적절한 .col-*-* 클래스가 있는 태그).
    - 첫 번째 별(*)은 응답성을 나타냅니다: sm, md, lg, xl 또는 xxl,
    - 두 번째 별은 숫자를 나타내며, 각 행에 대해 최대 12개까지 추가해야 합니다.
두 번째 예: 각 열에 숫자를 추가하는 대신,
    - Bootstrap이 레이아웃을 처리하도록 하여 동일한 너비의 열을 만듭니다:
    - 두 개의 "col" 요소 = 각 열에 50% 너비,
세 개의 열 = 각 열의 너비 33.33%.
    - 4개의 열 = 25% 너비 등입니다.
    - .col-sm|md|lg|xl|xxl을 사용하여 열을 반응형으로 만들 수도 있습니다.

 

아래는 기본적인 부트스트랩 5 그리드 레이아웃의 몇 가지 예시입니다.

[세 개의 동일한 열]

<div class="container-fluid mt-3">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

 

[반응이 같지 않은 두 개의 열]

  • .col-sm- (소형 기기 - 화면 너비가 576px 이상)
  • 스크린의 크기가 576px 이상이면 4:8로 만들어라
    • 스크린 크기가 small 이상이면 적용해라
<div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>

 

[그리드를 수평으로 쌓기]

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

 

[자동 레이아웃 열]

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm bg-primary text-white p-3">1 of 4</div>
      <div class="col-sm bg-dark text-white p-3">2 of 4</div>
      <div class="col-sm bg-primary text-white p-3">3 of 4</div>
      <div class="col-sm bg-dark text-white p-3">4 of 4</div>
    </div>  
  </div>
col-sm 방식으로 컬럼 크기를 지정해 주지 않으면 동일 크기로 설정

 

  <div class="container-fluid">
    <div class="row">
      <div class="col-3 bg-primary text-white p-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-9 bg-dark text-white p-3">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </div>
    </div>
  </div>
디바이스 크기를 지정하지 않으면 모든 디바이스를 의미

 

자동 레이아웃 열

부트스트랩 5에서는 모든 디바이스에 동일한 너비의 열을 만드는 쉬운 방법이 있습니다:
.col-*에서 숫자를 제거하고 지정된 수의 col 요소에만 .col 클래스를 사용하기만 하면 됩니다.

 

Row Cols

열 수에 관계없이 서로 옆에 표시할 열의 수를 제어할 수도 있습니다,
.row-cols-* 클래스를 사용하면 됩니다:

<div class="row row-cols-1">
<!-- 한 줄에 한 컬럼씩 -->
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
<!-- 한 줄에 두개의 컬럼씩 -->
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div

 

동일한 높이

열 중 하나가 다른 열보다 크면(텍스트 또는 CSS 높이로 인해) 나머지 열이 따라갑니다:

 

중첩 열

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

 

No Gutters

열 사이의 여백(추가 공간)을 변경하려면 .g-1|2|3|4|5 클래스 중 하나를 사용합니다(.g-4가 기본값).
거터를 완전히 제거하려면 .g-0을 사용합니다:

 

 

 

 

 

 

 

 

 

 

 

저작자표시 (새창열림)

'학교수업 > 웹프로그래밍' 카테고리의 다른 글

HTTP  (0) 2023.06.16
Graphics  (0) 2023.06.16
[0323~0328] 웹프  (0) 2023.03.23
[웹프] 0316~0321  (0) 2023.03.16
[웹프] 0314  (0) 2023.03.14

'학교수업/웹프로그래밍'의 다른글

  • 현재글Bootstrap: CSS Framework

관련글

티스토리툴바