글꼴 크기 속성을 사용하여 텍스트 크기를 조정하는 것은 CSS 스타일링의 가장 어려운 측면 중 하나입니다. CSS는 웹 브라우저에 표시되는 텍스트의 크기를 측정하기 위해 4가지 단위를 제공합니다. 다음 네 가지 단위 중 웹 문서에 가장 적합한 단위는 무엇입니까? 이 문제는 많은 논의와 논쟁을 불러일으켰습니다. 그러한 질문에 대해서는 명확한 대답을 하기가 어렵습니다.

단위 알아보기

음 ( 여자 이름): em은 웹 문서에 사용되는 확장 가능한 단위입니다. 하나의 em은 현재 글꼴 크기와 같습니다. 예를 들어 문서의 글꼴 크기가 12pt인 경우 1em은 12pt와 같습니다. em은 크기가 조정되었으므로 2em은 24pt, .5em은 6pt와 같습니다. 확장성과 모바일 장치와의 높은 호환성으로 인해 em은 웹 문서에서 점점 더 많이 사용되고 있습니다.

픽셀( px): 픽셀은 컴퓨터 화면에서 읽는 모든 내용에 사용되는 고정 크기 단위입니다. 1픽셀은 컴퓨터 화면의 점 1개와 같습니다. 이는 화면 해상도의 가장 작은 부분입니다. 많은 웹 디자이너는 웹 문서에서 픽셀을 사용하여 웹 사이트가 브라우저에 표시될 때 픽셀 단위로 완벽하게 표시되도록 합니다. 유일한 문제는 저시력 독자를 수용하기 위해 픽셀을 확대하거나 모바일 장치에서 더 쉽게 읽을 수 있도록 픽셀을 줄일 수 없다는 것입니다.

포인트들 ( 태평양 표준시): 점은 전통적으로 다음과 같이 사용됩니다. 인쇄 출판물(즉, 종이에 인쇄된 모든 것에 대해). 1포인트는 1/72인치와 같습니다. 도트는 픽셀과 매우 유사합니다. 고정된 크기그리고 늘리거나 줄일 수 없습니다.

1. 백분율( % ): Percent는 몇 가지 주요 차이점을 제외하고 em과 매우 유사합니다. 첫째, 현재 글꼴 크기는 100%입니다(즉, 12pt = 100%). 백분율 단위를 사용하면 쉽게 읽을 수 있도록 텍스트를 확대/축소할 수 있습니다.

차이점이 뭐야?

이 단위들 사이의 차이점은 다음에서 이해하기 쉽습니다. 구체적인 예. 서로의 관계는 다음과 같습니다: 1em = 12pt = 16px = 100%. 본문 CSS 선택기를 사용하여 기본 글꼴 크기를 100%에서 120%로 늘리면 어떤 일이 발생하는지 살펴보겠습니다.

보시다시피 Ems와 Percentage는 기본 글꼴 크기가 증가함에 따라 증가하지만 Pixel과 Dots는 그렇지 않습니다. 텍스트에 절대 크기를 사용하는 것은 쉽지만 모든 장치에 표시되는 확장 가능한 텍스트를 사용하는 것이 훨씬 쉽습니다. 따라서 웹문서의 텍스트는 Em, Percent 단위를 사용하는 것이 바람직합니다.

EM 또는 백분율?

우리는 포인트와 픽셀이 웹 문서에 가장 적합한 단위가 아니라는 것을 발견했습니다. 이제 Em과 Percent만 남았습니다. 이론적으로 Em과 Percent는 동일한 단위이지만 실제로는 무시할 수 없는 사소한 차이가 있습니다.

위의 예에서는 Percentage 단위를 기본 글꼴 크기(body 태그의 경우)로 사용했습니다. 당신이 변경하는 경우 기본 크기글꼴을 Percent에서 Em(예: body(font-size: 1em; ))으로 변경하면 차이를 느끼지 못할 가능성이 높습니다. 본문 글꼴 크기가 1em이고 클라이언트가 브라우저의 "텍스트 크기" 설정(이 설정은 Internet Explorer와 같은 일부 브라우저에서 사용 가능)을 변경할 때 어떤 일이 발생하는지 살펴보겠습니다.

클라이언트 브라우저의 텍스트 크기가 "medium"으로 설정된 경우 Em과 Percent 간에 차이가 없습니다. 하지만 이 설정을 변경하면 차이가 상당히 눈에 띄게 나타납니다. 가장 작은 설정을 사용하면 Em이 백분율보다 훨씬 작습니다. 그리고 "가장 큰" 설정에서는 그 반대가 됩니다. Em은 Percent보다 훨씬 큽니다. Em 단위는 원래대로 크기가 조정된다고 말할 수 있지만 실제로는 이러한 텍스트의 크기가 너무 급격하게 조정되어 일부 장치에서는 가장 작은 텍스트도 읽을 수 없게 됩니다.

결론

이론적으로 Em 단위는 웹 문서의 글꼴 크기에 대한 새로운 표준이지만 실제로는 Percent 단위가 더 사용자 친화적인 것으로 나타났습니다. 바뀔 때 클라이언트 설정백분율 단위를 사용하는 텍스트의 크기는 적절하게 조정되므로 디자이너는 가독성, 접근성 및 시각적 디자인을 유지할 수 있습니다.

승자: 백분율(%).

보통 만들때 새로운 디자인그런 다음 body 요소에 대해 백분율(body(font-size: 62.5%;))을 사용한 다음 em을 사용하여 더 확장합니다. 본문이 백분율로 설정되어 있는 한 다른 규칙에 백분율 또는 Em을 사용할 수 있으며 CSS 선택기백분율을 기본 글꼴 크기로 사용하는 이점을 계속 활용합니다.

지난 몇 년 동안 이러한 관행은 웹 디자인에서 매우 보편화되었습니다.
이제 픽셀이 글꼴 크기의 유효한 단위로 사용됩니다. 사용자는 브라우저의 "확대/축소" 기능을 사용하여 작은 텍스트를 읽을 수 있습니다. 그러나 화면이 매우 큰 모바일 장치로 인해 픽셀 사용이 문제가 됩니다. 고밀도픽셀(일부 안드로이드 기기 iPhone의 밀도는 인치당 200~300픽셀이므로 11픽셀 및 12픽셀 글꼴을 읽기가 어렵습니다. 그래서 저는 웹 문서의 기본 글꼴 크기로 Percentage를 계속 사용하고 있습니다.

픽셀 값을 사용하는 개발자의 일반적인 습관으로 인해 모든 사람이 em 매개변수의 실제 목적과 CSS에서 작동하는 방식을 이해하지 못하고 있다고 생각합니다.

몇 가지 가이드를 작성하는 동안 우리는 어떻게든 이러한 의미를 다루어야 했기 때문에 오늘은 여러분에게 말씀드릴 내용이 있습니다. 오늘 우리의 가이드가 웹 프로젝트 개발을 위해 설계된 편리하고 사려 깊은 기술의 막을 내리는 데 도움이 되기를 바랍니다.

엠의 정의

사양에는 em 매개변수가 많이 도입되어 있습니다.

요소에 적용된 계산된 글꼴 크기 값과 동일

즉, 만약 우리가 다음 코드 CSS:

요소 (
글꼴 크기: 20px;
}
이는 해당 요소 또는 해당 요소에 1em이 설정되어 있음을 의미합니다. 하위 요소, 는 20픽셀과 같습니다. .

다음 코드를 사용하는 경우:

요소 (
글꼴 크기: 20px;
폭: 4em;
높이: 4em;
}
이는 요소의 너비와 높이(여기서는 4em x 4em으로 지정됨)가 80px x 80px(20px * 4 = 80px)임을 의미합니다.

좀 더 자세히 살펴보자

기억의 열쇠는 em의 목적과 유래이다 이 매개변수. 수행원:

Em은 현재와 동일한 인쇄소의 변화 단위입니다. 지정된 크기폰트. em이라는 이름은 문자 M과 연관되어 있습니다. 원래 이 장치너비에서 얻은 대문자 M 특정 글꼴을 사용할 때

문서는 이름이 원래 문자 M의 너비를 기반으로 했지만 더 이상 중요하지 않다고 설명하면서 계속됩니다. 오늘날부터 em 측정 단위는 글꼴의 포인트 크기와 연관됩니다.

사용 이 방법 CSS 파일에서는 계산이 발생하지 않습니다. 정확한 정의그게 뭔지. 이 장치의 가치는 귀하의 사용 방식에 따라 달라집니다. 계단식 테이블스타일. 이론적으로 em 단위에 모든 요소의 길이를 지정한 경우 글꼴 크기만 변경하면 픽셀 단위까지 완벽한 마크업을 모두 "파괴"할 수 있습니다.

글꼴 크기 매개변수를 사용하지 않으면 어떻게 되나요?

위의 예와 연결된 JSBin에서는 글꼴 크기 매개변수가 정확하게 지정됩니다. em 단위는 "base" 매개변수에서 파생됩니다. 하지만 요소에 정확한 글꼴 크기 매개변수가 없으면 어떻게 될까요?

이 경우 글꼴 크기 매개변수는 문서 트리 전체에 걸쳐 상속되므로 em 단위의 값은 상속된 매개변수에서 파생됩니다. 전체 문서에 글꼴 크기에 대한 언급이 없으면 단일 em 단위의 값은 기본값인 16픽셀이 됩니다(그리고 이는 브라우저마다 다르지 않다고 생각합니다).

"rem"은 사람들에게 자동으로 입력되어야 합니다.

이제 CSS에 새로운 기능을 추가할 시간입니다: . 이 장치(이름은 "root em"에서 파생됨)는 IE9+, FF3.6+, Chrome, Safari 5+ 및 Opera 11.6+ 등 모든 브라우저에서 완벽하게 지원됩니다.

전반적으로 이 단위는 이해하기 매우 쉽습니다. "에 지정된 하나의 "마스터" 값을 기반으로 HTML 문서 전체에서 em 단위 값을 만드는 기능을 제공합니다. HTML"-요소. 이렇게 하면 문서에 사용된 모든 em 단위가 주요 rem 값을 기반으로 하기 때문에 글꼴 크기 매개변수를 잊어버릴 수 있습니다. 예를 들면 다음과 같습니다.

HTML(글꼴 크기: 62.5%; )
본문( 글꼴 크기: 1.4rem; ) /* =14px */
h1 ( 글꼴 크기: 2.4rem; ) /* =24px */
그리고 em과 마찬가지로 "에 글꼴 크기 값을 지정하지 않으면 HTML" 요소의 경우 "root em" 단위는 기본적으로 16픽셀입니다.

카르페 디엠

em을 사용하면 다양한 표현을 생각해 낼 수 있습니다 :)

수년 동안 웹사이트 개발에 종사한 후 마침내 고정된 너비에서 벗어날 수 있게 되었습니다. 많은 사람들이 이미 개발로 전환했지만 적응형 디자인, 모두가 여전히 때때로 픽셀 값을 사용합니다. 템플릿 요소에는 이것이 충분할 수 있지만 em 값으로 완전히 변환되어야 하는 것은 타이포그래피라고 생각합니다.

em 단위를 사용하여 전체 템플릿을 만들 수 있지만 적응형 템플릿픽셀 값을 사용하는 것이 더 낫습니다. 백분율이미 언급했듯이 타이포그래피에는 em을 사용하세요.

그럼 오늘 튜토리얼을 재미있게 즐기시고 배운 내용을 활용해 보시길 바랍니다.

댓글을 남기는 것을 잊지 마세요!

CSS에서 길이를 지정할 수 있습니다 다른 단위. 그 중 일부는 포인트(pt) 및 파이카(pc)와 같은 인쇄상의 전통에서 유래했습니다. 센티미터(cm)와 인치(in)는 일상생활에서 우리에게 친숙한 단위입니다. CSS를 위해 특별히 고안된 "마법의" 단위인 px도 있습니다. 이것은 다음을 의미합니까? 다른 속성다른 단위가 필요합니까?

아니요, 측정 단위는 속성과 관련이 없지만 디스플레이 매체(화면 또는 종이)와 직접 관련됩니다.

모든 측정 단위는 어디에서나 사용될 수 있습니다. 픽셀(여백: 5px) 단위의 값을 갖는 속성은 인치 또는 센티미터(여백: 1.2in, 여백: 0.5cm) 단위의 값도 허용하며 그 반대의 경우도 마찬가지입니다.

