웹 디자인에서 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. 이러한 단위들은 크게 절대 길이 단위와 상대 길이 단위로 나눌 수 있습니다. 각 단위의 특성을 이해하고 적절히 사용하면 다양한 디바이스에서 일관된 레이아웃을 만들 수 있습니다.

• 절대 길이 단위 : px (cm, mm, in, pc, pt 등)
• 상대 길이 단위 : %, vw, vh, em, rem (vmin, vmax 등)

1. 절대 길이 단위

절대 길이 단위는 외부의 영향을 받지 않는 절대적인 값을 지니는 단위입니다. 가장 흔히 사용되는 절대 단위는 픽셀(px)입니다.

1.1 픽셀 px

픽셀은 "Picture Element"의 줄임말로, 디지털 화면에서 이미지를 표현하는 가장 작은 단위이며 "화소"라고도 불립니다. 픽셀은 고정된 값이기 때문에 직관적으로 이해하기 쉽고 사용하기 편리합니다.

<div class="box">이 상자의 크기는 픽셀로 지정되었습니다.</div>

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #000;
  padding: 10px;
}

px 단위만 사용하면 안 되나요?

다양한 디바이스가 생겨나며 픽셀 밀도도 다양해졌습니다.

절대단위의 값(px) 사용 시 디바이스별로 다른 위치, 크기로 보이는 문제가 발생하게 됩니다.

반응형 웹, 접근성, 사용자 경험을 생각한다면 다양한 상대단위의 개념을 이해하고 잘 사용할 수 있어야 합니다.

2. 상대 길이 단위

상대 길이 단위는 외부의 영향(다른 요소나 뷰포트의 크기 등)을 받아 상대적으로 크기가 변하는 단위입니다. 주요 상대 단위로는 %, vw, vh, em, rem 등이 있습니다.

2.1 퍼센트 %

퍼센트는 부모 요소의 해당 속성 값 를 기준으로 하는 상대적인 단위입니다.

<div class="parent">
  <div class="child">이 요소의 너비는 부모 너비의 50%입니다.</div>
</div>

.parent {
  width: 300px;
  background-color: #e0e0e0;
  padding: 10px;
}
.child {
  width: 50%;
  background-color: #b0b0b0;
  padding: 10px;
}

2.2 뷰포트 단위 vw, vh

vw(viewport width)와 vh(viewport height)는 뷰포트, 즉 브라우저 창의 크기를 기준으로 하는 단위입니다. 1vw는 뷰포트 너비의 1%, 1vh는 뷰포트 높이의 1%를 의미합니다.

<div class="viewport-box">
  이 상자는 너비는 뷰포트의 50%, 높이는 뷰포트는 30%입니다.
</div>

.viewport-box {
  width: 50vw;
  height: 30vh;
  background-color: #d0d0d0;
  border: 1px solid #000;
  padding: 10px;
}

2.3 최소/최대 뷰포트 단위 vmin, vmax

화면의 너비와 높이 중 작은 값(min), 큰 값(max)을 기준으로 하는 백분율입니다.

<div>
  <strong>div width: 50vmin;</strong>
  <br />
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium animi
  saepe magnam dolores vel, quis impedit? Ea alias repellendus eius voluptatum.
  Debitis incidunt autem esse perspiciatis culpa natus, nisi voluptatum!
</div>

div {
  background-color: cornflowerblue;
  width: 50vmin;
}

<div>
  <strong>div width: 50vmax;</strong>
  <br />
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium animi
  saepe magnam dolores vel, quis impedit? Ea alias repellendus eius voluptatum.
  Debitis incidunt autem esse perspiciatis culpa natus, nisi voluptatum!
</div>

div {
  background-color: cornflowerblue;
  width: 50vmax;
}

2.4 상대적 글꼴 크기 단위 em, rem

em은 부모 요소로부터 상속받은 요소의 글자 크기(font-size)를 기준으로 하는 배수 단위입니다. rem은 'root em' 의 줄임말로, 최상의 요소(<html>)의 글자 크기(font-size)를 기준으로 하는 배수 단위입니다. <html>의 기본 폰트 사이즈는 16px입니다.

<div class="parent">
  부모 텍스트
  <div class="em-child">em으로 크기가 지정된 자식</div>
  <div class="rem-child">rem으로 크기가 지정된 자식</div>
</div>

html {
  font-size: 16px;
}
.parent {
  font-size: 20px;
}
.em-child {
  font-size: 1.5em; /* 부모의 20px * 1.5 = 30px */
}
.rem-child {
  font-size: 1.5rem; /* 루트의 16px * 1.5 = 24px */
}

생각보다 웹사이트를 제작할 때 폰트 사이즈에 대한 유지보수사항이 자주 발생합니다. 디자이너, 클라이언트에 따라 선호하는 글자 크기가 다르기 때문입니다. 디자인 파일로 작업을 했다가, 글자를 전체적으로 크게 또는 작게 수정해달라는 요청사항이 많은데, 이때 rem 단위를 사용하여 폰트 사이즈를 설정했다면 기준 폰트 사이즈를 수정하면 일괄적으로 변경 처리할 수 있어 유지보수에 용이합니다.

🙋🏻‍♂️ em, rem 어떤 상황에서 어떤 걸 사용하죠?

간단한 판단 기준 🎯

• "전체와 연결되어야 하나?" → rem
• "부모와 연결되어야 하나?" → em

📱 시나리오 1: 버튼 컴포넌트

/* 버튼 크기별로 만들어야 한다면? */
.btn-small {
  font-size: 1.2rem;
}
.btn-medium {
  font-size: 1.6rem;
}
.btn-large {
  font-size: 2rem;
}

.btn {
  padding: 0.5em 1em; /* em 사용! */
  border-radius: 0.25em;
}

• font-size는 rem → 전체 디자인 시스템 기준
• padding은 em → 버튼 크기에 비례해서 버튼 내부의 여백도 커져야 함.

🏢 시나리오 2: 홈페이지 제작

/* 클라이언트: "전체적으로 글자 크기 좀 키워주세요!" */

/* rem 사용한 경우 */
html {
  font-size: 16px;
} /* → 18px로 변경 */
.title {
  font-size: 2rem;
} /* 32px → 36px 자동! */
.content {
  font-size: 1rem;
} /* 16px → 18px 자동! */
.caption {
  font-size: 0.8rem;
} /* 12.8px → 14.4px 자동! */

결과: 한 줄만 바꿨는데 전체 사이트가 비례해서 커짐.

🎮 시나리오 3: 카드 컴포넌트

.card {
  font-size: 1.6rem; /* rem: 전체 기준 */
  padding: 1em; /* em: 카드 크기 기준 */
  border-radius: 0.5em;
}

.card-title {
  font-size: 1.2em; /* em: 카드 글자 크기 기준 */
  margin-bottom: 0.5em;
}

• .card의 font-size만 바꾸면 카드 안의 모든 요소가 비례해서 커짐.

💡 요약