94. 내일배움캠프 - 75일차 TIL

---

 

TIL

 

📌
오늘 한 일

최종 프로젝트

오늘은 최종 프로젝트 프론트배포된 것을 수정했다.

css부터 모바일 환경에서 나타나는 오류들 등등 수정했던 것 같다.

배포된 것을 처음 수정해봐서 어떻게 수정해야할지 구글링도 하면서 했던 거 같음

aws에서 s3를 사용했다. 이건 Filezilla파일질라처럼 프론트 폴더 다 올리면 끝. 

간단하지만 수정할 때 불편하다. 예를 들어 로컬에서 라이브서버를 활용해서 실시간으로 보면서 수정했다면

배포한 후에는 그렇게 하지 못하는 게 너무 불편하다.

어느 정도 css 수정하고 배포를 했다. 내일 진짜 홍보를 한 후 피드백받을 걸로 오류 수정할 것 같다.

 

 

 

모바일 브라우저 100vh적용 오류 해결(ios/android)

 

vh(viewport height)는 height에 해당하는 단위로 해당 브라우저의 높이를 상대적으로 적용해준다.

ex) 높이가 100px이라면 1vh는 1px이다.

 

원인 : 모바일에서 상단에 위치한 url바와 하단에 있는 내비게이션 바로 인해 100vh를 설정하더라도 위나 아래가 잘려서 스크롤이 잘 되지 않는 현상이 나타났음(아래 사진처럼)

 

해결 : 자바스크립트 + css 해결

//javascript

const setVh = () => {
  document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)
};
window.addEventListener('resize', setVh);
setVh();

root {
    height: 100vh;
    height: var(--vh);
}

 

 

(출처)

Error | 모바일 브라우저에서 100vh 적용 오류 해결 (ios/android)