CSS 반응형 브라우저의 텍스트 크기 조절 (-webkit-)text-size-adjust

📌  text-size-adjust

 

아이폰의 경우 viewport가 변경되면 자동으로 텍스트 크기를 자동으로 조정한다.

이처럼 디바이스의 상태가 변경되었을 때 원치 않는 결과가 렌더링될 수 있기 때문에 이를 방지할 수 있는 장치가 필요하다.

그 장치 중 하나가 바로 text-size-adjust 이다.

 

text-size-adjust: none;
기본값. 텍스트의 크기를 자동으로 조절하지 못하게 한다.

 

text-size-adjust: auto;
화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다.

 

text-size-adjust: 100%;
폰트 크기를 명시적으로 지정해준다. 모든 디바이스에서 동일한 output을 낼 수 있다.

 

text-size-adjust: inherit;
부모 요소의 속성값을 상속받아 적용한다.

 

이 속성은 CSS 표준이 아니므로, 벤더프리픽스를 넣어 사용한다.

 

 

📍  Vendor Prefix

 

특정 브라우저에서만 지원되는 CSS 속성을 사용하기 위해 제공되는 기능이다.

또는 CSS 표준에 대한 속성 구현이 특정 브라우저에서는 다르게 적용될 경우, 

해당 브라우저를 위해 별도의 속성값을 지정할 때도 사용한다.

 

벤더 프리픽스	웹 브라우저	사용법 ex
-webkit-	구글 크롬 구글 크롬 for Android 안드로이드 내장 브라우저 사파리 사파리 for iOS 오페라 신버전 파이어폭스 for iOS	-webkit-user-select: none;
-moz-	파이어폭스	-moz-user-select: none;
-ms-	엣지 구버전	-ms-user-select: none;
-o-	오페라 구버전	-o-user-select: none;

 

그러나, 표준 속성의 적용이 우선되기 때문에 벤더 프리픽스가 있는 속성은 최~대한 앞쪽에 ( 표준 속성 앞쪽에 ) 배치해야 한다.

-->  Cascading Style Sheet 특징에 따라 ^~^

 

그리고 웹 브라우저 시장이 구글 크롬을 중심으로 정리되고 있다.

또한 주요 웹 브라우저들이 최신 CSS 표준을 빠르게 지원하고 있기때문에 벤더 프리픽스는 점차 사용률이 줄고 있다.

 

게다가 벤더 프리픽스가 주로 사용되는 속성은 Transform, Transition, Animation, Gradient 등 사용 빈도가 낮은 아이들이다.

이 속성들은 속성값 자체가 복잡하기 때문에 벤더 프리픽스를 자동으로 추가해주는 서비스를 사용하는 것도 좋은 방법이다.

 

autoprefixer

Autoprefixer CSS online