2000년대 초에는 %와 px로만 홈페이지를 만들어왔다. 그 당시에는 반응형이라는 말이 따로 없고, 넓이 1000px로 고정된 사이트만 있었기 때문이다(아마도). 조금 더 나아가 모바일 웹을 만들기도 했다. 당연히 똑같은 디자인일 수 없고, 당연히 같은 코드를 가지고 있지도 않았다. 단지 같은 이름만 가진 다른 사이트를 두개씩 만들어왔던 것이다. 당연히 절대적 길이인 px로만 홈페이지를 만들어왔다. 각설하고, 반응형 웹에서 편하게 사용할 수 있는 상대적 길이 단위를 살펴보자.

절대적 단위

• cm
• mm
• in(1in = 2.54cm = 96px)
• pt
• px
• pc

상대적 단위 : 브라우저/디바이스에 따라 변함, font etc.

• %
• em
• rem
• ex : 현재 폰트의 x-높이값(소문자 x의 높이값) / em의 절반 값
  • 사용 중인 글꼴, 글꼴 사이즈에 따라 변경된다.
  • 글꼴의 중간 지점을 알아내기 위해 사용(CSS1부터 있던 단위)
  • 타이포그래픽에서 세밀한 조정을 할 때 사용. ex. sup, sub

    sup {
      position: relative;
      bottom: 1ex;
    }
    sub {
      position: relative;
      bottom: -1ex;
    }
    

• ch : 문자(0)의 너비값을 기준함
  • 사용중인 글꼴, 글꼴 사이즈에 따라 변경된다.
  • monospace 폰트의 N 의 너비값을 부여 받았다. 이 특정 규칙은 점자 레이아웃에 기반.
  • width: 20ch;는 20개의 문자열을 포함
  • 20ch = 00000000000000000000

• %
• em
• rem
• ch
• 0000000000
• ^{Hello xX}
• _{Hello xX}

뷰포트 단위

• vw / vh : 브라우저 넓이/높이를 기준으로 % 설정 (n/100), 브라우저 화면의 크기에 맞춰 크기를 반환(상대적), 스크롤바 크기를 포함한 전체 크기 기준
• vmin / vmax : 뷰포트 너비 또는 높이를 기준으로 하는 최소 값 / 최대 값입니다.

• rem : 브라우저에 설정된 폰트 크기를 상속(r은 최상위를 뜻하는 root).
  • 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용(반응형웹에 적합).
  • 레이아웃 구성시 px 단위로 생각하고 rem 단위로 환산한다.
  • 10rem = 10 x 16(최상위 요소의 폰트 크기) = 160px
• em : 모든 상위 부모 요소로부터 폰트 크기를 상속.
  • 특정 요소(최상위가 아니라 부모 요소)의 폰트 크기가 기준.
    
  • 10em = 10 x 18(어느 한 div(스타일을 지정한 요소)의 폰트 크기) = 180px

대부분 em 단위는 padding, margin, line-height 등 부모 요소를 상속받아야 할 경우에 사용하고, rem 단위는 font-size, grid 등에 사용한다.

em과 rem 모두 쓰지 말아야 하는 곳

1. 요소의 크기가 절대 변하면 안 되는 상황일 때
2. 다중 칼럼 레이아웃의 너비 : 다중 칼럼 레이아웃의 너비에는 %를 사용한다. em이나 rem은 가변적이지 않기에… 브라우저 너비가 변할 경우 레이아웃이 깨져버린다.
3. 해결책 유동적으로 칼럼의 크기가 변하지만 최대 너비를 설정하여 기준점보다 더 커지지 못하게 한다.

   div { width: 100%; max-width: 75rem;}
   

• 50% : 250px
• 50rem : 800px
• 50em : 1000px
• width:100%, max-width:16rem(256px)

바로가기 →

lang

한국어 ko / 영어 en / 중국어 zh / 일본어 ja / 독일어 de / 러시아어 ru / 불어 fr / 스페인어 es