pt로 할까요, px로 할까요?

pt로 할까요, px로 할까요?

사이의 차이점은 무엇입니까?pt그리고.pxCSS 에서? 어떤 그 이유는 무엇입니까?어떤 것을 사용해야 하고 그 이유는 무엇입니까?

px≠ 픽셀

이 모든 대답이 틀린 것 같습니다.직관과 반대로 CSS에서는px 픽셀이 아닙니다.적어도 단순한 육체적인 의미는 아닙니다.

W3C, EM, PX, PT, CM, IN…에서 본 기사를 읽어 보십시오.px는 CSS를 위해 발명된 "마성" 유닛입니다.의 의미는px하드웨어와 해상도에 따라 달라집니다.(해당 기사는 새로 작성된 것으로, 마지막으로 업데이트된 2014-10).)

1px는 디자이너가 의도한 얇은 선이 거의 보이지 않는 크기입니다.

이 기사를 인용하자면:

px 단위는 CSS의 마법 단위입니다.현재 글꼴과 관련이 없으며 절대 단위와도 관련이 없습니다.px 장치는 작지만 눈에 띄도록 정의되어 있으며, 가로 1px 너비의 선이 날카로운 모서리로 표시될 수 있습니다(안티 앨리어싱 없음).날카롭고 작고 눈에 잘 띄는 것은 기기와 사용 방식에 따라 다릅니다. 휴대전화처럼 눈에 가까이 대고 있는가, 팔 길이로 잡고 있는가, 컴퓨터 모니터처럼? 아니면 책처럼 그 사이 어딘가에?따라서 px는 일정한 길이로 정의되는 것이 아니라 장치의 유형과 장치의 일반적인 용도에 따라 결정되는 것입니다.

px의 외관에 대한 아이디어를 얻기 위해 1990년대 CRT 컴퓨터 모니터를 상상해 보십시오. 그것이 표시할 수 있는 가장 작은 점은 약 100분의 1인치(0.25mm) 이상입니다.px 유닛은 그 스크린 픽셀에서 이름을 따왔습니다.

요즘에는 원칙적으로 더 작은 뾰족한 점들을 표시할 수 있는 장치들이 있습니다(그것들을 보려면 돋보기가 필요할지도 모르지만).그러나 CSS에서 px를 사용했던 지난 세기의 문서들은 어떤 장치를 사용하든 여전히 똑같아 보입니다.특히 프린터는 1px보다 훨씬 작은 세부 정보를 가진 날카로운 선을 표시할 수 있지만 프린터에서도 1px 선은 컴퓨터 모니터에 보이는 것과 매우 비슷해 보입니다.장치는 변하지만 px는 항상 동일한 시각적 외관을 갖습니다.

그 기사는 사용에 관한 몇 가지 지침을 제공합니다.pt.px.em, 이 질문에 대한 답을 드립니다.

CSS-Tricks의 이 훌륭한 기사를 보십시오.

• px – em – % – pt – 키워드

기사에서 가져온 내용:

---

pt

에서 글꼴 크기를 선언할 수 있는 마지막 측정 단위는 포인트 값(pt)입니다.포인트 값은 인쇄용 CSS 전용입니다! 포인트는 실제 잉크 온 페이퍼 타이포그래피에 사용되는 측정 단위로 72pts = 1inch입니다.1인치 = 실제 1인치 크기의 ruler.해상도에 따라 완전히 자의적인 화면은 1인치도 되지 않습니다.

픽셀이 폰트 크기의 모니터에서 데드 정확도가 높은 것과 마찬가지로, 포인트 크기도 종이에서 데드 정확도가 높습니다.페이지를 인쇄하는 동안 최상의 교차 브라우저 및 교차 플랫폼 결과를 얻으려면 인쇄 스타일시트를 설정하고 모든 글꼴의 크기를 포인트 크기로 조정합니다.

적절한 방법으로 화면 표시에 포인트 크기를 사용하지 않는 이유는 크로스 브라우저 결과가 크게 다르기 때문입니다.

px

