bootstrap 활용하면서 알게된 사항

반응형 디자인(모바일, 태블릿, PC 등 사이즈가 다양한 단말에 맞게 화면 반응)

12분할을 하여 col-sm-4, col-sm-8과 같이 화면을 2분활 할 수 있다. sm으로 지정하면 sm이상 크기 단말에서는 2분활하고, 그 보다 작은 단말에서는 분활하지 않는다.

None (auto)	540px	720px	960px	1140px
.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
12분할

 

<div class="col-sm-3 col-4">
<div class="col-sm-3 col-4">
<div class="col-sm-3 col-4">
<div class="col-sm-3 col-4">

위와 같이 작성하면, 540px이상에서는 4개로 나뉘고, 그 이하에서는 3개로 나뉜다.

 

flex 개념
flex박스 하위의 요소들(예를들어 div 등)을 flex박스 안에 배치한다. d-flex-row하면 가로로 여러개, d-flex-column하면 세로로 여러개 배치하는 형태. flex의 정렬 속성은 justfy-content로 지정한다.

justfy-content 의 정렬속성에는 start(시작위치부터 배치), end(끝부터 배치), center, between(요소사이에 여백배분), aroud(여백배분), evenly(모두 같은 여백)

<div class="d-flex justify-content-center">