반응형 웹

반응형 웹디자인

• 브라우저의 크기에 따라 레이아웃이 바뀐다
• 따로 모바일 버전을 만들지 않아도 된다
• ex) @media (min-width: 768px) {
  h1 {
  font-size: 36px;
  }
  p {
  font-size: 24px;
  }
  }
  가로 길이가 768px 이상일 때 아래의 스타일을 입히라는 것

부트스트랩

• 기본 구성

  • 컨테이너(container)
  • 행(row)
  • 열(column)

• 기본 규칙

  • 행(< div class="row">)은 꼭 컨테이너(< div class="container">) 안에 넣어주기
  • 열(< div class="col">)은 꼭 행(< div class="row">) 안에 넣어주기. 오직 열만 행의 직속 자식 가능
  • 콘텐츠는 꼭 열(< div class="col">) 안에 넣어주기

• 기본 사용법

  • 부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각

  • ex) 한 줄을 정확히 3등분 하려면 4칸을 차지하는 열(< div class="col-4">) 3개를 쓰면 된다

  • 열을 또 여러 열로 나누는 것을 '중첩(nesting)'한다고 부른다

  • 중첩을 하기 위해서는 우선 열(< div class="col-6">) 안에 새로운 행(< div class="row">)을 써야한다.

• 부트스트랩에서 정해둔 구간

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

컨테이너

• < div class="container">: 구간별로 그리드에 고정된 width를 설정해줍니다.

• < div class="container-fluid">: 그리드는 항상 width: 100%;입니다.

열

• < 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칸 차지

• < 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칸 차지