부트스트랩

카테고리 없음

부트스트랩

Hanachoi 2022. 7. 30. 15:41

부트스트랩도 생각보다 활용하는 곳이 많다. responsive web design을 할때도 빠르게 응용할 수 있다. 다같은 코드를 쓰면 사이트가 같아질 거라 생각할수도 있겠지만 디자인적 요소는 얼마든지 바꿀 수 있으며 필요한 부분의 코드만 가져와서 사용하는것도 가능하다.
부트스트랩 전체를 다운로드 받은 뒤, 현재 작업 중인 파일에 같이 넣고 <link>태그를 통해서 같이 연결시켜 사용할 수도 있음.
하지만 굳이 다운로드 받지 않아도 CDN link를 html파일에 <link> 로 연결해서 사용도 가능하다 .
bootstrap CDN을 넣은 뒤 <link>로 내가 만든 css파일을 밑에 붙여주면 bootstrap이 내 디자인을 덮지 않는다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

자바스크립트 부분도 <body>안에 넣어줘야 한다. 이 코드를 다 넣어줘야 반응형 nav등을 만들때 작동이 제대로 된다.

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

이 url은 변경될수도 있기 때문에 확실하게 실제 web을 만들때는 다운로드 받아서 사용하는게 더 좋다.

#Container

부트스트랩에서 가장 기본적인 레이아웃 요소이다. Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
부트스트랩은 보통 미리 설정된 class로 코드가 구성되어 있는 편이다.

<div class="container">
  <!-- Content here -->
</div>

container에서는 기본적으로 위 코드안에 내용을 넣어주면 레이아웃을 잡을 수 있다.
container-fluid : 전체너비 컨테이너가 되어 뷰포트 전체너비를 차지하게 된다.
responsive containers : container의 사이즈를 정할 수 있게 해준다.
보통은 기본적인 container나 container-fluid를 많이 사용하고 그 안에서 주로 구성을 한다.

# Button

홈페이지에 기본적으로 있는 버튼의 색들은 모두 변경가능하다.
<a>나 <input> 태그의 요소를 버튼 모양으로 만들어서 사용하는 기능도 있음.
여러가지 기능을 한 태그에 적용할수도 있음 ex) outline button btn-lg(large button)

#타이포그래피, 유틸리티

폰트의 사이즈를 기본보다 더 크게 혹은 작게 만들 수 있음.
blockquote 태그를 이용해서 인용문을 작성하고 그 밑에 저자를 적어주는 footer도 작성가능하다.
background-color나 color같이 단독 사용말고 다른 요소에 붙여줘야 사용가능한 애들도 있음.

#배지와 경고, 버튼 그룹

button group : 여러개의 버튼을 하나의 <div>로 묶어서 합쳐진 하나의 버튼을 만들 수 있음. 사이즈도 여러가지로 조절 가능.
Alerts : 유저에게 피드백을 주는 기능.
보통 Alert이나 button 에 X자를 표시하고 싶을때는 entity code를 사용한다. 실제 문자 X와 다른 걸 나타내기 위해서.
aria-hidden 의 뜻은 항상 등장할 필요가 없다는 듯이다.

# 부트스트랩 그리드 개요

그리드 시스템은 컨테이너 안에서만 작동을 하기 때문에 페이지 당 최소 한 개 이상의 container 요소가 필요하다.
행(row) class를 이용해서 행을 만들어야 활용 가능함. 부트스트랩의 모든 행에는 분배될 공간이 12유닛씩 있음. 그리고 그 안에 column을 나눠서 만들어주면 Grid 활용이 가능해진다.
[col-숫자]로 나눠지는 부분이 열을 나누는 부분이고 숫자부분에 원하는 비율로 열을 만들어서 설정이 가능하다.
12유닛 안에서 비어지는 숫자만큼은 공백으로 남을 수도 있고 추가적으로 [col-숫자]로 남은만큼 비율을 정할 수도 있다.
col만 쓰고 뒤에 숫자를 쓰지 않는다면 Autosized되어서 같은 비율로 나눠지는걸 볼 수 있다.
만약에 4개의 버튼이 있고 하나만 [col-9]의 값을 가진다면 이 값을 가진 애만 9의 비율을 가지고 나머지는 자동적으로 남은 비율을 배분받게 된다.

#반응형 부트스트랩 그리드

텍스트나 사진을 넣을 때 브라우저의 크기에 따라 움직이도록 사이즈를 조정할 수 있음.

      <div class="row g-0">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1657299156725-dc862fea3e11?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=1000&q=60" alt="">
            </div>
            <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1657299156286-29f1a3a33ea3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=1000&q=60" alt="">
          </div>
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1657299156261-4ce1d0a2cf5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=60" alt="">
          </div>
        </div>

기본적으로 container 안에서 row / column을 나눠주고 img나 텍스트<div>를 각각의 col안에 넣어주면 됨.
중단점에 도달 할 때느 중단점 기준마다 분배할 수도 있음. breakpoint를 나누고 싶은 지점을 뒤에 또 class로 달아주면됨.
이미지 사이에 흰 공간(빈틈)같은게 생길 수 있는데 없애고 싶다면 [g-0] 을 달아주면 없앨 수 있다.

#유용한 그리드 유틸리티

그리드는 기본적으로 flex-box의 원리위에서 만들어졌다. align-items / justify- content 같은 요소들을 부트스트랩에서도 활용이 가능하다.