HTML5 자습서 CSS 단위들

폰트의 크기, 여백의 크기, 테두리의 두께, 각 요소의 너비나 높이 등 CSS에서 시각적인 크기를 지정할 때 픽셀 단위 뿐 아니라 다양한 단위를 사용할 수 있습니다.

픽셀 단위

가장 이해하기 쉬운 단위는 픽셀 단위이며, px로 표기합니다.

div {
    width: 300px;
    background-color: #CCF;
}
p {
    width: 100px;
    margin-left: 50px;
    background-color: #AAF;
}
<div>
    <p>px 단위</p>
</div>

@pp run

em 단위

CSS에서 em 단위는 현재 요소의 폰트 크기와 동일합니다. 예를 들어 폰트의 크기가 16px인 요소에서 2em32px과 같습니다. 따라서 아래 예시에서 p 요소padding32px 크기를 갖습니다:

p {
  font-size: 16px;
  padding: 2em;
  border: 1px solid black;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

@pp run

Box model을 시각화하면 아래와 같습니다:

@pp run

@pp boxmodel

해당 요소에 font-size가 정의되어 있지 않다면 상위 요소로부터 상속된 font-size 값이 사용됩니다.

예를 들어 아래 예시에서 strong 요소font-size가 명시적으로 지정되지 않았는데 padding-leftpadding-right 값을 em 단위로 지정하고 있습니다. p.firstfont-size14px이므로 p.first에 속한 strong의 좌/우 패딩은 14px이 됩니다.

한편, p.secondfont-size20px이므로, p.second에 속한 strong의 좌/우 패딩은 20px이 됩니다.

.first {
  font-size: 14px;
}
.second {
  font-size: 20px;
}
strong {
  padding-left: 1em;
  padding-right: 1em;
}
<p class="first">
  CSS에서 em 단위는 <strong>현재 요소의 폰트 크기</strong>와 동일합니다.
</p>
<p class="second">
  CSS에서 em 단위는 <strong>현재 요소의 폰트 크기</strong>와 동일합니다.
</p>

@pp run

Box model을 시각화하면 아래와 같습니다:

@pp run

@pp boxmodel

% 단위

% 단위로 지정된 속성 값은 다른 속성 값에 대한 상대적 비율로 정해집니다. % 단위의 값이 어떻게 계산되는지는 CSS 속성에 따라 다릅니다.

예를 들어 width의 값을 %로 지정하면, 상위 요소의 width에 대한 상대값으로 해석됩니다. 상위 요소가 300px이고, 하위 요소가 50%라면 해당 하위 요소의 width150px로 표현됩니다:

div {
    width: 300px;
    background-color: #CCF;
}
p {
    width: 50%;
    background-color: #AAF;
}
<div>
    <p>상위 요소의 50%</p>
</div>

@pp run

% 단위를 잘 활용하면 화면 크기에 맞춰 크기가 변하는 레이아웃을 쉽게 표현할 수 있습니다. 예를 들어 아래 예시에서 파란색 상자는 부모 요소의 크기에 맞게 자동으로 늘어나거나 줄어듭니다:

.box {
    float: left;
    width: 32%;
    height: 50px;
    margin: 5px 1px;
    background-color: #CCF;
}
.wide {
    width: 300px;
}
.narrow {
    width: 200px;
}
<div class="wide">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="narrow">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

@pp run

가이드

HTML

CSS

자바스크립트