세밀한 제어가 필요한 경우 픽셀 값(px)으로 글꼴 크기를 조정하는 것이 좋습니다(제가 가장 좋아하는 방법입니다).컴퓨터 화면에서는 하나의 픽셀보다 더 정확하지 않습니다.글꼴 크기를 픽셀 단위로 조정하면 브라우저에서 문자를 정확하게 픽셀 수만큼 높이로 렌더링하도록 지시할 수 있습니다.

윈도우, 맥, 앨리어싱, 안티 앨리어싱, 크로스 브라우저는 상관없습니다. 14px로 설정된 글꼴은 14px 높이가 됩니다.그러나 그렇다고 해서 아직도 약간의 변화가 없을 것이라는 말은 아닙니다.아래의 빠른 테스트에서 결과는 키워드보다 약간 더 일치했지만 동일하지는 않았습니다.

픽셀 값의 특성상 캐스케이드하지 않습니다.부모 요소의 픽셀 크기가 18px이고 자식이 16px이면 자식은 16px가 됩니다.그러나 글꼴 크기 설정을 함께 사용할 수 있습니다.예를 들어, 부모가 16px로 설정되어 있고 자식이 더 크게 설정되어 있으면 실제로 자식이 부모보다 더 크게 나올 수 있습니다.간단한 테스트를 통해 다음과 같은 결과를 알 수 있었습니다.

"Larger"는 부모의 16px를 25% 증가한 20px로 밀어 넣었습니다.

픽셀은 접근성과 사용성 문제로 인해 과거에 좋지 않은 랩을 받아왔습니다.IE 6 이하에서는 픽셀 단위로 설정된 글꼴 크기를 사용자가 조정할 수 없습니다.이것은 우리의 젊은 건강한 디자이너들이 12px로 활자를 설정하고 화면에서 그것을 잘 읽을 수 있다는 것을 의미합니다. 그러나 치아에 조금 더 오래 있는 사람들이 그들이 읽을 수 있도록 크기를 늘리게 되면, 그들은 그것을 읽을 수 없습니다.이건 정말 IE 6의 잘못이지 우리의 잘못이 아닙니다. 하지만 우리는 우리가 가진 것을 가지고 있고 우리는 그것을 처리해야 합니다.

글꼴 크기를 픽셀 단위로 설정하는 것이 가장 정확한(그리고 가장 만족스러운) 방법이지만 사이트에서 IE 6을 사용하는 방문자 수와 접근성 요구를 고려해야 합니다.우리는 이 일에 더 이상 신경 쓸 필요가 없는 피나는 지경에 처해 있습니다.

---

여기 그들의 차이점에 대한 아주 자세한 설명이 있습니다.

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

jist of it (출처)

픽셀은 스크린 미디어(즉, 컴퓨터 스크린에서 읽을 수 있는)에 사용되는 고정 크기 단위입니다.픽셀은 "그림 요소"를 의미하고 여러분도 알다시피, 하나의 픽셀은 여러분의 화면에서 하나의 작은 "사각형"입니다. 점은 전통적으로 인쇄 매체(종이 등에 인쇄해야 하는 모든 것)에서 사용됩니다.1점은 1인치의 1/72와 같습니다.포인트는 고정된 크기 단위이고 크기를 조정할 수 없다는 점에서 픽셀과 매우 유사합니다.

Apt는 1/72인치이며 DPI를 정확하게 계산하지 않는 장치에서 렌더링되는 모든 것에 대해 쓸모없는 척도입니다.이것은 인쇄를 위한 합리적인 선택이자 화면에 사용하기 위한 끔찍한 선택입니다.

px는 픽셀로, 대부분의 경우 화면 픽셀에 매핑됩니다.

CSS는 다른 유닛들을 많이 제공하며, 어떤 유닛을 선택해야 하는지는 크기를 어떻게 설정하느냐에 따라 달라집니다.

이미지에 맞게 크기를 조정해야 하거나 테두리를 얇게 하려면 픽셀이 좋습니다.

백분율은 사용자의 선호도에 비례하는 글꼴 크기를 얻을 수 있으므로 글꼴 크기에 적합합니다.

EMS는 요소가 글꼴 크기를 기준으로 크기를 조정할 때 유용합니다(글꼴 크기가 더 크면 문단이 더 넓어질 수 있음).

… 등등.

예, "px"는 "화소"를 의미합니다.

지금 말씀드리니 벌써부터 현수막에 "px는 픽셀과 아무 상관이 없습니다"라는 문구가 적힌 클레르보이아들의 군대가 다가오는 소리가 들립니다.그들은 원래의 진실이 들어있는 모든 댓글을 찾아보고 그것이 거짓이고 틀리고 오해의 소지가 있다는 것을 자세히 설명할 정도로 더 잘 안다고 자부합니다.

그리고 네, 그들에게는 한 가지 점이 있습니다. 사실 아이폰 4라고 불리는 매우 특정한 시점입니다.
이렇게 됐어요.

평화로운 나날들

레티나가 디스플레이하기 전에는 하나의 픽셀이 하나의 픽셀이었습니다.인간의 논리대로라면 그렇게 되어야 하기 때문입니다.하나의 픽셀 라인을 화면 위에 놓고, 그 지옥을 확대하면 됩니다. 바로 한 픽셀 폭입니다.현대적인 하드웨어를 포함한 많은 하드웨어에서 여전히 그러하므로 1 px = 1픽셀이라고 말하는 것은 "incorrect"을 제외하고는 모든 것이 됩니다.

그렇지만.

그 당시 어느 날 아이폰 3에 이어 아이폰 4가 출시되어 X와 Y의 해상도가 두 배로 높아졌고, 사파리 개발자들은 특히 많은 웹 개발자들이 꾸준한 320x480 해상도에 의존했기 때문에 모든 웹 페이지가 우스꽝스럽게 보일 것이라고 걱정했습니다.따라서 640x960 픽셀 면적을 만드는 것만으로도 대부분의 사이트가 사라졌을 것입니다.그리고 이 시점에서, 어떤 사람은 마법의 짐승을 소개할 수 있는 10억 달러의 아이디어를 가지고 있었습니다. 바로 CSS 기능입니다.-webkit-min-device-pixel-ratio- 아이폰 3에서는 1이었고 아이폰 4에서는 기본적으로 2로 설정되었습니다."1 CSS 픽셀은 이제 2개의 스크린 픽셀을 의미합니다."라는 의미입니다.웹사이트를 어느 정도 온전한 상태로 유지하기 위한 매우 보기 흉한 해킹 - 일부 이미지의 매우 적은 비용이 약간 흐릿하게 보이는 그 당시에는 효과가 있었지만, 장기적으로는 가난한 노인들에 대한 전 세계적인 오해를 야기했습니다.px실제로 아무 잘못도 하지 않은 사람입니다.

그럼 pt 아니면 px?

화면에서는 여러 디스플레이에서 하나의 픽셀을 의미하므로 px를 사용합니다.픽셀을 사용하는 가장 큰 장점은 픽셀이 바삭바삭해 보인다는 것입니다. 1px가 2개 또는 3개의 물리적인 그림 요소를 의미하더라도 그림을 그리는 것은 그 중간이 아니라 경계에서 시작됩니다.이것은 굉장히 중요합니다.텍스트가 포함된 브라우저 애니메이션, 특히 크기 전환: 디브를 두 배로 늘렸지만 천천히 늘릴 때.애니메이션이 완료되면 브라우저가 픽셀을 다시 계산하고 글꼴을 다시 그리는 방법을 볼 수 있습니다.애니메이션 자체를 더 부드럽게 만들기 위해 약간 흐릿한 영역의 일시적인 이미지가 있습니다. 그리고 나서 최종 상태에 도달한 후에 더 정확한 이미지가 계산됩니다.이 코드펜을 참조하십시오.

1px는 항상 하드웨어 픽셀의 정수 곱셈입니다. 즉, 운영 체제가 전체 데스크톱 크기를 sqrt(2) x PI로 조정하는 것처럼 똑똑하지 않다면 말입니다.또는 125%에 불과합니다. 작은 노트북에 Windows(윈도우)를 안녕하세요.그러나 어쨌든 px를 사용하면 물리적 그리드에 맞춰 물건을 정렬할 수 있는 가장 높은 기회를 얻을 수 있습니다.

