본문 바로가기
css

CSS 프레임워크 소개(부트스트랩)

by code-box 2022. 2. 22.
반응형

도입

웹 개발에서 프레임워크의 활용에는 다른 측면이 있으며, 더 중요하게는 CSS3와 자바스크립트를 위한 프레임워크를 수반하는 프런트엔드 엔지니어의 영역이다. CSS 프레임워크의 경우 Tailwind와 Bootstrap인 반면 자바스크립트 프레임워크의 경우 Reactjs, Vuejs, AngularJs가 있다. 부트스트랩에 대해 얘기해보도록 하죠

전제 조건

이 프런트 엔드 프레임워크를 사용하기 전에, 전제 조건이라고도 할 수 있는 기본 사항을 이해할 필요가 있습니다.

 

그리고 이러한 이해는 부트스트랩 프레임워크를 프런트엔드 개발자로 활용하는 방법일 수 있으며 HTML5 및 CSS3 사용 방법에 대한 이해를 수반합니다.

하지만 부트스트랩을 아주 잘 활용할 수 있으려면 이것을 배우고 이해하려는 의지가 있어야 한다.

이 기사의 목표

이 기사를 끝까지 읽은 후, 모든 독자는 다음을 할 수 있어야 한다.

  • 부트스트랩이 무엇인지 이해합니다.
  • 그것이 포함하는 것과 그것이 수행할 수 있는 기능들.
  • Html 및 CSS에서 부트스트랩을 사용하는 이유.
 

부트스트랩이란?

부트스트랩(Bootstrap)은 더 빠르고 쉬운 웹 개발을 위한 무료 프런트엔드 프레임워크로, 타이포그래피, 양식, 버튼, 표, 내비게이션, 모델, 이미지 회전목마 및 기타 많은 것들을 위한 HTML 및 CSS 기반 디자인 템플릿과 선택적 자바스크립트 플러그인을 포함한다.

부트스트랩에는 다른 유형이 있습니다.

  • 부트스트랩 3
  • 부트스트랩 4
  • 부트스트랩 5
    이 프레임워크(Bootstrap)의 개발에는 3에서 5로 업그레이드가 있었으며 이전에 사용 가능했던 것보다 더 나은 방식으로 작동할 수 있었습니다. 그래서 Bootstrap 5에 대해 논의하고 있습니다.
    참고:- 부트스트랩에는 사이트 내용을 줄바꿈하기 위해 포함하는 요소가 필요합니다.

부트스트랩 컨테이너
부트스트랩에 있는 컨테이너는 무엇인가?
용기는 내용물을 패딩하는 데 사용되며, 사용 가능한 두 가지 용기 클래스가 있습니다.

 
  • .container 클래스는 응답하는 고정 너비 컨테이너를 제공합니다.
  • .container-fluid 클래스는 뷰포트의 전체 너비에 걸쳐 전폭 컨테이너를 제공합니다.

그리고 다른 컨테이너 구역이 있다:

  • 고정 용기 고정 용기 프로그래밍 방법의 샘플
<div class="container">
    <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>
  • 유체 용기 고정 용기 프로그래밍 방법 샘플
 
<div class="container-fluid">
    <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>
  • 용기 패딩 고정 용기 프로그래밍 방법의 샘플
<div class="container pt-3"></div>
  • 용기 테두리 및 색상 고정 용기 프로그래밍 방법의 샘플
<div class="container p-3 my-3 border"></div>

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

<div class="container p-3 my-3 bg-primary text-white"></div>
 
  • Response containers 고정 용기 프로그래밍 방법 샘플
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>

그것이 포함하는 것과 그것이 수행할 수 있는 기능들.

부트스트랩 그것은 웹사이트의 응답성을 높이고 소형 전화기에서 대형 데스크톱에 이르기까지 모든 기기에서 자동으로 스스로를 잘 보이도록 조정한다.
프런트엔드 엔지니어로 설계를 생각보다 짧은 시간에 쉽게 완료할 수 있도록 지원하는 많은 기능과 기능들이 포함되어 있습니다.

