이번 내용은 비교적 짧은 내용일 것 같지만, 중요한 내용이다.
우리 블로그를 방문한 분들 중에서는 모바일로 접속을 하신 분도 계실 수 있고, 그중에서는 시력이 좋지 않은 분도 계실 수 있다.
그런 분들을 배려하기 위한 필수 설정을 알아보자.
모바일 사용자를 위한 배려
<meta
content='
width=device-width,
initial-scale=1,
minimum-scale=1,
maximum-scale=1
'
name='viewport'
/>다른 템플릿은 어떨지 모르겠지만, 일단 내가 현재 사용중인 Amalia 템플릿 무료 버전에서는 <head> 태그 안에 이와 같은 코드가 있다. (한 줄짜리 코드인데 가독성을 좋게 하기 위해 줄 바꿈과 들여쓰기를 했다.)
결론부터 말하자면, 여기서 maximum-scale의 값을 최소 5까지는 올려야 한다.
구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동해서 코드를 수정하고 저장했다.
참 손이 많이 가는 구글 블로그다.
이런 건 처음부터 디폴트가 maximum-scale=5여야 하는데 말이다.
뭐 어쨌든 덕분에 공부도 하고 좋다.
이제부터 이 코드에 대한 설명과 함께 왜 maximum-scale의 값을 올려야 하는지 알아보겠다.
뷰포트(viewport) 메타 태그의 역할
<meta name='viewport' ...> 태그는 브라우저에게 뷰포트viewport를 어떻게 설정할지 지시하는 역할을 한다. 뷰포트란 사용자가 웹 페이지를 볼 수 있는 화면의 가시 영역을 의미한다. 스마트폰과 같이 작은 화면의 기기에서 웹 페이지가 너무 작게 보이지 않도록 하기 위해 사용된다.
주요 속성들의 역할은 다음과 같다.
width=device-width: 이 속성은 웹 페이지의 뷰포트 너비를 기기의 실제 화면 너비에 맞추라는 의미다. 예를 들어, 스마트폰의 화면 너비가 375px이라면 뷰포트의 너비도 375px로 설정된다. 이렇게 해야 CSS의100%너비가 기기 화면 전체를 차지하게 되어 반응형 디자인을 구현하기 쉬워진다.initial-scale=1: 이 속성은 페이지가 처음 로드될 때의 초기 확대/축소 비율을 1.0으로 설정하라는 의미다. 즉, 페이지를 원래 크기(100%)로 보여주므로, 사용자가 별도의 확대/축소 없이 바로 콘텐츠를 읽을 수 있게 된다.minimum-scale=1: 이 속성은 사용자가 페이지를 축소할 수 있는 최소 비율을 1.0으로 제한한다. 즉, 사용자가 페이지를 원래 크기(100%)보다 더 작게 축소할 수 없도록 만든다.maximum-scale=5: 이 속성은 사용자가 페이지를 확대할 수 있는 최대 비율을 5.0으로 제한한다. 즉, 사용자가 페이지를 원래 크기보다 최대 5배까지 확대할 수 있도록 허용한다. 한마디로 초기값이었던 1은 사용자가 페이지를 확대할 수 없게 제한하는 값이었던 거다.
이번에는 뷰포트 메타 태그에 대해서 알아보았다.
본인의 블로그를 사랑한다면, 본인이 힘들게 직접 쓴 글이 충분히 가치가 있는 글이라고 생각한다면, 이런 부분도 섬세하게 신경을 써서 한 명이라도 더 많은 사람이 본인의 글을 편하게 읽을 수 있도록 하자.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