CSS text-size-adjust 속성 – 모바일에서 텍스트 크기 자동 조정 제어

`text-size-adjust` 속성 사용법

text-size-adjust 속성은
모바일 디바이스에서 텍스트의 크기가 자동으로 조정되는 것을 제어합니다.

이 속성은 주로 모바일 브라우저에서 사용됩니다. 데스크톱 브라우저에서는 무시될 수 있습니다.

이 속성은 아직 실험적인 구현입니다. 실제 사용하기 전에 브라우저 호환성을 주의 깊게 확인하세요.

CSS

html {
    -moz-text-size-adjust: none; /* android에서 Firefox 브라우저 */
    -webkit-text-size-adjust: none; /* iOS에서 Safari 브라우저 */
    text-size-adjust: none;
}

주어진 CSS 예제는 html에 text-size-adjust: none을 적용하여, 페이지 전체에서 자동 텍스트 크기 조정을 비활성화하는 방법을 보여줍니다.
text-size-adjust는 모든 요소에 상속되는 속성이므로, 모든 요소에 자동 텍스트 크기 조정을 비활성화는 코드 예제입니다.

사용법 참고 사항

text-size-adjust 속성을 이해하기 위해서는 사전에 필요로 하는 지식이 있습니다.

모바일에서 텍스트 크기 자동 조정

데스크탑 디바이스보다 크기가 작은 모바일 디바이스에서는 사용자의 시각적 편의성을 위해 작은 크기의 텍스트를 확대하여 조정할 수 있습니다.

텍스트 인플레이션 알고리즘(text inflation algorithm)

모바일 브라우저는 일부 웹 페이지의 텍스트를 더 읽기 쉽게 만들기 위해 "텍스트 인플레이션 알고리즘(text inflation algorithm)"을 사용합니다. 이 알고리즘은 텍스트를 확대하여, 작은 화면에서도 텍스트가 너무 작게 보이지 않도록 합니다. 모바일 브라우저마다 텍스트 인플레이션 알고리즘의 구현 방식은 다를 수 있습니다.

웹 페이지의 초기 설계 문제

많은 웹사이트가 처음부터 모바일 장치를 염두에 두고 설계되지 않았기 때문에 모바일 브라우저는 웹 페이지를 렌더링하는 방식에서 데스크톱 브라우저와 다릅니다. 모바일 브라우저는 화면보다 훨씬 넓은 뷰포트(일반적으로 800px에서 1000px 사이)를 사용해 페이지를 렌더링합니다. 이를 다시 모바일 화면 크기에 맞추기 위해 브라우저는 뷰포트를 축소하거나, 일부만 보여주는 방법을 사용합니다.

뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

모바일 화면에 맞게 축소된 텍스트는 매우 작을 수 있으므로 많은 모바일 브라우저는 텍스트 인플레이션 알고리즘을 적용하여 텍스트를 확대하여 읽기 쉽게 만듭니다. 텍스트가 포함된 요소가 화면 너비의 100%를 사용하는 경우 알고리즘은 텍스트 크기를 늘리지만 레이아웃은 수정하지 않습니다.

텍스트 인플레이션은 주로 사용자의 시각적 편의성을 위한 기능

텍스트 인플레이션은 웹 페이지의 초기 설계 문제를 해결하기 위해서도 사용되지만, 현재는 주로 작은 크기의 텍스트가 모바일 화면에서 너무 작게 보일 경우, 브라우저가 자동으로 텍스트 크기를 확대하여 가독성을 높이기 위한 기능입니다.

text-size-adjust 속성을 사용하면 웹 작성자가 이 기능을 비활성화하거나 수정할 수 있습니다.

iOS에서 Safari 브라우저

이 내용은 Apple의 Safari 브라우저에서 텍스트 크기 조정과 관련된 기능을 설명하는 Safari Web Content Guide 문서에서 발췌한 것입니다. 이 문서는 주로 iOS에서 Safari 브라우저가 웹 페이지의 텍스트를 어떻게 처리하는지 설명하고 있습니다.

iOS의 Safari는 사용자가 웹 페이지에서 텍스트를 쉽게 읽을 수 있도록 텍스트 크기를 자동으로 조정합니다. 특히 사용자가 HTML 블록 요소(예: <div> 요소)를 더블 탭하면, Safari가 해당 요소의 너비에 맞게 뷰포트를 확대하고 텍스트 크기를 조정하여 가독성을 높입니다.

페이지가 처음 렌더링될 때, Safari는 블록 요소의 너비를 감지하고, 텍스트를 읽기 쉽게 만들기 위해 적절한 크기로 조정합니다. 이 자동 텍스트 크기 조정 기능은 웹 페이지가 모바일 디바이스에서 잘 보이도록 도와줍니다.

Safari의 자동 텍스트 크기 조정이 웹 페이지에서 예상치 못한 문제를 일으킬 수 있습니다. 예를 들어, 절대 위치가 지정된 요소에서 텍스트가 뷰포트 밖으로 넘칠 수 있습니다. 이러한 경우, CSS의 -webkit-text-size-adjust 속성을 사용하여 자동 조정을 끄거나 원하는 비율로 텍스트 크기를 조정할 수 있습니다.

예를 들어, none으로 설정하면 텍스트 크기가 자동으로 조정되지 않으며, 200%로 설정하면 텍스트가 2배로 커집니다.

iPad의 Safari에서는 기본적으로 -webkit-text-size-adjust 속성이 none으로 설정되어 있어 자동 텍스트 크기 조정이 발생하지 않습니다. 하지만, 다른 iOS 기기에서는 기본적으로 auto로 설정되어 텍스트 크기가 자동으로 조정됩니다.

`text-size-adjust` 속성 설정하기

text-size-adjust 속성을 설정하는 방법에 대해 알아보겠습니다.

형식 구문

형식 정의

text-size-adjust 속성의 형식 정의
초깃값	텍스트 인플레이션을 지원하는 스마트폰 브라우저의 경우 `auto`으로 설정되고, 다른 경우와 iPad의 Safari는 `none`
적용 요소	모든 요소
상속	예

값

text-size-adjust 속성의 값
`auto`	브라우저의 텍스트 인플레이션 알고리즘을 활성화합니다.
`none`	브라우저의 텍스트 인플레이션 알고리즘을 비활성화합니다.
`<percentage>`	브라우저의 텍스트 인플레이션 알고리즘을 활성화하여 글꼴 크기를 늘릴 백분율 값을 지정합니다. 음수 값은 유효하지 않습니다.

참고하세요!
text-size-adjust: none은 text-size-adjust: 100%와 같습니다.

구문

CSS

/* 키워드 값 */
text-size-adjust: none; /* text-size-adjust: 100%;와 같음 */
text-size-adjust: auto;

/* <percentage> 값 */
text-size-adjust: 100%; /* text-size-adjust: none;과 같음 */

/* 전역 값 */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;

브라우저 호환성

마지막 업데이트 정보: 2024-11-06

text-size-adjust 속성의 브라우저 호환성
모바일
속성과 값	모바일 Chrome	모바일 Firefox	Safari
`text-size-adjust`	54	49 -moz-	1 -webkit-
`auto`	54	지원하지 않음	지원하지 않음
`none`	54	지원하지 않음	지원하지 않음
`<percentage>`	54	지원하지 않음	지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

text-size-adjust 속성의 명세서 사양
명세서 사양
`text-size-adjust`	CSS Mobile Text Size Adjustment Module Level 1 #adjustment-control

text-size-adjust 속성 사용법