그러나 일반적으로 화면 표시와 인쇄에는 서로 다른 단위 세트를 사용하는 것이 좋습니다. 단위 사용에 대한 팁은 다음 표에 요약되어 있습니다.

절대 단위 간의 관계는 다음과 같습니다. 1in = 2.54cm = 25.4mm = 72pt = 6pc

눈금자가 있으면 장치의 정확성을 확인할 수 있습니다. 다음은 1인치(2.54cm) 높이의 직사각형입니다.
72pt
↓

CSS의 소위 절대 단위(cm, mm, in, pt 및 pc)는 다른 모든 곳과 동일한 의미이지만 출력 장치의 해상도가 충분히 높은 경우에만 해당됩니다. 레이저 프린터에서 1cm는 정확히 1cm와 같아야 합니다. 하지만 기기에서는 저해상도, 컴퓨터 화면과 마찬가지로 CSS에는 이것이 필요하지 않습니다. 물론, 다른 장치그리고 다른 CSS 구현다르게 표시하려고 노력합니다. 고해상도 장치, 특히 인쇄용으로 이러한 장치를 남겨 두는 것이 좋습니다. ~에 컴퓨터 화면모바일 장치가 예상대로 작동하지 않을 수도 있습니다.

과거에는 CSS에서 컴퓨터 화면에도 절대 단위가 올바르게 표시되도록 요구했습니다. 그러나 올바른 구현보다 잘못된 구현이 더 많았고 개선이 예상되지 않았기 때문에 CSS는 2011년에 이 요구 사항을 포기했습니다. 현재 절대 단위는 인쇄할 때와 고해상도 장치에서만 올바르게 작동하는 데 필요합니다.

CSS는 "고해상도"가 정확히 무엇을 의미하는지 지정하지 않습니다. 하지만 오늘날의 저렴한 프린터는 최소 300dpi를 갖고 있기 때문에 좋은 화면약 200dpi인 경우 경계는 이 값 사이 어딘가에 있을 가능성이 높습니다.

인쇄물을 제외하고 절대 단위를 사용하지 않는 또 다른 이유는 다음과 같습니다. 다른 화면우리는 서로 다른 거리에서 바라본다. 화면의 1cm 데스크톱 컴퓨터작아 보인다. 하지만 모바일 화면당신 눈앞에 - 그게 많아요. 대신 상대 단위를 사용하는 것이 좋습니다. 여자 이름.

em 및 ex 단위는 글꼴 크기에 따라 다르며 문서의 각 요소마다 다를 수 있습니다. em 단위는 단순히 글꼴 크기입니다. 2in의 글꼴이 지정된 요소에서 1em은 이러한 2in를 의미합니다. em에 크기(예: 들여쓰기)를 지정한다는 것은 크기가 글꼴을 기준으로 설정되고 사용자가 사용하는 글꼴이 무엇이든 크다는 것을 의미합니다(예: 큰 화면) 또는 작음(예: 휴대 기기), 이러한 치수는 비례적으로 유지됩니다. CSS에서 text-indent: 1.5em 및 margin: 1em과 같은 선언은 매우 널리 사용됩니다.

ex 단위는 자주 사용되지 않습니다. 글꼴의 x 높이에서 측정해야 하는 크기를 나타냅니다. X-높이는 대략적으로 말하면 높이입니다. 소문자좋다 ㅏ, 씨, 중, 또는 영형. 글꼴 같은 사이즈(따라서 동일한 em의 경우) 소문자의 크기에는 큰 차이가 있을 수 있으며, 예를 들어 일부 그림이 x 높이에 해당하는 것이 중요한 경우 ex 단위가 사용됩니다.

CSS의 px 단위는 마술적입니다. 현재 글꼴과 관련이 없지만 일반적으로 물리적인 센티미터나 인치와도 관련이 없습니다. px 단위는 작지만 눈에 보이는 것으로 정의됩니다. 수평선 1px 두께는 선명한 가장자리로 렌더링될 수 있습니다(앤티앨리어싱 없음). 명확하고 작으며 눈에 띄는 것으로 간주되는 것은 장치와 사용 방법에 따라 다릅니다. 즉, 장치를 눈 앞에 직접 들고 있는지, 어떻게 사용하는지에 따라 다릅니다. 휴대전화, 모니터처럼 팔 길이로 또는 그 사이 어딘가에 전자책? 따라서 px는 정의에 따라 고정된 길이가 아니라 장치 유형과 일반적인 사용에 따라 달라지는 것입니다.

