[코딩클럽/웹개발 종합반] 부트스트랩 기본 / 컨테이너(container-fluid클래스)

[코딩클럽/웹개발 종합반] 부트스트랩 기본 / 컨테이너(container-fluid클래스) - 1주차 2장

2022. 5. 29. 15:30ㆍ비즈니스 탐색/개발

728x90

[코딩클럽/웹개발 종합]

1주차 2장

부트스트랩

Bootstrap 5는 반응형 모바일 우선 웹 사이트를 만들기 위해 가장 널리 사용되는 HTML, CSS 및 JavaScript 프레임워크 인 Bootstrap 의 최신 버전이다.

부트스트랩은 예쁜 CSS를 미리 모아둔 것이다. CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다고 한다. 남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일하다. (다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐.

부트스트랩 시작 템플릿이 있다.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title> 부트스트랩 연습</title>
</head>

<body>
    <h1> 연습 </h1>
</body>

</html>

부트스트랩에는 타이포그래피, 양식, 버튼, 테이블, 탐색, 모달, 이미지 캐러셀 및 기타 여러 가지를 위한 HTML 및 CSS 기반 디자인 템플릿과 선택적 JavaScript 플러그인이 포함되어 있다. 또한 부트스트랩은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다.

문득 궁금한 점 : 왜 사용할까?

사용하기 쉬움: HTML 및 CSS에 대한 기본 지식만 있으면 누구나 부트스트랩 사용 가능
반응형 기능: Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정
모바일 우선 접근 방식: Bootstrap에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다. 브라우저 호환성: Bootstrap 5는 모든 최신 브라우저(Chrome, Firefox, Edge, Safari 및 Opera)와 호환.

추가로 연습.

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

width=device-width부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정된다(장치에 따라 다름).

initial-scale=1부분은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정한다.

<!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.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>.container-fluid clas</h1>
  <p>연습</p>
  <p>.container-fluid class</p>     
</div>

</body>
</html>

또한 부트스트랩 5에는 사이트 콘텐츠를 래핑하기 위한 포함 요소가 필요하다. 선택할 수 있는 두 가지 컨테이너 클래스가 있다고 하며, container클래스는 반응형 고정 너비 컨테이너를 제공하고 .container-fluid클래스는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 제공한다.

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

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>연습</h1>
  <p>어떻게 되려나</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>갈길이멀다</p>
      <p>할수있다</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>뭐든</p>
      <p>꾸준히</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>즐겁게</p>
      <p>도전</p>
    </div>
  </div>
</div>

</body>
</html>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <style>
        .wrap {
            width: 900px;
            margin: auto;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
            featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </p>
    </div>
        <div class="card-columns">
        <div class="card">
            <img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

728x90

저작자표시 비영리 변경금지

'비즈니스 탐색 > 개발' 카테고리의 다른 글

[코딩클럽/웹개발 종합반] 1주차 3장 - 자바스크립트 기본/함수만들기/버튼 함수 연결 (0)	2022.06.03
[앱개발/종합반] 1주차 1강 - 앱 개발과 서버의 이해, 자바스크립트 기초 (0)	2022.05.30
[코딩클럽/웹개발 종합반] HTML, CSS 기본 - 1주차 1장 (0)	2022.05.29
[준비] 프로그램 설치 Pycharm Professional / JetBrains / aws가입 (0)	2022.05.22
[오류/에러] HTTP Status 405 - Request method 'POST' not supported (0)	2022.02.24

Fail Hard. Fail Fast. Fail Often

Fail Hard. Fail Fast. Fail Often

태그

최근글

댓글

공지사항

아카이브

1주차 2장

부트스트랩 시작 템플릿이 있다.

문득 궁금한 점 : 왜 사용할까?

추가로 연습.

'비즈니스 탐색 > 개발' 카테고리의 다른 글

관련글

티스토리툴바