수행할 수 있는 기능

 

저는 부트스트랩이 수행할 수 있는 기능 중 하나인 컨테이너와 그 외 어떤 것이 아래에 나열되어 있는지 논의했습니다. 팔로우 앤 라이딩을 즐기십시오.

부트스트랩 카드

부트스트랩 4의 카드는 내용물 주위에 패딩이 있는 테두리 상자입니다. 머리글, 바닥글, 내용, 색상 등에 대한 옵션이 포함되어 있습니다.

기본 카드
기본 카드는 .card 클래스와 함께 생성되며 카드 내부의 콘텐츠는 .card-body 클래스를 갖는다.

<div class="card">
    <div class="card-body">Basic card</div>
</div>
 

그리고 카드에는 Header, Content, footer가 있습니다. 카드에 어떻게 배열되어 있는지 보여주는 코드입니다.

<div class="card">
    <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

그리고 배경색을 추가하기 위해, 우리는 상황별 카드를 사용할 것이다.

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
              <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Cards with Contextual Classes</h2>
  <div class="card">
        <div class="card-body">Basic card</div>
  </div>
  <br>
            <div class="card bg-primary text-white">
                  <div class="card-body">Primary card</div>
  </div>
  <br>
                      <div class="card bg-success text-white">
                            <div class="card-body">Success card</div>
  </div>
  <br>
                                <div class="card bg-info text-white">
                                      <div class="card-body">Info card</div>
  </div>
  <br>
                                          <div class="card bg-warning text-white">
                                                <div class="card-body">Warning card</div>
  </div>
  <br>
                                                    <div class="card bg-danger text-white">
                                                          <div class="card-body">Danger card</div>
  </div>
  <br>
                                                              <div class="card bg-secondary text-white">
                                                                    <div class="card-body">Secondary card</div>
  </div>
  <br>
                                                                        <div class="card bg-dark text-white">
                                                                              <div class="card-body">Dark card</div>
  </div>
  <br>
                                                                                  <div class="card bg-light text-dark">
                                                                                        <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>

위의 코드는 부트스트랩에 포함된 다양한 색상의 일러스트로 순간을 사용, 확인 및 즐길 수 있습니다

 

Html 및 CSS에서 부트스트랩을 사용하는 이유.

웹 사이트나 웹 페이지의 대응성 필요성은 아무리 강조해도 지나치지 않으며 프론트엔드 엔지니어를 행복하게 만들고 작업을 멋지게 만듭니다.

Html과 CSS를 사용하지 않고는 부트스트랩을 사용할 수 없으며, 이 기사를 읽고 있다면 CSS 프레임워크에 접근하기 전에 필요한 기본 지식을 얻기 위해 이전 기사를 읽도록 권장할 것입니다.

결론

와우 이 환상적인 부트스트랩 시작하기 시리즈 기사를 통해 한 가지 또는 두 가지 이점을 얻으셨기를 바랍니다. 제 블로그에서 더 많은 것을 지켜보세요.

 

또한 HTML 및 CSS에 대해 자세히 알아보려면 이 문서를 읽어보십시오.

어떤 주제에 대해 더 알고 싶으시면 트위터에서 저에게 연락하시면 제가 답장하겠습니다. 시간을 내어 이 를 읽어 주셔서 감사합니다.

즐기세요

저작자표시

'css' 카테고리의 다른 글

CSS를 사용한 배치 배치 배치 이해  (0) 2022.02.22
HTML, CSS 및 Javascript를 사용한 응답형 사이드바 메뉴 설계  (0) 2022.02.22
CSS에서 논리 쓰기  (0) 2022.02.22
주 이미지 색상 간 전환을 사용하여 프레임 애니메이션화  (0) 2022.02.22
jarallax.js로 아름다운 시차 랜딩 페이지를 만드는 방법  (0) 2022.02.22

관련글

댓글

티스토리툴바