px 단위가 왜 그런 것인지 이해하려면 1990년대 CRT 모니터를 상상해 보십시오. 표시할 수 있는 가장 작은 도트는 약 1/100인치(0.25mm)이거나 약간 더 컸습니다. px 단위는 해당 화면 픽셀에서 이름을 얻습니다.

현재 장치는 원칙적으로 더 작고 선명한 점을 표시할 수 있습니다(돋보기 없이는 보기 어려울 수 있음). 하지만 CSS에서 px를 사용한 지난 세기의 문서는 기기에 관계없이 동일하게 보입니다. 특히 프린터는 1px보다 훨씬 얇은 선을 선명하게 표시할 수 있지만 프린터에서도 1px 선은 모니터에서와 거의 동일하게 보입니다. 장치는 변경되지만 px 단위는 항상 동일하게 보입니다.

실제로 CSS에서는 모든 인쇄 출력에서 ​​1px가 1인치의 1/96과 정확히 동일해야 합니다. CSS에서는 화면과 달리 프린터가 필요하지 않다고 생각됩니다. 다른 크기 px가 명확한 선을 표시하도록 합니다. 따라서 인쇄할 때 px는 장치에 관계없이 동일하게 보일 뿐만 아니라 동일한 값으로 측정됩니다(설명된 cm, pt, mm, in 및 pc 단위와 동일).

CSS는 또한 다음을 정의합니다. 래스터 이미지(예: 사진)은 기본적으로 이미지의 1픽셀 x 1픽셀 크기로 표시됩니다. 600 x 400 해상도의 사진은 너비가 600픽셀, 높이가 400픽셀입니다. 따라서 사진의 픽셀은 출력 장치의 픽셀(매우 작을 수 있음)에 연결되지 않고 px 단위에 연결됩니다. 이를 통해 스타일에 pt, cm 등이 아닌 px 단위를 사용하는 한 이미지를 다른 문서 요소와 정확하게 정렬할 수 있습니다.

CSS로 작업할 때 이 도구나 저 도구가 얼마나 강력한지 깨닫기 시작하는 시점이 항상 옵니다. CSS em 유닛에 대해 꽤 잘 이해하고 있지만 Simurai의 게시물을 읽은 후에야 그 힘을 실제로 느꼈습니다. 이 기사에서는 그의 경험을 활용하겠습니다.

엠이 뭐예요?

CSS에서 em 단위는 em이 적용되는 요소의 현재 글꼴 크기와 같습니다. 특정 글꼴 크기가 없는 하위 요소에 em 단위가 사용되면 상위 요소에서 문서의 루트 요소까지 상속됩니다.

다음 CSS 코드를 보세요:

예(글꼴 크기: 20px; )

안에 이 경우이 요소 또는 해당 하위 요소의 1em( 다른 글꼴 크기 정의가 없는 경우)는 20px과 같습니다. 따라서 다음 줄을 추가하면:

예( 글꼴 크기: 20px; 테두리 반경: .5em; )

5em의 border-radius 값은 10px(즉, 20 * 0.5 )와 같습니다. 비슷하게:

예( 글꼴 크기: 20px; 테두리 반경: .5em; 패딩: 2em; )

2em 패딩 값은 40px(20 * 2)입니다. 언급한 대로 이러한 유형의 계산은 글꼴 크기가 명시적으로 정의되지 않은 모든 하위 요소에 적용됩니다. 그러면 CSS em 단위 값도 비슷한 방식으로 계산됩니다.

CSS가 글꼴 크기를 지정하지 않으면 em이 브라우저의 기본 글꼴 크기가 됩니다. 대부분 이 값은 16px입니다. 이 방법을 어떻게 사용하는지 살펴보겠습니다. 쉬운 변화요소 크기.

구성 요소 수준 크기 조정

