웹 제작하면서 알게된 반응형 css

개발하면서 알게된 지식들을 정리해보고 싶었다.

앞으로도 써먹을 반응형 css!

1. 웹 Header - Main - Footer 구조

#app {
  min-width: 1300px;
  min-height: 100vh;
}
.view {
  min-height: calc(100vh - header - footer);
}

 

👉  Main 높이는?

header {
}
main {
  min-height: calc(100vh - header - footer);
}
footer {
}

 

👉  Header가 position: fixed일때 Main 높이는?

header {
}
main {
  padding-top: header;
  min-height: calc(100vh - footer);
}
footer {
}

---

✅  웹에서도 min-height를 100%보다 100vh로 계산하는 이유?

min-height: calc(100% - footer)로 설정하면

웹에서 화면 축소시, 어느 크기부터 footer가 아래에 고정되지 않고 위로 올라온다 (실제 테스트해보면 알게됨)

 

굳이 footer까지 fixed로 고정하지 않고

min-height: calc(100vh - footer)로 설정해면 화면 축소시에도 footer가 항상 아래에 고정된다!

---

2. 모바일 Header - Main 구조

  #app {
    max-width: 100vw;
    min-width: 100vw;
    min-height: 100vh;
  }
  .view {
    min-height: 0;
  }

 

👉  Main 높이는?

header {
}

main { 
  /* 모바일 화면크기에 일치하려면 */
  min-height: calc(100vh - header - footer);
 /* 모바일 화면크기를 넘어가 스크롤 내리려면 */
  min-height: 100vh;
  
  /* 하단 버튼 position: fixed시 기종별 공간 확보 */ ⭐️⭐️
  padding-bottom: 20vw;
}

/* 하단 고정 버튼 있을 때 */
.footer-button {
  position: fixed;
  bottom: 0;
  min-width: 100vw;
  min-height: footer;
}

 

👉  모바일 모달창

min-height와 overflow-y 조합이 필수!!

.modal {
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.child-modal {
  width: 100vw;
  min-height: 100vh; /* 모바일 화면 꽉채우기 */
  background-color: #fff;
  overflow-y: auto; /* 모달창에서 iPad 및 iPhone SE 보완 */
  
  /* 웹뷰 url bar로 인한 헤더 잘림현상 방지하려면? */
  position: fixed;
  top: 0;
}

 

---

3. Mobile 개발 단위에 대해서

모바일개발은 vh보다 vw를 많이 사용하게 되었다.

처음 개발할때 세로나 높이와 관련된 값들을 모두 vh로 설정했었는데

 

개발하고보니 모바일에서 "상하단 상태바" 또는 "텍스트 입력창"이 활성화 될때 마다

실시간으로 모바일의 vh가 변하면서.... 당연히 컨텐츠의 vh도 그에 맞춰 변하는 문제가 생겼다.

 

개발하는 플랫폼마다 목적에 따라 vh가 유용한 경우도 많겠지만 현재로서는 위의 이슈때문에 vw로 개발하였다.

/* 세로 높이임에도 vw를 활용한 설정들 */
 {
  margin: 3vw 3vw;
  padding: 1vw 2vw;
  height: 10vw;
  line-height: 11vw;
  font-size: 3.5vw;
  background-size: 30vw;
 }

 

✅ iPhone 5/SE 또는 6/7/8과 같이 세로 길이가 짧은 미디어에서 최하단 컨텐츠가 짤리는 경우(ex. pagination button)

해당 버튼의 margin-top을 vw에서 vh로 변경해주었다.

(세로가 짧은 미디어는 vh가 덜 잡히니까!)