애자일러

CSS에서는 폰트 크기를 조절하기 위한 몇 가지 선택이 있을 수 있다.

픽셀로 작업하기
font-size: 14px;
문자의 가장 밑에서 가장 위까지의 사이가 14 pixcel이라는 의미이다.

% 비율로 명시하기
font-size: 150%;
폰트가 픽셀 안에서 정확히 얼마나 큰지를 말해주며, 폰트 크기가 다른 폰트 크기에 비해서 알마나 커야 하는지를 % 비율로 명시한다.
font-size는 부모 엘리먼트로부터 상속을 받는 속성이므로 %는 결국 부모 엘리먼트에 대한 상대적인 크기를 말해준다.

"em"으로 명시하기
font-size: 1.2em;
%와 마찬가지로 쓰이는 또 다른 상대적인 표현 방법이다.

keyword로 작업하기

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

small 폰트 크기는 일반적을 약 12픽셀의 높이로 정의되어 있고 각각의 크기와 이전 크기 사이의 비율 차이는 약 20%이다.
여기서 주의할 점은 키워드가 모든 브라우저에 대해 항상 똑같은 방식으로 정의된다고 단정지으면 안 된다는 것이다. 브라우저 마다 정의된 방식도 다르고 사용자들이 원한다면 재정의할 수도 있기 때문이다.

일관된 폰트 크기를 유지하기 위한 요리법
그렇다면 대부분의 브라우저에서 일관된 결과가 나올 수 있게 하기 위한 요리법은 무엇일까?

1. 키워드를 선택하여 body규칙에 폰트 크기를 명시한다.(small이나 medium 추천) 이것은 페이지에 디폴트 크기를 정의하는 것과 같다.
2. 그런 다음 em이나 %를 사용해서 body 포트 크기(즉, 페이지의 디폴트 크기)에 대해 상대적인 폰트 크기를 명시한다.

이렇게 하게 되면 body폰트 크기에 대한 상대적인 폰트를 정의해놓았기 때문에 body 폰트 크기만을 변경함으로써 간단하게 모든 웹 페이지의 폰트 크기를 쉽게 변경할 수 있다.