박스의 형태를 flex 로 정의함. d-flex, d-inline-flex 공간1 공간1 부모영역의 왼쪽부터 표시된다. 공간1 공간1 부모영역도 줄어든다. 자식 배열을 "열로" or "줄로" 할지 정할 수 있다. flex-row, flex-row-reverse, flex-column, flex-column-reverse 박스의 좌우를 기준으로 자식박스를 정렬한다. 공간1 공간1 justify-content-start justify-content-center justify-content-end justify-content-between 양쪽끝 여백없이 좌우정렬 justify-content-around 모든 여백을 동일하게 정렬 공간1 공간1 자식영역 내용이 많더라도 줄바꿈을 하지 않는다. justify-c..
프로그래밍/Bootstrap
margin -> m padding -> p margin-top, padding-top -> t margin-bottom, padding-bottom -> b margin-left, padding-left -> (start) s margin-right, padding-right -> (end) e both left, right -> x both top, bottom -> y 0,1,2,3,4,5,auto mt-0 ms-1 px-2 p-3
우리가 보이는 웹페이지 화면을 예전에는 HTML 에서는 table 을 이용해서 화면 구성을 했다. 그 이후는 웹페이지의 표준화를 위해서 태그를 이용한다. bootstrap에서는 좀더 편리하게 화면을 구성할 수 있는 Grid 시스템을 제공한다. 기본 박스() 를 만들고 그 안에 여러개의 박스가 자연스럽게 공간을 차지하도록 만들어준다. 1칸 1칸 1칸 기억할 사항은 class="row", class="col" 이다. row 는 한줄 col 은 1칸을 의미한다. 즉 한줄에 몇개의 칸을 넣어주는 형태이다. 각 칸의 넓이를 자유롭게 변경해 줄 수 있다. 여기서 기억할 것은 총 12칸이다. 12칸을 어떻게 나눌것인가를 생각해야 한다. .col-sm-3 .col-sm-3 .col-sm-3 .col-sm-3 col-s..
1. 가 가장 기본이다. box 를 만든다. 2. 박스의 모양을 만들어낸다. 3. 가장 기본적인 박스형태를 만들어준다. class="container" class="container-fluid" 무조건 넓이 100%를 만들어준다. 4. 화면 크기에 따라서 박스의 크기가 자동으로 변하는 반응형 박스를 만들 수 있다. container-sm 576px 에서는 무조건 100% container-md 768px 이하는 무조건 100% 이상은 가변크기로 변함. container-lg 992px 이하는 무조건 100% 이상은 가변크기로 변함. container-xl 1200px 이하는 무조건 100% 이상은 가변크기로 변함. container-xxl 1400px 이하는 무조건 100% 이상은 가변크기로 변함. 반응..