pt는?pt의 재미있는 점은 그것이 실제로 px로 번역되었기 때문에 픽셀 크기를 지정하는 것이 더 나쁜 방법일 뿐입니다.여기 계산기가 있습니다.(인쇄 세계에서 나온 것이기 때문에) 포인트는 무언가를 인쇄할 때 의미가 생기기 시작하지만, 요즘에는 필요한 것에 따라 더 나은 대안이 있습니다. 그래서 솔직히 포인트는 거의 필요하지 않습니다.

TL;DR

화면의 경우 가능할 때마다 px를 사용합니다.

pt는 역사적으로 인쇄 서체에서 사용된 "포인트"의 파생어(약칭)로, 1 포인트는 대략 1/72 인치의 측정값을 가지고 있으므로 72 포인트 글꼴의 크기는 1 인치가 되는 "포인트"의 일반적인 "measured"였습니다.

EDIT: 1인치 또는 2.54cm에 약 72(72.272) 지점이 있음을 명확히 하기 위한 참고 사항입니다.이 점은 밀라노의 타이포그래퍼인 프란체스코 토르니엘라 다 노바라 (1490년경–1589년)가 그의 1517년 알파벳인 랄파베토에서 처음 발견했습니다.(다양한 참조를 검색할 수 있습니다.)

---

px픽셀(pixel)은 화면, 도트 매트릭스 프린터 또는 다른 프린터 또는 장치에 있는 단순한 "점"을 나타내는 약어로, 고정된 크기의 솔리드 스트라이커가 리본을 눌러 문자의 각인을 남긴 오래된 타자기와는 반대로, 고정된 크기의 이미지를 남깁니다.

"대소문자"와 "하소문자"라는 용어는 역사적으로 고정된 활자 문자를 선택하는 것과 관련이 있었는데, 이는 고정된 활자 문자가 상자 위에 있는 "자본" 문자가 상자 아래에 있는 상자 위에 있고, 따라서 "하소문자"가 있습니다.

글자체 글꼴과 크기에 따라 다른 상자(케이스)가 있었지만 여전히 각각의 상자에는 "윗쪽"과 "아래쪽" 케이스가 있었습니다.

다른 용어는 "pica"로 글꼴의 한 문자를 나타내는 척도입니다. 따라서 pica는 1/6 인치 또는 12 포인트 단위의 측정값입니다(12/72).

엄밀히 말하면 측정값은 컴퓨터에서 4.233mm 또는 0.166인치인 반면 기존 지점(미국)은 1/72.27인치이고 프랑스어는 4.512mm(0.177인치)입니다.따라서 측정값에 대한 "대략적"인 제 진술입니다.

또한 사무실에서 사용되는 타자기는 인치당 각각 10자와 12자의 크기를 가진 "엘리트" 또는 "피카" 크기를 가지고 있었습니다.

또한, 표준화 이전의 "포인트"는 금속 타이포그래퍼 "풋" 크기, 한 글자의 기본 발자국 크기에 기반을 두었으며 크기가 다소 다양했습니다.

인쇄상의 "발"은 원래 죽은 프린터의 실제 발에서 나온 것입니다.타이포그래픽 풋에는 72피카 또는 864개의 포인트가 있습니다.

CSS 사용에 관해서는, 저는 EM을 사용하는 것보다 선호합니다.px아니면pt, 따라서 상대적인 위치와 크기의 손실 없이 확장할 수 있는 이점을 얻을 수 있습니다.

EDIT : 완성도를 위해서 EM을 생각할 수 있습니다 (em1개의 글꼴 높이를 측정하는 요소로서, 12pt 글꼴의 경우 1em은 해당 글꼴의 높이가 되고 2em은 해당 높이의 두 배가 됩니다. 2em은 픽셀입니다.12은 2em입니다 24 입니다. 따라서 10x는 으로 표준 글꼴 크기로서 16 1em을 으로 하는 "" 브라우저로서 0.입니다.따라서 10 px는 일반적으로 16 px = 1em을 표준 글꼴 크기로 하는 "대부분" 브라우저로서 표준 글꼴의 0.63em입니다.

언급URL : https://stackoverflow.com/questions/3557260/should-i-use-pt-or-px