[WEB] Frontend - Bootstrap

<한줄요약>

BootStrap : 반응형 웹을 class로 쉽게 지원 가능한 framework

 

1. 반응형 웹

 

viewport

-  모바일 기기에서 화면에 표시되는 영역을 말한다

-  같은 HTML/CSS로 웹, 모바일, 태블릿 등 다양한 규격의 화면을 자동 지원

-  viewport를 지정해 기기별로 맞춤 표시한다

//가로 길이를 device의 width로 설정하고, 기본 확대 배율은 1로 한다
<meta name="viewport" content="width=device-width, initial-scale=1">

속성	설명	값 범위
width	viewport 가로 길이	고정값 or device-width
height	viewport 세로 길이	고정값 or device-height
user-scalable	사용자의 페이지 확대/축소 가능 여부	yes(기본) / no
initial-scale	최초 확대/축소 값	0~10, 1(기본)
minimum-scale	최소 축소 값	0~10, 0.25(기본)
maximum-scale	최대 확대 값	0~10, 1.6(기본)

 

 

media query

-  미디어 타입, 조건식을 지정해 CSS를 반응형으로 조작한다

.title {
  font-size: 40px;
}
//width가 600 이하이면 font-size를 40이 아닌 20으로 출력 
@media (max-width: 600px) {
  .title {
    font-size: 20px;
  }
}

 

2. Bootstrap

 

-  반응형 디자인을 쉽게 생성 가능한 frontend framework

-  class로 지정 가능한 다양한 디자인 제공

 

container / container-fluid

-  반응형 컨테이너 제공.

-  fluid : viewport의 가용 너비 전체를 사용하는 컨테이너 제공

 

grid system

-  container 내부에서 row class를 사용해 열을 분리한다

-  각 열은 기본적으로 12개의 column으로 구분되어 있다.

-  해당 grid들을 n개씩 묶어서 사용한다

<div class="container">
	<div class="row">
		//전체의 1/6 차지
		<div class="col-2"></div>
		//전체의 1/3 차지
		<div class="col-4"></div>
		//전체의 1/2 차지
		<div class="col-6"></div>
	</div>
</div>

-  화면의 크기에 따라 grid 표현 여부를 조절 가능하다

-  <div class="col-sm-3"></div> 태그를 4개 만들었다면, 화면 크기가 576 이상일때는 3/12 grid를 차지하는 4개의 div가 가로로 나오고, 576 이하일때는 각 div가 1줄씩 나오게 된다