text-size-adjust 브라우져의 텍스트 크기 조절

게시자: 대문 demun 카테고리: 퍼블리셔/css 2014.04.16 09:14

반응형으로 작업을 해보신분들은 아마도 아실겁니다.

아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절합니다.

이걸 방지하는것이 text-size-adjust 입니다.


text-size-adjus 는 4가지 속성을 사용할 수 있습니다.


1. auto

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

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

자동으로 조절한다는것은 디바이스의 렌더링이 다르다면 다르게 렌더링이 되므로 추천하는 방식은 아니다.


2. none

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

텍스트의 크기를 자동으로 조절하지 말라는 뜻이다.

대체적으로 많이 사용하는 방법이다. 일반적으로 body 의 폰트크기를 설정하고 미디어쿼리를 사용하여 좀더 세밀하게 조절해서 사용하고 위의 속성을 사용하여 자동으로 조절하지 못하게한다.


3. percentage

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

이것은 폰트크기를 명시적으로 지정해주는 것이다.

이 방법도 경우에 따라 자주 사용하는 방법이다. 명시적으로 100%를 주어 모든 디바이스에서 동일하게 보여주게 하는 방식이다. 물론 크게도 가능하고 작게도 가능하다.


4. inherit

상속되는 경우다.

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


text-size-adjus 의 기본값은 none 이다.


이 속성은 표준이 아니므로 벤더를 넣어서 사용해야 한다.


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


이 속성은 브라우져나 모바일이나 모두 적용이 됩니다.

그래서 Media Query를 사용하여 모바일에만 적용할 수도 있습니다. 예제로 


@media all and (max-width: 480px) {
	html { 
		-webkit-text-size-adjust: none; 
		-moz-text-size-adjust: none; 
		-ms-text-size-adjust: none; 
	}
}


자세한 내용은 http://msdn.microsoft.com/ko-kr/library/gg721804(v=expression.40).aspx 참고하세요.


댓글

  1. 2017.02.17 11:13 신고 행인  댓글주소  수정/삭제  댓글쓰기

    정보찾다가 발견했는데 코드 제외한 윗부분에 써주신 속성이 text-size-adjus <로 전부 오타가 나있네요.ㅠ
    어쨌든 정말 감사합니다ㅠㅠ 덕분에 문제 해결했어요!