티스토리 뷰

프로그래밍/CSS

[반응형 웹을 위한 첫걸음] css 단위 정리 px, rem, em, vh, vw, vmin, vmax | 요소 별 단위 지침

우징어🦑 2021. 9. 7. 12:18

<절대단위>

px, pt

창이 바뀌어도 크기가 변하지 않는 고정단위인 애들로는 px, pt, cm, mm, in 등이 있다.

나는 반응형 웹 제작에 필요한 상대단위들을 공부할 것이기 때문에 얘네는 간단히 알고만 갈 것이다!

 

px : 가장 기본적으로 사용되는 단위. 고정단위로, 창의 크기를 변경해도 변하지 않는다. 

pt : 1px = 0.75pt

 

 

<상대단위>

%, rem, em

 

% : 부모 요소를 기준으로 비율을 표현한다. 

body {
  font-size: 14px;
}

div {
  font-size: 120%; /* 14px * 1.2 = 16.8px */
  padding: 2em;    /* 16.8px * 2 = 33.6px */
}

 

 

Rem (root Em)

최상위 요소인 <html>를 기준으로 해당 요소의 크기를 정함. 

html { font-size: 20px }
div { font-size: 1.5rem }

div의 최상위 요소인 html의 크기가 20px이므로 div의 크기는 20px * 1.5 = 30px 이 됩니다. 

1rem = html 요소에 지정된 폰트크기가 되는 것!

 

Em

부모 요소를 기준으로 자식 요소의 크기를 정함. 

.parent { font-size : 10px }
.child { font-size: 0.5em }

부모 요소의 폰트 크기가 10px이고, 자식 요소의 폰트 크기는 10px * 0.5 = 5px 이 됩니다.

 

-> 반응형일 때 부모 요소와 자식 요소 간의 크기 비율을 맞추면서 변화시킬 때 쓰인다. 

각 기기마다 설정된 폰트 크기가 다르기 때문에 대부분 이걸로 크기를 조절해야겠다!

 

 

 

<viewport 단위>

vh, vw, vmin, vmax

-> 반응형일 때, 창(뷰포트) 기준으로 글씨가 바뀔 때 쓰임

 

vh (viewport height) : 뷰포트(화면크기)의 높이의 1%

1vh = 실제 높이값의 1/100

즉 50vh = 실제 높이값의 50/100 이므로 1/2 반을 차지한다. 

 

vw (viewport width) : 뷰포트(화면크기)의 너비의 1%

1vw = 실제 너비값의 1/100

즉 50vw = 실제 너비값의 50/100 이므로 1/2 반을 차지한다. 

 

vh, vw는 %와 같은 맥락의 단위!

 

 

vmin은 vw와 vh 중 작은 것을 기준으로 적용.

vmax는 둘 중 더 큰 것을 기준으로 적용.

 

 

 

참고 사이트

요소 별 단위 지침

1. 글꼴 : rem (em)

html 기본 글꼴 크기 : 16px

글꼴은 em, rem으로 html 기본 글꼴 크기인 16px과의 관계 따지기

  • rem을 써야하는 이유 :
    • 요소의 상속 특성에 상관없이 일관된 크기로 변환
    • 사용자가 설정한 폰트 크기(설정하지 않았을 경우 16px)에 따라 사이트에 배치된 모든 구성 요소가 적절하게 조정
  • 기본 폰트 크기인 16px에 맞춰서 rem으로 디자인 진행
  • em : 드롭다운 메뉴, 요소 내의 아이콘과 텍스트 크기 맞춤 등 특별한 상황 아니면 되도록이면 쓰지 말 것

+) 추가 사항

  • media queries 에도 rem 단위를 사용해라
  • 다중 칼럼 레이아웃의 너비에는 em 또는 rem을 쓰지 말고 %를 사용해라
  • 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰지 마라

 

2. margin, padding : px (고정값)

창의 크기와 상관없이 일정하게 고정값 px로 주는 게 좋다. 

상상해보면 창의 크기에 따라 요소들 margin, padding 변하면 엄청 정신 없겠다.

 

3. 다양한 items(div, span 등) : viewport 단위

뷰포트 크기에 따라 변해야 하므로 vh, vw, vmin, vmax 등 viewport 단위 

그런데 나는 display: flexbox를 이용할 것이기 때문에 자동으로 뷰포트에 맞게 조절될 것이다!

 

정리

  • 글꼴 : html 16px 로 맞춰놓고 rem (필요하면 em)으로 진행.
  • margin, padding : px (고정값)
  • items : flexbox

 

 

flexbox 참고 사이트

더보기

Flexbox 10가지 레이아웃 https://d2.naver.com/helloworld/8540176

 

저작자표시