부트스트랩

✔bootstrap

트위터에서 개발한 오픈 소스 프론트엔드 프레임워크

반응형 웹 디자인

 

부트스트랩은 프레임워크 이기 때문에 어느정도 기본 스타일은 제공해주지만

추가적인 스트일이 필요할 경우 css를 사용해서 디자인을 만들어줘야 한다.

https://getbootstrap.kr/

Bootstrap

 

[사용방법 - 둘 다 필수로 사용하기]

1. 부트스트랩 css 적용하기

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

2. 부트스트랩 js 적용하기

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

✔라이브러리 와 프레임워크 차이

라이브러리는 샤브샤브뷔페와 같다 왜냐면 샤브샤브집에가서 여러가지를 골라서 음식을 먹을수 있듯이

개발자가 개발을 하는데 있어 범위가 더 넓다.

프레임워크는 샤브샤브밀키티와 같다 샤브샤브밀키티는 먹을 용량 1인분, 2인분등 정해져 있으며 집에서

간단히 조리해먹는 것과 같이 개발자가 개발을 하는데 있어 사용범위가 제한적이다.

 

[사용방법 정리]

 container : 반응형 고정 폭 을 제공하는 역할
                  페이지 콘텐츠를 정렬하고 중앙에 배치
                  기본적으로 페이지의 양 옆에 여백을 줘서 콘텐츠를 중앙에 정렬
      row       : container에서 가로 한 줄을 나타냄
                  가로 한 줄은 col-12 로 이루어져 있음
                  가로 한 줄의 col이 12를 초과할 경우
                  다음 줄로 자동으로 이동
      
      col       : row(가로 한 줄) 에서 세로로 몇 칸을 차지할 것인지
                  col-1 : 세로로 중간사이즈로 1칸
                  col-xs-1 : 세로로 가장 작은 사이즈로 1칸 차지
                  col-4  : 가로 한 줄에서 4칸을 차지하게되며
                           가로 한 줄은 총 12칸이기 때문에 여유 칸은 8칸이 됨

card : 부트스트랩에 있는 카드 스타일을 적용
        card-body  : 카드 본문 틀   특 안에 img나 title이나 text 등을 넣어줌
        card-title : 카드 본문에서 제목을 나타냄
                        제목 스타일을 적용
        card-text  : 카드에서 내용을 작성하는 공간
                        텍스트 스타일을 적용
        card-img-위치 : card에 있는 img 위치를 적용
                        img가 카드 바깥으로 나가는 것을 방지
                        카드 틀 안에 img가 있을 수 있도록 도와줌
                        width / height 사용하지 않아도 됨
                        card-img-top    : 이미지를   위에 배치
                        card-img-bottom : 이미지를 아래에 배치
        img 설정하기
          img-fluid : col이나 특정 가로 크기에 맞게 조정
                  col-4 img-fluid
                  4칸 기준으로 이미지크기가 딱 맞게 들어가짐
                  width : 100% height : auto
          img-thumb nail : 이미지에 테두리와 패딩을 추가해서 썸네일 이미지 스타일 느낌을 적용

          rounded : 이미지의 모서리를 둥글게 만듬
                     border-radius : 25rem

          rounded-circle : 이미지를 가볍게 원형
                    border-radius : 50%
          
          rounded-pill : 이미지 모서리를 완전히 둥글게
                    border-radius : 50rem

       d-flex : 태그를 flex 컨테이너로 만들어줌
                태그 아래에 생기는 아이템이나 태그는 flex에서 지정한
                규칙에 따라 정렬

       justify-content-end : flex컨테이너 내에서
                 아이템이나 태그를 오른쪽 끝으로 정렬
       justify-content-start : flex컨테이너 내에서
                 아이템이나 태그를 왼쪽 끝으로 정렬
       justify-content-center : flex컨테이너 내에서
                 아이템이나 태그를 가운데로 정렬 

       table : 테이블 태그 시작을 알리는 기능
       table-striped : 테이블의 짝수행과 홀수행에 다른 배경색을 적용해서
                  행 구분을 시각적으로 편하게 구분할 수 있도록 적용