[CSS] em과 rem

📚 절대적인 유닛 & 상대적인 유닛

Absolute	Relative
px	em
	rem
	vw
	vh
	%

 

🧡 em

/* 브라우저의 font-size 기본값: 16px */ 
.parent {
  font-size: 5em; /* 80px */ 
}

.child {
  font-size: 0.5em; /* 40px */ 
}

부모 요소의 값을 기준으로 계산한다.

 

 

 

💛 rem

/* 브라우저의 font-size 기본값: 16px */ 
.parent {
  font-size: 5em; /* 80px */ 
}

.child {
  font-size: 0.5em; /* 8px */ 
}

루트의 값을 기준으로 계산한다.

 

 

💚 vw

/* viewport width: 500px */ 
.box {
  width: 0.5vw; /* 250px */
  height: 1.5vw; /* 750px */
}

뷰포트 너비의 값을 기준으로 계산한다.

 

 

 

💙 vh

/* viewport height: 800px */ 
.box {
  width: 1.5vh; /* 1200px */
  height: 0.5vh; /* 400px */
}

뷰포트 높이의 값을 기준으로 계산한다.

 

 

 

💜 %

.parent {
  width: 1000px; 
}

.child {
  width: 70%; /* 700px */ 
}

부모 요소의 값을 기준으로 계산한다.

 

 

 

 

 

📚 유닛 사용 기준

	font-size	box(요소)
루트	rem	vw / vh
부모	em	%

• font-size에는 rem과 em을 주로 사용하고, 요소에는 vw/vh, % 등을 사용한다.
• 루트를 기준으로 할 때는 rem, vw/vh을 사용하고, 부모를 기준으로 할 때는 em, %를 사용한다.