CSS/css 기초

CSS 기초 공부(4) - 수치를 표현하는 방법

lamarcK 2025. 3. 9. 16:11

앞서 말했듯이 CSS는 HTML을 디자인하는 방법이다. 그렇다면 색상만큼 중요한 디자인 요소는 무엇일까?

그것은 바로 수치(값)이다. 즉 인테리어로 비유하자면 가구의 크기라고 할 수 있다.

CSS에서 수치의 단위는 크게 절대 단위와 상대 단위로 나눌 수 있다.

  1. 절대 단위
  2. 상대 단위

1. 절대 단위

절대 단위란 말 그대로 어떤 상황에서도 '동일하게 고정된' 크기를 가지는 단위를 말한다.

즉 주변 요소나 환경에 영향을 받지 않는다.

 

px (픽셀)

픽셀(Pixel)은 디지털 이미지를 구성하는 가장 작은 단위이며, 화면에 표시되는 이미지를 이루는 기본 요소 인데 모니터 해상도를 나타낼 때 말하는 픽셀이 바로 이 단위이다.

각 픽셀은 RGB(적색, 녹색, 청색) 세 가지 색상 성분을 포함하며 이 성분들의 조합을 통해 다양한 색상을 표현하기 때문에 1픽셀은 RGB 세 가지 색상 정보를 모두 포함하고 있다.

 

사실 픽셀에 대한 설명을 이렇게 자세히 하는 이유는 픽셀이 다른 절대 단위와는 다르게 '실제로는 상대적인 크기'를 가지기 때문이다.

1cm는 전세계 어디를 가도 1cm지만 픽셀은 모니터의 해상도 변화에 따라 고정된 크기가 달라진다. 때문에 브라우저 상에서는 하드웨어 픽셀(모니터의 물리적인 픽셀 크기)이 아닌 소프트웨어 픽셀(CSS 픽셀)로 해상도가 달라져도 px의 크기가 거의 동일하게 보이도록 조정한다. 일반적으로 96dpi(dots per inch)의 화면에서 1픽셀의 시각적 각도와 일치하도록 설계되었으며, 이를 '참조 픽셀'이라고 부른다.

cm (센티미터), mm (밀리미터), in (인치)

실제 길이를 기준으로 크기를 나타낸다.

pt (포인트), pc (파이카)

인쇄 매체에서 글꼴 크기를 나타낼 때 사용된다.

  • pt (포인트) :1pt는 1/72인치(약 0.3528mm)
  • pc (파이카) : 1pc는 1/6인치(12pt에 해당하며, 약 4.233mm)

 

2. 상대 단위

상대 단위는 주변 요소나 환경에 따라 크기가 변하는 단위를 말한다.

 

% (퍼센트)

직관적인 단위라고 할 수 있는데, 부모 요소의 크기를 기준으로 백분율로 크기를 나타낸 것이다. 때문에 반응형 디자인에서 유용하게 사용된다.

 

아래 예시를 보자.

<body>
    <div style="width: 400px; height: 200px; border: 1px solid black;">
        <div style="width: 40%; height: 100px; background-color: lightblue;">
          이 요소의 너비는 부모 요소의 40%이다.
        </div>
        <div style="width: 160px; height: 100px; background-color: aqua;">
            이 요소의 너비는 160px이다.
          </div>
      </div>
</body>

 

부모 요소의 너비를 400px, 높이를 200px로 설정했다. 이때 자식 요소의 너비를 40%로 설정하면, 자식 요소는 부모 요소에 설정된 너비의 40%인 160px을 너비로 가지게 될 것이다.

결과적으로 자식 요소의 너비를 160px로 직접 설정한 경우와 40%로 설정한 경우는 동일한 크기로 나타난다.

하지만 중요한 차이점은 부모 요소의 크기가 변경될 때 발생하게 된다.

만약 부모 요소의 너비가 600px로 변경된다면, 160px로 설정된 자식 요소는 너비가 160px 그대로지만

40%로 설정된 자식 요소는 240px로 변경된다.

즉, '%' 단위는 부모 요소의 크기에 따라 유동적으로 크기가 변하는 상대적인 단위라고 할 수 있다.

 

em

em 단위는 부모 요소의 글꼴 크기를 기준으로 상대적인 크기를 설정하는 CSS 단위이다.

 

아래 예시는 부모 요소의 크기를 20px로 설정하고 그에 따라 1em(20px), 1.5em(30px), 2em(40px)로 보이도록 설정한 것이다.

<body>
    <div style="font-size: 20px;">
        <p style="font-size: 1em;">이 문장은 1em 크기이다.</p>
        <p style="font-size: 1.5em;">이 문장은 1.5em 크기이다.</p>
        <p style="font-size: 2em;">이 문장은 2em 크기이다.</p>
      </div>
</body>

 

rem

rem은 루트 요소(html)의 글꼴 크기를 기준으로 크기를 나타낸다.

em과 유사하지만, 부모 요소의 글꼴 크기 변화에 영향을 받지 않고 최상위 요소(HTML) 상 폰트 크기의 영향을 받는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html {
          font-size: 16px; /* 루트 요소의 글꼴 크기 설정 */
        }
        p {
          font-size: 1.5rem; /* 1.5rem은 24px (16px * 1.5) */
        }
      </style>
    </head>
    <body>
      <p>이 문장은 1.5rem 크기입니다.</p>
      <p style="font-size: 1rem;"> </style>이 문장은 1rem 크기입니다.</p>
      <p style="font-size: 2rem;"> </style>이 문장은 2rem 크기입니다.</p>
    </body>
    </html>

 

이처럼 <head> 태그 내에 html의 기본 font-size를 16px로 설정하고 <p> 태그의 폰트 사이즈를 1.5rem으로 설정했다면 <body> 태그 내에서 사용하는 모든 <p> 태그는 기본적으로 1.5rem의 글꼴 크기를 가질 것이다.

 

하지만 인라인 스타일로 <p> 태그의 폰트 사이즈를 1rem, 2rem 등으로 직접 수정한다면 해당 <p> 태그의 글꼴 크기는 루트 요소인 <html>의 font-size인 16px를 기준으로 16px(16px * 1), 32px(16px * 2)로 표현 될 것이다.

 

그렇다면 html 상에서 설정된 폰트의 크기가 별도로 없다면 rem은 무엇을 기준으로 할까?

그것은 바로 브라우저에 기본적으로 설정된 폰트 사이즈이다. 때문에 브라우저의 기본 폰트 사이즈가 16px이라면 html상의 폰트 사이즈를 지정해놓은 코드를 지워도 동일한 형태로 웹페이지가 표현될 것이다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
          font-size: 1.5rem; /* 1.5rem은 24px (16px * 1.5) */
        }
      </style>
    </head>
    <body>
      <p>이 문장은 1.5rem 크기입니다.</p>
      <p style="font-size: 1rem;"> </style>이 문장은 1rem 크기입니다.</p>
      <p style="font-size: 2rem;"> </style>이 문장은 2rem 크기입니다.</p>
    </body>