HTML5 및 CSS3 프로그래밍의 상대 측정 단위로 크기 지정 방법 - 인형

상대적 측정은 훨씬 현명합니다. HTML5 및 CSS3 웹 개발의 절대 측정보다 선택의 폭이 넓습니다. 이 체계를 사용하여 표준 크기와의 관계로 크기를 변경할 수 있습니다.

명명 된 크기

CSS에는

xx-small

x-small

small

medium

large

x-large < xx-large

이 크기에 대해 더 구체적인 것은 없습니다. 큰 크기는 어느 정도입니까? 음, 그것은 매체보다 큽니다. 그것은 플립 답변처럼 들리지만 사실입니다. 사용자는 브라우저에서 기본 글꼴 크기를 설정하고 다른 모든 글꼴 크기는이 미리 설정된 크기와 관련되어야합니다. 중간 크기는 페이지의 단락 텍스트의 기본 크기입니다.

백분율 (%)

백분율 단위는 글꼴을 일반적인 크기와의 관계로 지정하는 데 사용되는 상대 측정 단위입니다. 50 %를 사용하면 일반적으로 글꼴의 절반 크기로 만들고 200 %는 보통 크기의 두 배로 만듭니다. 다음과 같이 백분율을 나타내는 % 기호를 사용하십시오:

p {font-size: 150 %;}

백분율은 일반 텍스트의 기본 크기를 기반으로하므로 100 %의 태그는 일반 단락의 텍스트.

전통적인 조판에서 em은 해당 글꼴의 "m"문자 너비에 해당하는 측정 단위입니다. 실제 웹 사용에서는 글꼴의 상대적 크기를 지정하는 또 다른 방법입니다. 예를 들어, 0.5 em는 정상 크기의 절반이고, 3 em은 정상 크기의 3 배입니다. 이 용어는이 측정을 지정하는 데 사용됩니다.

p {font-size: 1. 5em;}

글꼴 크기에 가장 적합한 전략은 다음과 같습니다.

정당한 이유없이 크기를 변경하지 마십시오.

대부분의 경우 브라우저 기본 크기는 완벽하지만 글꼴을 조금만 조정하려는 경우가 있습니다.

• 페이지의 전체 크기를 정의하십시오. 전체 페이지의 글꼴 크기를 정의하려면 태그에서 글꼴 크기를 지정하십시오. 절대 크기 조정의 부작용을 피하려면 명명 된 크기, 백분율 또는 em을 사용하십시오. 본문에 정의 된 크기는 본문의 모든 요소에 자동으로 적용됩니다.

• 다른 요소를 수정하십시오. 예를 들어, 링크를 보통 텍스트보다 약간 크게 설정할 수 있습니다. 요소에 font-size 속성을 적용하여이 작업을 수행 할 수 있습니다. 가능한 경우 상대 측정을 사용하십시오.