반응형 레이아웃

📒 CSS 단위 알아보기

✔ vw

현재 브라우저 폭에 비례해서 설정할 수 있는 단위

.test {
  width: 100vw;
  height: 100vw;
  background-color: grey;
}

✔ vh

현재 브라우저 높이에 비례해서 설정할 수 있는 단위

.test {
  width: 100vw;
  height: 50vh;
  background-color: grey;
}

✔ rem

html 태그(16px) 폰트 사이즈에 비례해서 설정할 수 있는 단위

.test {
  width: 100rem; // 1600px
  height: 50vh;
  background-color: grey;
}

✔ em

내 폰트 사이즈에 비례해서 설정할 수 있는 단위

.test {
  font-size: 15px;
  width: 100rem; // 1500px
  height: 50vh;
  background-color: grey;
}

📒 반응형 레이아웃

✔ head 태그에 다음 코드를 기입한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

◼ width=device-width -> 장치의 화면 너비를 따르도록 페이지 너비를 설정한다.

◼ initial-scale=1.0 -> 브라우저에서 페이지를 처음로드 할 때 초기 확대 / 축소 수준을 설정한다.

✔ CSS 파일에 브레이크 포인트를 작성한다.

 

@media screen and (max-width: 1200px) {
  .main-title {
    font-size: 30px;
  }
}

◼ 1200px 이하에서는 .main-title은 font-size 30px를 갖는다.

◼ 여러 개 사용해도 상관 없다.

◼ 태블릿은 1200px, 992px, 모바일은 768px, 576px를 많이 사용한다.

 

📒 예제

✔  PC에서는 1행 4열, 태블릿에서는 2행 2열, 모바일에서는 4행 1열로 만들기

.main-container {
  display: flex;
  width: 80%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.main-container div {
  width: 25%;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .main-container div {
    font-size: 20px;
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .main-container div {
    font-size: 30px;
    width: 100%;
  }
}

◼ 1200px 초과 -> PC

◼ 1200px 이하 ~ 768px 초과 -> 태블릿

◼ 768px 미만 -> 모바일 

 

다음과 같이 잘 적용된 것을 확인할 수 있다.