Part 5-16. 반응형 화면 체크하기

네 다음은 우리가 홈페이지를 이렇게 다 어느 정도 초안을 만들고 나면 이제 해야 될게 실제로 웹상에 보이는 거는 이렇게 보이지만 이 디바이스별로 어떻게 보이는지 체크를 꼭 하셔야 됩니다 이 디바이스별로 체크를 하는 방식은 일단 블렛 안에서 먼저 하실 수 있는데 여기 위에 클릭하시면 클릭하시면 이렇게 패드 패드 화면 그리고 이제 스마트폰 화면까지 이렇게 나옵니다 근데 요게 어 여기서 잘 나온다고 해서 안심하면 안 되고 실제로 내 스마트폰에서도 봐야 되고 다양한 디바이스 한 번은 체크를 꼭 하셔야 됩니다 왜냐하면 줄바꿈이 이상하게 되어 있구나 이런 경우가 꼭 있기 때문에 그래서 그 부분을 꼭 체크를 하셔야 되는데 어 여기서는 잘 나왔지만 실제로 휴대폰에서 휴대폰에서 봤을 때 이상을 하거나 이런 경우가 있거든요 그래서 꼭 더블 체크를 하시면 됩니다 이거 한 번만 하면 되니까 꼭 꼭 하시면 좋구요 그래서 크롬이라는 브라우저를 꼭 설치를 하셔야 됩니다 크롬이라는 브라우저가 이런 확장 하기도 좋고 뭔가 연동해서 연동해서 뭔가 할 수 있는 게 많은데 예를 들면 여기서 이제 도구에서 이 개발자 도구로 가보겠습니다 그러면 그러면 이 모바일 화면을 이렇게 볼 수 있어요 그러면 요런 거 어색하잖아요 요런 거 고쳐야 되고 나머지는 나머지는 괜찮은데 이제 이제 뭔가 어색해 보이는 것들 이런 것들도 지금 줄바꿈이 해야 되나 이제 혹은 글자 크기를 바꿔야 되나 이런 고민을 이제 해야 되는 거죠 부분 잘 나오는 거 이제 확인해 보고요 그래서 이 개발자 도구로 간 다음에 dimension을 이렇게 하시면 이제 데스크탑 화면, 아이패드 화면, 갤럭시 Z 폴드 화면, 여러 디바이스의 사이즈 바탕으로 이렇게 확인하실 수 있습니다.

디바이스별로 다 보이는 화면이 조금씩 다르기 때문에 이거를 한 번은 꼭 체크를 하시면 좋습니다.

그래서 개발자 도구 들어가셔서 이걸로 조절하시면 됩니다.

개발자 도구는 여기 점세계 설정에서 도구 도보기 들어가셔서 개발자 개발자 도구로 가시면 됩니다.

점세계 버튼, 도구 도보기, 개발자 도구.

여기서 dimension을 선택하시면 됩니다.

또 하나의 팁은 제가 그 노션에 링크 추가해 놨는데 이 이 구글 확장 프로그램을 다운받으시면 바로 이렇게 확인하실 수 있습니다.

여기서 디바이스 선택해 가지고 디바이스별로 실제로 어떻게 보이는지 좀 더 생생하게 이렇게 확인을 할 수 있습니다.

이것도 제가 추가를 했으니까 요거는 클릭 한번에 바로 볼 수 있으니까 조금 더 편한 거죠.

근데 굳이 뭐 설치 안 하시더라도 구글 개발자 도구에서 보셔도 상관없습니다.

상관없습니다.