출처 : https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide

1. 반응형 웹 디자인(RWD)

2021년 한 해의 Desktop vs Mobile vs Tablet Market Share Worldwide 그래프를 보면 모바일디바이스가 데스크탑 보다 높은 이용율을 보이는 것을 알 수 있다. 스마트폰 유저의 비율이 높은 시대에 스마트폰 유저를 위한 모바일 웹페이지를 제공하는 것은 이제 선택이 아닌 필수가 되었다.

이를 위해 모바일용 사이트를 따로 제작하는 경우도 있지만, 태블릿PC나 스마트 TV등 브라우저 환경이 바뀌면 그 때마다 웹사이트를 해상도에 맞게 제작하는 것은 수고스러운 일이다. 그렇기 때문에, 기존의 웹사이트의 컨텐츠를 그대로 유지하면서 다양한 해상도에 맞게 표시하는 반응형 웹 디자인(Responsive web design)이 필요하다.

반응형 웹 디자인(Responsive Web Design)은 RWD라고도 하며, 쉽게 말해 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술이다.

2. viewport

<meta name="viewport" content="width=device-width" />

HTML을 작성하다보면 위와 같은 viewport 메타태그를 볼 수 있다. viewport란, 현재 화면에 보여지고 있는 직사각형의 영역이다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말한다.

데스크탑과 모바일의 viewport는 다른점이 있다. 데스크탑의 viewport는 브라우저 창(visible area)의 viewport와 같고, 사용자가 브라우저 창의 크기를 조절하면서 viewport의 크기도 조절할 수 있습니다. 웹페이지가 viewport보다 크면, 스크롤을 하여 나머지 영역을 볼 수 있다.

반면에 모바일 viewport는 웹브라우저 창보다 크거나 작을 수 있고 상하좌우로 움직이거나, 더블탭, 줌인, 줌아웃을 통해 viewport의 배율을 변경할 수 있다.(크기X)

모바일에서 웹사이트를 여는 브라우저의 기본 뷰포트 너비가 980px이기 때문에, 뷰포트를 지정해주지 않으면 웹사이트의 글자들이 작게 표시되어 가독성이 떨어진다. 따라서 반응형 웹사이트를 동작시키기 위해서는 위와같은 코드로 뷰포트에 대한 설정을 해야한다.

대부분의 코드 에디터에서 HTML을 생성할 때 뷰포트가 기본적으로 들어가있지만, 가끔 빠져있는 경우도 있으므로 반응형으로 웹을 제작하여도 작동되지 않을 때 해당태그가 있는지 먼저 확인하자!

3. viewport의 속성

<viewport-length> = auto | device-width | device-height | <length> | <percentage>

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=no">

위의 경우 뷰포트의 가로를 기기의 가로폭에 자동으로 맞추고, 처음 페이지에 접속 했을때 1의 비율로 확대하며, 뷰포트를 축소할 수 없게 하고(1 = 100%), 1.6 비율까지 확대할 수 있게 한다.

4. text-size-adjust

아이폰의 경우 뷰포트가 변경되는 경우 자동으로 텍스트를 조절하여 의도하지 않은 결과가 나오기도 한다. 이것을 방지하기 위해 text-size-adjust 라는 CSS속성을 사용한다.

text-size-adjust 4가지 속성값을 가지고있다.

1. auto

html { -webkit-text-size-adjust: auto; }

화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다.

이 경우 디바이스의 렌더링이 다르다면 의도와 다르게 렌더링이 되므로 자주 사용하지 않는다.

2. none

html { -webkit-text-size-adjust: none; }

텍스트의 크기를 자동으로 조절하는 것을 막는다.

3. percentage

html { -webkit-text-size-adjust: 100%; }

텍스트의 크기를 명시적으로 지정한다.

명시적으로 100%를 주어 모든 디바이스에서 동일하게 보여주게 하는 방식이다. 크게도 가능하고 작게도 가능하다.

4. inherit

html { -webkit-text-size-adjust: inherit; }

부모요소의 속성값을 상속받아 적용되는 형식이다.

[출처]
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name