[css] 단위

px

절대적인 값이며, 다른 요소들에 영향을 받지 않는다.

/* css */
html {
  font-size: 20px;
}

.container {
  padding-top: 40px;
  background-color: lime;
}

<!-- html -->
<div class="container">
	Codeit
</div>

 

 

rem

• rem은 상대적인 값이지만, html 태그의 font-size에만 영향을 받는다.
• 2rem은 font-size의 2배의 크기이다.

/* css */
html {
  font-size: 20px;
}

.container {
  padding-top: 2rem; /* html의 font-size * 2 = 40px */
  background-color: lime;
}

<!-- html -->
<div class="container">
	Codeit
</div>

 

 

em

• 상대적인 값이며, em은 기준이 자신의 font-size이다.
• 2em은 자기 자신의 font-size의 2배이다. 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값이 기준이 된다.

/* css */
html {
  font-size: 20px;
}

.container {
  /* 자동으로 html의 font-size 20px을 상속받음 */
  padding-top: 2em; /* 자신의 font-size * 2 = 40px */
  background-color: lime;
}

<!-- html -->
<div class="container">
	Codeit
</div>

 

 

%

상대적인 값이다. 예를들어, font-size에서 %가 쓰일 경우, 상위 요소의 font-size에 곱해주는 방식으로 계산한다.

/* css */
.container {
  font-size: 20px;
  background-color: lime;
}

.text {
  font-size: 180%; /* 상위 요소인 container의 font-size * 1.8 = 36px */
  background-color: skyblue;
  margin: 0;
}

<!-- html -->
<div class="container">
    Codeit
    <p class="text">Codeit</p>
</div>

 

%가 margin이나 padding의 단위로 사용될 경우, 상위 요소의 width를 기준으로 계산된다.

/* css */
.container {
  width: 200px;
  background-color: lime;
}

.text {
  padding-left: 30%; /* 상위 요소의 width * 0.3 = 60px */
}

<!-- html -->
<div class="container">
    Codeit
    <p class="text">Codeit</p>
</div>

margin-top이나 padding-bottom 등 세로 속성를 조절할 때에도 상위 요소의 height가 아닌 width를 기준으로 계산된다.

/* css */
.container {
  width: 200px;
  background-color: lime;
}

.text {
  padding-top: 30%; /* 상위 요소의 width * 0.3 = 60px */
}

<!-- html -->
<div class="container">
    Codeit
    <p class="text">Codeit</p>
</div>