Breakpoint 2

container, container-breakpoint, container-fluid

Container 컨테이너는 부트스트랩에서 기본이 되는 블록이다. 흔히 건축에서 컨테이너 박스라고 말하는데, 컨테이너는 직사각형 모양의 틀이라고 본다. 부트스트랩에서 컨테이너는 기본이 되는 상자이고, 그 안에 컨텐츠들이 들어간다. 그냥 컨텐츠를 배열하지 않고 컨테이너를 쓰는 이유가 있다. 컨테이너를 쓰면 배열, 정렬, 패딩, 마진 등을 적용하기가 용이하다. 컨테이너에는 3가지 종류가 있다. 첫 번째는 그냥 컨테이너(container)다. 이것은 화면의 최대 너비가 뷰포인트에 따라 조절되는 반응형이다. 뷰포인트가 다음 breakpoint가 되기 전까지는 해당 너비를 유지한다. 다만, 너비가 점프하듯 자연스럽지 않고, 끊어지는 느낌으로 변경된다. 두 번째는 반응형인 컨테이너-사이즈(container - br..

웹개발/Bootstrap 2022.11.29

grid, 그리드, 배경색깔, 경계선, breakpoint, responsive class, 반응형열, col-lg-숫자

Bootstrap의 장점 중의 하나는 반응형웹을 쉽게 구현할 수 있다는 점이다. 반응형, responsive이라는 뜻은 웹사이트가 화면이나 viewpoint의 크기에 재깍 반응한다는 것이다. 즉 태블릿, 모바일, 데스크탑에 따라 화면 구성이 바뀌어 사용자의 가독성을 높여준다. 이를 구현하기 위한 그리드 시스템에 관해 배워보자. 그 전에... ※ 칼럼을 비교하기 위해 배경색깔 넣기 1) 클래스로 삽입 bg-primary/secondary/success/danger/warning/info... 공식 문서 ----->클릭 2) 스타일로 넣기 ※ 비교하기 위해 경계 넣기 1. 모든 열을 균등하게 분배함 기본적으로 한 행에 있는 열의 개수 만큼 똑같이 등분한다. Column Column Column Column ..

웹개발/Bootstrap 2022.11.20