responsible web ui1 make IP camera using raspberry pi 4 (11) responsive web UI 고생하여(?) 만든 web page를 핸드폰에 띄웠을 때는 정말 당황스러웠다. UI가 엉망진창이라서.ㅎㅎ web page를 핸드폰에 띄웠을 때 최적의 사이즈로 맞춰주도록 반응형으로 변경해보고자 한다. html 코드를 수정한다. 아래는 기존의 html 코드이다. 아래는 화면크기에 따라 css가 변경되는 html 코드이다. 이렇게 바꿔준다. 이렇게하면 width가 801 pixel이상 되는 화면에서는 기존 ui가 나올 것이고, 800pixel 이하 되는 화면에서는 모바일 ui가 나올 것이다. html에 frame을 img로 넣어준 태그는 class를 부여했다. static에 들어있던 기존의 css파일을 mobile-css로 복사하여 사이즈를 수정해주자. 기존에는 50%였으나, 모바일에서는 가장 크게 보이게 .. 2022. 2. 22. 이전 1 다음