이제 "컴포넌트"라는 개념이 꽤 대중화되었습니다. 이는 모듈식 CSS 기술뿐만 아니라 일반적으로 캡슐화된 코드 섹션에 대한 아이디어에도 적합합니다. 그리고 웹 구성 요소가 광범위한 지원을 받게 되면 다음 방법이 훨씬 더 흥미로울 것이라고 생각합니다.

이 방법은 다음과 같이 작동합니다. 글꼴 크기 속성이 사용되어 글꼴 크기의 기본 단위를 생성합니다. 다양한 요소모듈 내부. em 단위는 글꼴 크기를 기준으로 계산되기 때문입니다. 상위 요소, 그러면 상위 요소의 글꼴 크기 속성을 변경하여 전체 구성 요소를 쉽게 편집할 수 있습니다.

실제로 이를 살펴보겠습니다.

데모 보기

이 모듈은 네 가지 주요 요소로 구성됩니다. 모듈 크기를 변경하려면 데모 페이지 상단의 슬라이더를 이동하세요. 원하시면 보실 수 있습니다 V 전체 화면으로보기 . 슬라이더에는 구성 요소의 루트 요소에 대한 단일 값인 글꼴 크기 값이 포함되어 있습니다.

컴포넌트의 치수를 하나 이후에 설정한다는 점에 유의해야 합니다. CSS 속성선택 사항이며 사용자는 설정에서 크기를 변경할 수 있습니다. 이는 개발자가 별도의 과정을 거치지 않고도 빠르게 변경할 수 있도록 하기 위한 것입니다. 다른 의미구성 요소의 모든 부분에서.

글꼴 크기가 변경되면 상위 요소와 모든 하위 요소의 모든 em CSS 값에 영향을 미치므로 구성 요소의 모든 부분이 비례적으로 유연해집니다.

참고 사항:

• 구성 요소 내부에서 모든 치수는 em 을 사용하여 지정됩니다. 원하는 경우 변경할 수 있는 외부 테두리와 이미지를 제외하고는 크기가 고정되어 있어서 만족합니다.
• 오른쪽 아이콘 상단 모서리눈물방울처럼 보이는 는 상위 요소의 글꼴 크기를 유사하게 사용하는 의사 요소입니다.
• CSS에는 상위 요소의 글꼴 크기를 조정하는 두 가지 미디어 쿼리도 포함되어 있습니다. 미디어 쿼리의 모든 크기를 변경할 필요는 없고 글꼴 크기만 변경할 수 있기 때문에 이 방법의 유용성을 보여줍니다.

일부 의견, 누락 등.

예제에서 볼 수 있듯이 이러한 유형의 유연한 크기 조정이 항상 사용해야 하는 것은 아닙니다. 다소 제한적일 수 있습니다.

CSS에서 일부 em 단위 값을 조정해야 할 수도 있습니다. 그리고 예제의 상위 요소 테두리와 마찬가지로 크기를 변경하고 싶지 않을 것입니다. 속성은 모든 요소에 적용되기 때문입니다. 유지하려는 요소의 em을 간단히 이스케이프 처리하면 이 문제를 해결할 수 있습니다.

루트 글꼴 크기를 설정하기 위해 픽셀을 사용할 필요가 없습니다. 이를 위해 em을 사용할 수 있지만 이 단위는 부모로부터 전달된다는 점을 기억하세요.

렘과 Sass는 어떻습니까?

CSS의 rem 단위는 계산된 글꼴 크기에 관계없이 항상 루트 요소의 글꼴 크기 값을 상속합니다. HTML에서 루트 요소는 다음과 같습니다. . 이렇게 하면 rem을 사용할 수 있습니다. 하지만 이는 해당 요소의 글꼴 크기를 사용하여 페이지의 모든 구성 요소를 제어해야 함을 의미합니다. 일부 프로젝트에서는 이 방법이 작동할 수 있지만 크기를 조정할 때 이 방법이 가장 적합하다고 생각합니다. 별도의 구성 요소, 전체 문서가 아닙니다.

Sass 전처리기를 사용하는 경우 이는 부차적인 문제입니다. 궁극적으로 CSS는 Sass 코드에 지정된 모든 단위를 사용하며 상속은 동일한 방식으로 작동합니다.

