[TIL 4][CSS] property 크기 단위

9757 단어 TILCSSCSS

px

px는 pixel 단위이다. 해상도의 화소 1개 크기를 의미하므로 매우 작은 단위라고 할수 있다.
우리가 흔히 사진 사이즈를 지정할 때 px 단위를 주로 사용한다.

퍼센트

%는 상대 단위인데, 엘리먼트에 지정된 사이즈(상속, 기본사이즈)에 상대적인 사이즈를 설정한다.

<html>
<head>
  <style>
    body {
      font-size: 14px;
      text-align: center;
    }
    div {
      font-size: 120%; 
      font-weight: bold;
      background-color: rgba(255, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div>Font size: 14px * 120% → 16.8px</div>
</body>
</html>


위 경우에서는 div의 부모 엘리먼트인 body의 font-size가 14px이므로 div 자신의 font-size는 14px*120%가 되어 16.8px로 지정이 된다.

em

em은 숫자 자체가 배수를 뜻하는 상대 단위이다. 엘리먼트에 지정된 사이즈(상속, 기본사이즈)에 상대적인 사이즈를 설정한다.
3em이면 엘리먼트에 지정된 사이즈의 3배이다

<html>
<head>
  <style>
    body {
      font-size: 14px;
      text-align: center;
    }
    div {
      font-size: 1.2em; 
      font-weight: bold;
      background-color: rgba(255, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div>Font size: 14px * 1.2em → 16.8px</div>
</body>
</html>

em 사용상의 주의점

<body>
  <div class='box1'>
    <div class='box2'>
      <div class='box3'>
      </div>
    </div>
  </div>
</body>

만약에 위와 같은 코드에서 box1 box2 box3 에 전부 em속성으로 컨텐츠 크기를 정해준다면, box1은 의도한데로 배수로 거치지만 box2은 box1의 크기를 상속받아 그 수치의 배수 크기로 커지고 box3 역시 box2 크기의 배수로 커진다.

body = 14px
box1 = 14px * 1.2 = 16.8px
box2 = 16.8px * 1.2 = 20.16px
box3 = 20.16px * 1.2 = 24.192px

rem

rem의 r은 root를 뜻하고 root는 최상위이므로 최상위 엘리먼트(html)의 사이즈를 기준으로 한다.

Viewport (vh, vw, vmin, vmax)

반응형 웹 디자인을 할 때 viewport 단위를 많이 사용한다.
viewport는 viewport를 기준으로 한 상대적 사이즈이다. 그리고 viewport 기준으로 크기가 변화하므로 창 크기 변경이 일어날 때 viewport 크기가 설정된 엘리먼트 역시 크기가 변경된다.

단위설명너비 1000px, 높이 600px의 1viewport 당 사이즈
vwviewport 너비의 1%10px
vhviewport 높이의 1%6px
vminviewport 너비 또는 높이 중 작은 쪽의 1%6px(높이가 더 작으므로)
vmaxviewport 너비 또는 높이 중 큰 쪽의 1%10px(너비가 더 크므로)

viewport는 ie8이하는 지원하지 않으므로 주의해야 한다.

[PHP/Carbon] subMonth, subRealMonth, subMonthNoOverflow의 결과는 월말에 다르다
MMD 동작 추적 자동화에 대한 도전[서장]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage