CSS UNITS (절대 단위와 상대 단위)

👾 자주 사용되는 CSS Units

• 절대 단위: px, pt 등

• 상대 단위: %, em, rem, vw, vh 등

✓ 기본적으로 브라우저에서 html에 할당되는 폰트 사이즈는 16px (100%, 1em)

px

px은 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위를 의미한다. CSS에서 절대 단위를 사용할 때 대부분은 px을 사용한다.

픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다. 글꼴의 크기를 픽셀로 설정하면, 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정된다.

그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

또한 px은 컨테이너의 사이즈가 변경되어도 컨텐츠가 고정된 값으로 유지되기 때문에 디바이스의 너비에 따라 유동적인 레이아웃이 적용되는 반응형 웹에는 적합하지 않다.

%

%는 바로 부모 요소에서 상대적으로 크기가 계산된다.

em, rem

→ em은 해당 요소의 글꼴 크기를 나타내는 단위로, 만약 해당 요소의 글꼴 크기가 없다면 부모의 글꼴 크기에 따라 상대적으로 크기가 계산된다.

// HTML
<div class="parent">
  Parent
  <div class="child">Child</div>
</div>

// CSS
.parent { font-size: 4em; }
.child { font-size: 0.5em; }

Parent의 font-size는 64px (16px * 4em)

Child의 font-size는 32px (64px * 0.5em)

→ rem은 루트(root) 요소의 글꼴 크기를 의미한다. 최상위(root) 태그에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 <html> 태그이다.

// HTML
<div class="parent">
  Parent
  <div class="child">Child</div>
</div>

// CSS
.parent { font-size: 4rem; }
.child { font-size: 0.5rem; }

Parent의 font-size는 64px (16px * 4rem)

Child의 font-size는 8px (16px * 0.5em)

*브라우저가 지정한 최소 폰트 사이즈(대부분 10px) 보다 작은 경우 10px로 표기될 수 있음.

✨ em, rem 사용 예시

.box {
    width:100px;
    height:150px;
    margin: 2em; /* 48px */
    padding: 1em; /* 24px */
    font-size: 1.5rem; /* 24px */
    border-radius: .5em; /* 12px */
    border: 3px solid palevioletred;
    background-color:lightpink;
}

/*
 - box의 font-size는 root 기준 1.5rem
   root는 기본 16px 이므로, box의 font-size는 24px (16px * 1.5rem)
 - margin은 font-size 기준 2em 이므로 48px (24px * 2em)
 - padding은 font-size 기준 1em 이므로 24px (24px * 1em)
 - border-radius는 font-size 기준 0.5em 이므로 8px (24px * 0.5em)
*/

→ 위 예시에서 font-size는 rem을 사용하고, margin, padding은 em을 쓴 이유는 글자들은 어떤 컴포넌트에서 사용하든 동일한 사이즈를 유지했으면 좋겠고, 나머지 요소들은 폰트 사이즈에 따라서 사이즈가 달라졌으면 좋을 것 같기 때문.

✨ 참고로, 반응형 폰트사이즈 작성시 소수점 없이 계산하기 편리하게 제어하는 방법

html { 
  font-size: 62.5%;
  또는
  font-size: 10px; 
}

⬇️

/*
 1rem    =  10px 
 1.2rem  =  12px
 2rem    =  20px
*/

최상단 요소인 <html>의 font-size를 62.5% 또는 10px로 지정하면 <body> 태그 내의 모든 요소들의 사이즈를 rem으로 쉽게 제어 가능하다.

vw(viewport width), vh(viewport height)

웹사이트에서 화면에 보이는 영역을 viewport라고 한다.

vw vh는 브라우저의 너비나 높이에 따른 사이즈로 1vw는 viewport 너비의 1% (보이는 영역 너비의 1/100), 1vh는 viewport 높이의 1% (보이는 영역 높이의 1/100) 이다.

👾 언제, 어떤 단위를 쓰면 될까?

1. 기기나 브러우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px

2. 반응형 웹(responsive web)에서 기준점을 만들 때 → px

3. 부모 요소의 사이즈에 따라 사이즈가 변경되어야 하는 경우 → %em

4. 부모와는 상관없이 브라우저 사이즈에 대해서 반응해야 하는 경우 → viewprot unitsrem

5. 요소의 너비와 높이에 따라 사이즈가 변경되어야 하는 경우 → %viewport units

6. 폰트 사이즈에 따라서 사이즈가 변경되어야 하는 경우 → emrem

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊

저작자표시 비영리 변경금지

'Frontend Dev > CSS' 카테고리의 다른 글

[Tailwind CSS] Tailwind CSS로 다양한 스타일 작성하기 (3d 애니메이션, bg gradient & image url, 반응형 디자인) (1)	2024.06.12
[Tailwind CSS] Tailwind CSS의 지시어, @tailwind @layer @apply에 대해 이해해보자 (0)	2024.05.30

FAY STORY

CSS UNITS (절대 단위와 상대 단위)

👾 자주 사용되는 CSS Units

px

%

em, rem

vw(viewport width), vh(viewport height)

👾 언제, 어떤 단위를 쓰면 될까?

'Frontend Dev > CSS' 카테고리의 다른 글

티스토리툴바

CSS UNITS (절대 단위와 상대 단위)

👾 자주 사용되는 CSS Units

px

%

em, rem

vw(viewport width), vh(viewport height)

👾 언제, 어떤 단위를 쓰면 될까?

'Frontend Dev > CSS' 카테고리의 다른 글

'Frontend Dev/CSS' Related Articles

티스토리툴바