결론

나는 이것을 믿는다 좋은 방법 CSS 프레임워크나 구성 요소 라이브러리를 만들 때 사용됩니다. 이 기술은 CSS em 단위가 얼마나 강력한지 실제로 입증합니다.

"CSS에서 em 단위의 힘"이라는 기사의 번역은 친절한 프로젝트 팀에서 준비했습니다.

CSS는 절대 단위와 상대 단위를 사용하여 다양한 요소의 크기를 조정합니다. 절대 단위출력 장치와는 독립적이며 상대 단위는 다른 크기 값에 상대적인 요소의 크기를 결정합니다.

상대 단위

상대 단위일반적으로 텍스트 작업에 사용됩니다. 테이블에 1은 주요 상대 단위를 나열합니다.

em 단위는 현재 요소의 글꼴 크기에 따라 달라지는 변경 가능한 값입니다(크기는 글꼴 크기 스타일 속성을 통해 설정됩니다). 각 브라우저에는 이 크기가 명시적으로 지정되지 않은 경우 사용되는 기본 제공 텍스트 크기가 있습니다. 따라서 처음에 1em은 브라우저의 기본 글꼴 크기 또는 상위 요소의 글꼴 크기와 같습니다. 백분율 표기법은 1em과 100%의 값이 동일하다는 점에서 em과 동일합니다.

ex 단위는 소문자 "x" 문자의 높이로 정의됩니다. ex는 em과 동일한 규칙을 따릅니다. 즉, 브라우저의 기본 글꼴 크기나 상위 요소의 글꼴 크기에 바인딩됩니다.

ch 단위는 현재 요소의 "0" 문자 너비와 동일하며 em과 마찬가지로 글꼴 크기에 따라 다릅니다.

em과 rem의 차이점은 다음과 같습니다. em은 요소의 상위 요소의 글꼴 크기에 따라 달라지며 그에 따라 변경됩니다. rem은 다음 요소에 연결됩니다. 루트 요소, 즉 html 요소에 지정된 글꼴 크기입니다.

브라우저 뷰포트의 크기와 관련된 상대 단위 그룹도 있습니다. 테이블에 2는 설명과 함께 그 목록을 보여줍니다.

절대 단위

절대 단위는 물리적 크기- 인치, 센티미터, 밀리미터, 포인트, 파이카 및 픽셀. dpi가 낮은 장치(인치당 픽셀 수가 픽셀 밀도를 결정함)의 경우 바인딩은 픽셀당입니다. 이 경우 1인치는 96픽셀과 같습니다. 분명히 실제 인치는 그러한 장치의 인치와 일치하지 않습니다. 높은 DPI 장치에서 실제 인치는 화면상의 인치와 동일하므로 픽셀 크기는 1/96인치로 계산됩니다. 테이블에 3은 기본 절대 단위를 나열합니다.

예

30px 헤더

텍스트 크기 1.5em

24포인트 헤드라인

텍스트를 오른쪽으로 30밀리미터 이동

메모

크기를 설정할 때 측정 단위를 지정해야 합니다(예: 너비: 30px). 그렇지 않으면 브라우저는 필요한 크기를 이해하지 못하기 때문에 원하는 결과를 표시할 수 없습니다. 값이 0(여백: 0)인 경우에만 단위가 추가되지 않습니다.

Internet Explorer는 vmin 대신 vm 단위를 지원합니다.

사양

각 사양은 여러 단계의 승인을 거칩니다.

• 권장 사항 - 이 사양은 W3C에서 승인되었으며 표준으로 권장됩니다.
• 후보자 추천 ( 가능한 추천 ) - 표준을 담당하는 그룹은 목표 달성에 만족하지만 표준을 구현하려면 개발 커뮤니티의 도움이 필요합니다.
• 제안된 권장사항 제안된 권장 사항) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문위원회에 제출됩니다.
• 작업 초안 - 커뮤니티 검토를 위해 논의되고 수정된 초안의 보다 성숙한 버전입니다.
• 편집자 초안( 편집 초안) - 프로젝트 편집자가 변경한 후의 표준 초안 버전입니다.
• 초안 ( 초안 사양) - 표준의 첫 번째 초안 버전입니다.

×