Hokma Developer School :: Course 1

[Bootstrap 기초] 1. Bootstrap 과 Grid

테디아저씨 2024. 10. 15. 05:50

Bootstrap  은 다양한 디바이스, 다양한 브라우저의 요구에 늘 직면하는 개발자가 레이아웃, 버튼, 입력창등을 편리하게 사용할수 있도록 CSS 와 Javascript 를 모아놓은 프레임워크다.

 

 

Bootstrap 특징

- 반응형 웹디자인을 기본 제공하여 다양한 크기의 디바이스에 최적화

- 크로스브라우징

- 다양한 컴포넌트와 템플릿을 제공

 

Bootstrap 사전학습필요

- HTML

- CSS 

 

 

공식웹사이트

https://getbootstrap.com/

 

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

 

 

부트스트랩을 사용하는 방법

- download

- CDN

 

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 

 

* 우리가 사용하는 템플릿에서 위 코드가 어디있는지 찾아봅시다.

 

Javascript 와 Css 를 포함한 기본 HTML 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

 

 

 

 

 

Containers

<!-- 기본 -->
<div class="container">
    <h1>Hello, world!</h1>
</div>



<!-- 반응형 -->
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>


<!-- 넓게 -->
<div class="container-fluid">
    <h1>Hello, world!</h1>
</div>

 

Grid

 

부트스트랩은 웹페이지를 격자 형태로 분할하여 구성합니다.

아래 각 사이즈에 맞게 컨텐츠를 분할합니다.

 

 

미디어쿼리

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

 

Bootstrap 사용 가능한 중단점

Bootstrap에는 반응형 제작을 위해 grid tiers 라고 하는 6개의 Breakpoints가 포함되어 있습니다. 이러한 breakpoints는 Sass 소스 파일을 사용할 경우 사용자가 지정할 수 있습니다.

 

우리는 이 수업에서 기본 제공하는 breakpoint  만 사용합니다.

X-Small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

 

 

 

Row 로 감싼 가로열을 너비가 같은 컬럼으로 나누어준다

<div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
</div>

 

너비의 비율을 지정할 수 있다. 기본 가로열은 12개를 기준으로 하여 col-6 이라면 전체의 1/2 크기를 차지하고 나머지 영역을  col 이 나눈다.

 

 

  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>

 

너비의 비율을 지정

<div class="container text-center">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

 

 

가변그리드 :: 중단점에 따라 다른 너비를 설정할 수 있다.

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8 col-lg-6">col-sm-8</div>
    <div class="col-sm-4 col-lg-6">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

 

템플릿에서 컨텐츠 너비와 갯수를 변경하면서 연습해보자.

 

1. About 페이지의 이미지와 컨텐츠( Text ) 부분의 비율을 변경해보자.

2. Course. 페이지의 컨텐츠를 가로 4개 또는 6개로 변경해보자

3. Pricing. 페이지의 Free 를 제거하고  가로로 3개가 나오도록 수정하자.

 

 

가변  Class 를 컬럼에 넣지 않고 row 에 추가하는 방법

	  <div class="container text-center">
		<div class="row row-cols-2">
		  <div class="col">Column</div>
		  <div class="col">Column</div>
		  <div class="col">Column</div>
		  <div class="col">Column</div>
		</div>
	  </div>

 

row-cols-* 변경해보자.

 

auto 를 사용하면 컨텐츠 크기에 맞게, 여백을 사용하지 않는다.

	  <div class="container text-center">
		<div class="row row-cols-auto">
		  <div class="col">Column</div>
		  <div class="col">Column</div>
		  <div class="col">Column</div>
		  <div class="col">Column</div>
		</div>
	  </div>

 

컬럼 정렬위치 지정하기 

  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>

 

 

순서변경

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>



<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

<div class="container text-center">
  <div class="row">
    <div class="col order-md-1 order-sm-2">
      First in DOM, ordered last
    </div>
    <div class="col order-md-2 order-sm-1">
      Second in DOM, unordered
    </div>
  </div>
</div>

 

1. index "Voluptatem dignissimos provident quasi corporis voluptates sit assumenda." 부분과 이미지부분의 순서를 바꿔보자.

 

 

offset

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

 

 

( 시간이 좀 있다면 Table 소개 )

 

여기까지 수고하셨습니다. 

 

과제

 

Typograpy, Table, image 는 스스로 공부하시고.

특히 Table 을 공부하여 , 

 

1) 여러분수업을 듣는 학생의 목록을 만들어보세요. student.html 이라는 이름으로 저장 해주세요.

이름, 나이, 성별, 주소(동까지), 과목

 

* 선생님이 아니라면 직원들 목록을 만들어주세요.

 

2) 화면이 md 일때는 주소가 화면에 안나오도록,  sm 일때는 나이와 성별도 화면에 안나오도록 만들어보세요.

 

3) 테이블 헤더 ( "이름"," 나이", "성별" ..... ) 부분은 검정색으로, 학생중 가장 우수한 학생은 배경색을 primary 로 넣어주세요. 

 

4)  작성한 student.html 파일을 박선생님께 메일로 보내주세요.  ( CDN 으로  bootstrap js 와 css 를 포함하고 있어야 합니다. ) 

 

 

 

오늘도 가장 수고하신 박선생님께 감사와 박수를!!

저작자표시

'Hokma Developer School :: Course 1' 카테고리의 다른 글

[Bootstrap 기초] 3. Form  (0) 2024.10.20
[Bootstrap 기초] 2. Text, Color, Padding, Align  (0) 2024.10.20
[Git 기초 사용법] 6. Git Page ( Hosting ) / Tip  (1) 2024.10.11
[Git 기초 사용법] 5. Gui Tool 을 이용한 관리 ( SourceTree 사용법 )  (0) 2024.10.01
[Git 기초 사용법] 4. Git을 이용한 협업 / GitHub Pull Request  (0) 2024.09.27

'Hokma Developer School :: Course 1'의 다른글

  • 현재글[Bootstrap 기초] 1. Bootstrap 과 Grid

관련글

티스토리툴바