모바일화면
-
[CSS] position 과 overflow를 활용한 웹 위의 모바일 화면 만들기기타 2022. 7. 24. 22:20
어느날 특이한 요구사항을 받았다. 웹페이지에 모바일 화면 크기로 스크롤되는 화면을 만들어주세요. html과 css만 사용해야 합니다. 나름 프론트엔드 개발자로 일을 하고 있었지만, 리액트와 tailwind의 편리함에 젖어 html이나 css에 대해 공부를 제대로 해본 적이 없는 것 같다. 더군다나 지금 회사는 퍼블리셔까지 있어서 게으름이 정점에 달해 있었다. 이번에 화면을 만들며 여러번 시행착오를 했었는데, 지금 적지 않으면 까먹을 것 같아 내용을 짧게 정리해보았다. 구체적인 css에 대한 설명보다는 이런식으로 구현했다 위주로 글을 썼다. 1. 상태바와 네비게이션바 고정시키기 (position) 처음에 생각한 부분은 상태바와 네비게이션바가 스크롤 할때 고정되어 있어야 한다는 점이었다. 고정은 posit..