반응형 레이아웃

기본 반응형 적용 쿼리

---

권장 Breakpoint

1200px / 992px / 768px / 576px

이런 사이즈를 권장드립니다.

Bootstrap 라이브러리가 기본으로 권장하는 breakpoint 이며 그대로 따라하도록 합시다.

1200px부터를 태블릿사이즈로 볼지, 992px 부터를 태블릿 사이즈로 볼지는 여러분 마음이고

768px 부터를 모바일로 볼지, 576px 부터를 모바일로 볼지도 여러분 마음입니다.

4개 저렇게 다 쓰면 스타일 관리하기가 귀찮기 때문에

1200px

768px

이렇게 두개만 골라서

😎1200px 이하는 태블릿, 768px 이하는 모바일 이렇게 디자인하는게 가장 간편합니다.

---

반응형 레이아웃 예시
이해보다는 이런 패턴을 여러번 써봐야할 듯

<div class="explain-container">
    <div>
      <h4>제목</h4>
      <p>내용</p>
    </div>
    <div>
      <h4>제목</h4>
      <p>내용</p>
    </div>
    <div>
      <h4>제목</h4>
      <p>내용</p>
    </div>
    <div>
      <h4>제목</h4>
      <p>내용</p>
    </div>
    <div style="float : none; clear : both"></div>
  </div>

---

.explain-container>div {
  float : left;
  width : 25%;
}

@media screen and (max-width : 992px) {
  .explain-container>div {
    float : left;
    width : 50%;
  }
}

@media screen and (max-width : 768px) {
  .explain-container>div {
    float : none;
    width : 100%;
  }
}

---

내가 고민해본 방식은 모바일형태의 레이아웃 구현은 했지만 2 * 2 형태의 박스형태를 반응형으로 디자인하지 못했음.

.test {
  display: flex;
}
.compo {
  width: 25vw;
  height: 9rem;
}

@media screen and (max-width: 768px){
  .test {
    flex-direction: column;
  }
}