하나가 다른 것보다 더 나은 선택이라고 말하는 것은 잘못입니다 (또는 둘 다 사양에서 자체 목적이 주어지지 않았을 것입니다). StackOverflow가 px 단위를 광범위하게 사용한다는 점도 주목할 가치가 있습니다. Spoike가 말한 것은 잘못된 선택이 아닙니다.

단위의 정의

• px 는 in , pt 또는 cm 와 같은 절대 측정 단위이며 1/96 in in 단위입니다 (나중에 더 많은 이유). 절대 측정이므로 브라우저 창의 크기 나 글꼴 크기와 같은 것에 비례하지 않고 특정 크기로 무언가를 정의하려고 할 때 언제든지 사용할 수 있습니다.

  다른 모든 절대 단위와 마찬가지로 px 단위는 브라우저 창의 너비에 따라 크기가 조정되지 않습니다. 따라서 전체 페이지 디자인에서 %가 아닌 px 와 같은 절대 단위를 사용 하는 경우 브라우저 너비에 맞지 않습니다. 이것은 본질적으로 좋거나 나쁘지 않고 디자이너가 정확한 크기에 접착하는 것과 유연하지 않은 것에 비해 유연해야하지만 정확한 크기에 맞지 않는 과정에서 선택해야하는 선택입니다. 사이트에는 고정 크기와 유연한 크기의 개체가 혼합되어있는 것이 일반적입니다.

  고정 크기 요소는 종종 광고 배너, 로고 또는 아이콘과 같이 페이지에 통합되어야합니다. 이 보장하지만 당신은 거의 항상 적어도 필요한 일부 디자인에서 픽셀 기반의 측정을. 예를 들어 이미지는 기본적으로 각 픽셀의 크기가 1 * px *가되도록 크기가 조정되므로 이미지 주위를 디자인하려면 px 단위 가 필요합니다 . 또한 정확한 글꼴 크기 및 테두리 너비에 유용합니다. 반올림으로 인해 대부분의 화면에 px 단위 를 사용하는 것이 가장 좋습니다 .

  모든 절대 측정 값은 서로 밀접하게 관련되어 있습니다. 즉, 1 인치는 것입니다 항상 96px 것처럼, 1 인치는 것입니다 항상 72pt . ( 스크린 기반 미디어에 대해 말할 때 1in 은 실제로 실제 인치 가 아닙니다 ). 모든 측정은 절대 96ppi 공칭 화면 해상도와 데스크탑 모니터 공칭 시거리를 가정하고, 이러한 스크린 상에 하나의 픽셀은 하나 개 동일 할 것이다 실제 화면의 화소 하나 의실제 픽셀은 96입니다. 픽셀 밀도 또는 시청 거리가 크게 다른 화면에서 또는 사용자가 브라우저의 확대 / 축소 기능을 사용하여 페이지를 확대 한 경우 px 는 더 이상 실제 픽셀과 관련이 없습니다.

• em 은 절대 단위가 아닙니다. 현재 선택된 글꼴 크기를 기준으로하는 단위입니다. 글꼴 크기를 절대 단위 ( px 또는 pt 등)로 설정하여 글꼴 스타일을 재정의하지 않은 경우 사용자 브라우저 나 OS에서 글꼴을 선택한 경우 글꼴 선택에 영향을받습니다. 글꼴 크기가 조정될 때 크기를 조절하려는 경우를 제외하고 em을 일반적인 길이 단위로 사용합니다.

  무언가의 크기가 현재 글꼴 크기에 따라 달라 지도록 하려면 em을 사용하십시오 .

• 또한 % 는이 경우 상위 요소의 높이 또는 너비와 관련된 상대 단위입니다. 디자인이 특정 픽셀 크기에 의존하여 크기를 설정하지 않는 경우 디자인의 총 너비와 같은 항목에 대해 px 단위를 대체 할 수 있습니다.

  디자인에 % 단위를 사용하면 디자인을 화면 / 장치의 너비에 맞게 조정할 수 있지만 px 와 같은 절대 단위를 사용 하지 않아도됩니다.

답변

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt