부트스트랩(BootStrap)

부트스트랩(Bootstrap)

- 트위터에서 개발한 오픈 소스 프론트엔드 프레임워크.
- 반응형 웹 디자인
- 부트스트랩은 프레임워크이기 때문에 어느정도 기본 스타일은 제공해주지만, 추가적인 스타일이 필요할 경우 css를 사용해서 디자인을 만들어줘야함

https://getbootstrap.kr/  : 부트스트랩으로 이동하기
        
사용 방법(둘 다 필수로 사용해야함)

부트스트랩 홈페이지에서 CDN 코드를 복사한 후에

 

 

css는 link에, js는 script에 넣는다.

※ integrity : 
- 링크를 안전하게 가져오기 위해 설정하는 속성
- 필수는 아니나 보안이나 신뢰성을 위해 설정하는 것이 좋음

※ crossorigin :
- anonymous : 자격 증명을 포함하지 않도록 설정
- 필수는 아니나 보안이나 신뢰성을 위해 사용하는 것이 좋음

라이브러리와 프레임워크 차이
- 라이브러리 = 뷔페  -> 라이브러리는 개발을 함에 있어 사용범위가 더 넓음
- 프레임워크 = 밀키트 -> 프레임워크는 개발을 함에 있어 사용범위가 제한적

class 사용 방법 정리

container
 - 반응형 고정 폭을 제공하는 역할
 - 페이지 콘텐츠를 정렬하고 중앙에 배치
 - 기본적으로 페이지의 양 옆에 여백을 줘서 콘텐츠를 중앙에 정렬

row
 - container에서 가로 한 줄을 나타냄

col
 - row(가로)한 줄에서 세로로 몇 칸을 차지할 것인지 설정
 - row 한 줄은 col-1~12로 이루어져 있음
 - col이 12를 초과할 경우 다음 줄(row)로 이동
 - ex)
     col-1 : 세로로 중간사이즈로 1칸
     col-xs-1 : 세로로 가장 작은 사이즈로 1칸 차지
     col-4 : 한 줄에서 4칸을 차지. 총 12칸 중 8칸의 여유칸이 남음

 

 

card
 - 부트스트랩에 있는 card 스타일을 적용

card-body
 - card 본문 틀. 안에 img, title, text 등을 넣어줌

card-title
 - card 본문에서 제목을 나타냄. 제목 스타일을 적용

 

card-text
 - card 본문에서 내용을 작성하는 공간. 텍스트 스타일 적용

card-img-위치
 - card에 있는 img 위치를 적용
 - img가 card 밖으로 나가는 것을 방지. card 틀 안에 있을 수 있도록 해줌
                -> width나 height를 안써도 됨
 - card-img-top : 이미지를 위에 배치
 - card-img-bottom : 이미지를 아래에 배치

 

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

justify-content-end 
  - flex 컨테이너 내에서 아이템이나 태그를 오른쪽 끝으로 정렬

justify-content-start 
  - flex 컨테이너 내에서 아이템이나 태그를 왼쪽 끝으로 정렬

justify-content-center 
  - flex 컨테이너 내에서 아이템이나 태그를 가운데로 정렬

table 
  - table 태그 시작을 알리는 기능
  - table-striped : 테이블의 짝수행과 홀수행에 다른 배경색을 적용
        
img 설정하기

1. img-fluid : col이나 특정 가로 크기에 맞게 조정
    - col-4 img-fluid : 4칸 기준으로 이미지 크기가 맞게 들어가짐
        -> width: 100%, height : auto;

2. img-thumbnail : 이미지에 테두리와 패딩을 추가해서 썸네일 이미지 스타일을 적용

3. rounded : 이미지의 모서리를 둥글게 만듦
-> border-radius : 25rem

4. rounded-circle : 이미지를 가볍게 원형으로 만듦
    -> border-radius : 50%

5. rounded-pill : 이미지 모서리를 완전히 둥글게
    -> border-radius : 50rem