오봉이와 함께하는 개발 블로그

Bootstrap - 적용방법, Container 본문

FE/CSS

Bootstrap - 적용방법, Container

오봉봉이 2021. 12. 6. 22:44
728x90

FrontEnd_day3 정리 (2021.12.06 월요일)

Bootstrap

  • HTML, CSS, JS 라이브러리
  • jQuery 기반의 HTM5 Web Framework
  • 프론트엔드에서 작동되는 프레임워크
  • 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈 소스 프레임 워크 (라이브러리)
  • HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함
  • 자바스크립트를 선택적으로 확장 가능

Bootstrap 특징

  • 쉽고 편리하게 사용할 수 있음
  • HTML/CSS 기본 지식만 있으면 누구나 사용 가능
  • 반응형 웹 디자인
  • PC 또는 스마트폰이나 태블릿 등의 모바일용 디자인 지원
  • 모든 최신 브라우저와 호환

Bootstrap 기능

  • CSS 기능 : 디자인이나 스타일 적용
  • 컴포넌트 기능 : 내비게이션 바, 탭, 버튼 등의 기능을 간단하게 수정해서 사용 가능
  • 자바스크립트 기능 : 사용자의 액션과 상호작용하는 기능 제공

Bootstrap 장점

  • 쉽고 빠르게 다양한 기능 개발 가능
  • 모바일 환경과 반응형 웹 제작 가능
  • 수준 높은 퀄리티 제공
  • 개발 시간 단축으로 개발 비용 절감
  • 오픈 소스이며 상업적 이용 가능

Bootstrap 단점

  • jQuery 의존성 높음
  • 정형화된 디자인

사용 방법

  • 파일을 다운 받아서 사용
    • Bootstrap 구성
      • css 폴더
      • js 폴더
      • Bootstrap을 다운로드 받아 프로젝트 폴더에 css, js 폴더를 넣는다.
    • jQuery파일 필요
      • jQuery 파일을 다운로드 받아서 프로젝트 폴더에 넣는다.
  • CDN 이용
    • 링크를 통해서 네트워크로 import

Bootstrap 사용

  • 부트스트랩에 정의된 다양한 클래스들을 HTML 태그에 적용하고 (class 속성에 지정)
  • 부가적인 속성들을 정의한 클래스들을 조합해서 사용
<태그 class=”bs클래스이름1  bs클래스이름2, …..” >
<button type=”button” class=”btn btn-primary”>
<div class=”container bg-primary text-white”>

Bootstrap 색상

주요 기능

  • Containers
  • Jumbotron
  • Grid
  • button
  • Table
  • Image

Containers

  • 레이아웃 최상위 요소로 다른 요소 포함
  • <div clas=”container”>
  • .container : 반응형 고정 폭 컨테이너
  • .container-fluid : 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너
  • 컨테이너 예제 (container.html)
  • viewport 포함
  • <link> : css/bootstrap.min.css
  • <script> : jquery 파일 소스 지정
  • <script> : js/bootstrap.min.js 소스 지정
  • 순서 주의!!!
    • jquery 파일 소스 지정이 먼저 와야 함
container.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery가 먼저 와야 한다!!! -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container bg-primary text-white">
        <h1>bootstrap</h1>
        <p>container</p>
    </div>
    <div class="container-fluid bg-danger text-white">
        <h1>bootstrap</h1>
        <p>container</p>
    </div>
</body>
</html>

728x90
저작자표시

'FE > CSS' 카테고리의 다른 글

Bootstrap - Jumbotron, Grid, Button, Image, Table, Navigation Bar  (0) 2021.12.07
CSS - 반응형 웹  (0) 2021.12.06
CSS 예제  (0) 2021.12.06
외부 CSS 파일 HTML에 적용  (0) 2021.12.03
CSS 속성  (0) 2021.12.03
'FE/CSS' Related Articles more
Comments