반응형 웹

브라우저의 크기에 따라 요소들의 크기, 배치가 바뀌는 것

h1{
	font-size:36px;
   }
p{
	font-size: 24px;
 }
@media ( min-width : 768px){
	h1{
    	font-size:36px;
       }
    p{
    	font-size: 24px;
     }
 }
    

->브라우저의 가로 길이가 768px이 넘어가면 폰트 사이즈 36px, 24px이 됨

부트스트랩

프론트엔드 프레임 워크 (이미 민들어져있는 기능)

부트스트랩 그리드

세가지 구성원이 있다.
1. 컨테이너 (container)
2. 행 (row)
3. 열 (column)

기본 규칙

1. 행(<div class="row">)은 꼭 컨테이너(<div class="container">) 안에 넣어주기
2. 열(<div class="col">)은 꼭 행(<div class="row">) 안에 넣어주기. 오직 열만 행의 직속 자식이 될 수 있다.
3. 콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭 열(<div class="col">) 안에 넣어줘야 한다.

부트스트랩 그리드는 한 줄에 기본적으로 12칸의 열이 있다.
따라서 정확히 3등분 하고 싶으면 네 칸을 차지하는 열 세 개를 쓰면 된다. <div class="col-4">
12칸을 넘어가면 새로운 줄로 넘어가게 된다.

부트스트랩 반응형 그리드

Extra Small (< 576px): 모바일
Small (≥ 576px): 모바일
Medium (≥ 768px): 타블릿
Large (≥ 992px): 데스크탑
Extra Large (≥ 1200px): 와이드 데스크탑

컨테이너 (container)

가운데 정렬이 되어 있고,그리드의 행들을 감싸주는 역할,
종류는 두가지이다.
1. <div class="container">: 구간별로 그리드에 고정된 width를 설정하고 싶을 때 사용
2. <div class="container-fluid">: 그리드는 항상 width: 100%;
다음과 같은 css코드가 적용

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

열 (column)

반응형 구간별로 (총 12칸 중) 열이 차지하는 칸의 개수도 다르게 할 수 있다.

예시 1 (구간별로 모두 설정되어 있는 경우)

<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">

Extra Small (< 576px): 12칸을 모두 차지
Small (≥ 576px): 6칸 차지
Medium (≥ 768px): 4칸 차지
Large (≥ 992px): 3칸 차지
Extra Large (≥ 1200px): 2칸 차지

예시 2 (특정 구간만 설정되어 있는 경우)
아래와 같이 특정 구간에만 열 수가 설정되어 있는 경우도 있습니다. 그렇다면 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지합니다.

<div class="col-12 col-lg-3">

Extra Small (< 576px): 12칸을 모두 차지
Small (≥ 576px): 12칸을 모두 차지
Medium (≥ 768px): 12칸을 모두 차지
Large (≥ 992px): 3칸 차지
Extra Large (≥ 1200px): 3칸 차지

<div class="col-6">

Extra Small (< 576px): 6칸 차지
Small (≥ 576px): 6칸 차지
Medium (≥ 768px): 6칸 차지
Large (≥ 992px): 6칸 차지
Extra Large (≥ 1200px): 6칸 차지