CSS로 크기 및 위치 지정 - CSS 스타일 정의 (또는 규칙)에서

CSS 스타일 정의 (또는 규칙 )에서 여러 가지 방법으로 위치와 크기를 기술 할 수 있습니다, 다른 측정 단위를 사용할 수 있습니다. 특정 상황에서 특정 종류의 측정이 가장 효과적 일지 모르지만 원하는 단위를 선택할 수 있습니다.

예를 들어, 종이와 잉크로 작업하는 많은 디자이너는 점 에서 서체를 지정하는 데 사용됩니다. 점은 절대 길이: 1/72 인치입니다. 잡지 나 책의 절대 크기 유형 사양을 사용하면 책에서 페이지의 가로 세로 비율을 축소하거나 늘이거나 변경할 수 없습니다. ( Aspect ratio 는 높이와 너비의 비율입니다.)하지만 브라우저는 자유롭게 크기를 조정할 수 있습니다. 브라우저의 한면을 드래그하면 브라우저가 변경되어 더 얇거나 뚱뚱 해집니다. 즉, 모양, 가로 세로 비율이 사각형에서 사각형으로 바뀌는 것입니다.

브라우저에 표시되는 글꼴의 경우 상대적 측정 단위가 기존 점보다 우수합니다. 포인트 또는 인치와 같은 절대 측정과 달리 상대적 단위는 글꼴 크기에 따라 조정됩니다. 결과적으로 유형 크기를 지정하는 상대적 측정 단위로 웹 페이지에서보다 예측 가능한 결과를 얻을 수 있습니다. 웹 디자이너를위한 유용한 측정 단위 중 하나는 em 입니다. em은 유용하지만 실제로는 대부분의 디자이너가 유형 크기를 지정할 때 점 또는 픽셀을 사용합니다. 아마 그것은 습관의 힘일뿐입니다. 그러나 어쨌든 결과는 대부분의 브라우저에서 정상적으로 보입니다.

길이를 측정하는 모든 단위: 999 픽셀 (픽셀):

픽셀은 디스플레이에서 가장 작은 단위입니다. - 점 당신은 때때로 당신이 TV에 충분히 가까이 있는지 볼 수 있습니다. 예를 들어, 모니터 해상도를 800 × 600으로 설정하면 가로 800 x 세로 600 픽셀입니다.

픽셀은 글꼴 크기를 지정하는 데 유용 할 수 있지만 단점은 픽셀을 지정하면 Internet Explorer의 사용자 정의 글꼴 크기 옵션보다 우선하므로 사용자가 "큰"에서 "큰"등으로 조정할 수 없다는 것입니다.. 그러나 이미지

포인트는 1/72 인치와 같습니다. 포인트 (및 피카)는 고전적인 서체 측정입니다. 대부분의 브라우저는 기본적으로 12 포인트 serif 서체로되어 있습니다.

pc (picas): 1 피클은 12 점입니다.
mm (밀리미터): 밀리미터입니다.0394 인치이므로 1 인치는 대략 26 밀리미터를 포함합니다. 1 센티미터는 10 밀리미터를 포함합니다. 전 세계의 많은 사람들이이
metric 시스템을 사용합니다. cm (센티미터):

센티미터입니다. 3937 인치이므로 1 인치는 약 2 1/2 센티미터 정도입니다.

(인치): 인치는 미국에서 사용되는
영어 또는 제국 시스템의 한 단위입니다. 잉글랜드와 몇몇 식민지 시대의 잔재들도 오랫동안 제국주의 체제에 머물러 있었지만 최근에는 굴복 당했다. 영국 정부는 2000 년 유럽 통계법을 준수했으며 지금은 폐하의 영역 어디에서나 파운드 단위로 판매하는 것은 범죄 행위입니다. 예를 들어, 콘월의 한 남자는 고등어를 1 파운드에 판매 한 후 법원 비용을 지불해야만했다. 50 파운드. 는 첫 번째 너클과 지금 잊혀진 왕의 엄지 손가락 사이의 거리를 기준으로합니다. 50 년 동안, 미터법에 찬성하여 황실 시스템을 교육하고 입법화하려는 끊임없는 노력은 미국에서 실패했습니다. Em:

Em는 문자의 대략적인 너비에서 파생 된 측정 단위입니다 < m

ex (x 높이): Ex는 x 높이 또는 현재 요소의 글꼴 인 소문자 x 의 높이입니다. 브라우저는 일반적으로 em을 절반으로 나눕니다 높이 올리기. 이 측정 단위는 현재 모든 서체에 대해 평균으로 예측할 수 없으므로 현재 em과 같이 유용하지 않습니다.
% (퍼센트): 상대 크기 지정에 대한 비율이 우수합니다 (조상, 부모 등과 관련 될 수 있음). 측정 단위는 대소 문자를 구분하지 않습니다. 원하는대로 대문자로 만들 수 있습니다. 마찬가지로, IE에서는 숫자와 단위 사이에 공백을 포함 할 수도 있고 그렇지 않을 수도 있습니다. 예를 들어 2 in은 2 in과 같습니다. 다른 브라우저는 공간을 좋아하지 않습니다. 단순하게하기 위해 소문자를 사용하고 불필요한 공백을 피하는 것은 일반적으로 CSS로 작업 할 때 좋은 생각입니다. 2in 또는 24px 형식의 습관에 빠지면 CSS위원회가 앞으로 자신을 뒤집지 않기로 결정하지 않는 한 괜찮습니다.

작은 이해 전문가는 웹 페이지를 디자인 할 때 em을 사용하는 것이 좋으므로이 단위가 실제로 무엇을 의미하는지 자세히 살펴볼 필요가 있습니다. 전통적으로, em은

문자의 너비입니다.

아마도

m-dash 또는 em-dash

라는 용어를 들었을 것입니다. 이는 대개 게시에 사용되는 대시입니다. 이것은 가로줄입니다. 서체의 문자 m 너비와 같습니다 (이것은 많은 서체에서 정확히 똑같은 것은 아닙니다). 엔 돌진도 있습니다. 그것이 무엇을 기반으로하는지 짐작하십시오.

Em 및 ex 단위는 각 서체에 대해 상대적 입니다. 이것은 em에서 지정한 크기가 사용자의 모니터 해상도, 기본 설정 및 기타 요인에 따라 정확한 방식으로 변경되기 때문에 유용합니다.즉, em을 사용하면 서체에

상대적

이 어떻게되는지 지정할 수 있습니다. 결과는 서체와 주변 텍스트의 다른 특성에 비례합니다. 또한 em과 같은 상대적인 사양은 장애가있는 사람들이 필요에 따라 브라우저에서 서체를 확대 할 수 있도록합니다. px 또는 pt와 같은 고정 된 사양은 사용자에게이 옵션을 제공하지 않습니다. em은 전통적인 typesetter의 측정 단위이지만 CSS에서의 의미는 약간 수정됩니다. 한 가지는 컴퓨터가 단순히 em을 반으로 나누어 계산합니다. 이것은 계산하기 쉽지만 대부분의 글꼴에 대한 근사치입니다. Em in CSS는 글꼴 크기 (픽셀)입니다. 이것은 em 단위를 지정하고 부모 (또는 다른) 요소의 글꼴에 상대적으로 의존하기 때문에 유용합니다. 다른 요소와의 상대적인 관계를 이해하기위한 실험이 있습니다. 이 코드에서 요소 내의 텍스트는 26px로 정의되지만 단락 요소 내의 텍스트는 1.5em 또는 다른 방법으로 부모 크기의 1.5 배로 정의됩니다. 나중에 HTML 코드에서 단락 요소는 본문 요소로 묶입니다 (부모로 묶음). 따라서 단락 텍스트는 1.5 × 26 픽셀 (또는 39 픽셀)로 렌더링됩니다. 본문 {font-size: 26px;} p {font-size: 1. 5em;} p. abs {font-size: 39px;}

일부 텍스트

일부 텍스트 (1.5 em 본문). 일부 텍스트 (39 픽셀). abs 클래스 버전의

텍스트는 일반

와 같은 크기로 렌더링됩니다. 요소는

의 부모 요소이며

는 부모의 5em으로 정의됩니다. 상위 본문은 텍스트 크기로 26 픽셀을 사용하므로 26 × 1입니다. 5의 결과는 39 픽셀입니다.