CSS의 단위들 (px, rem, em, %)

ez·2021년 1월 7일

HTML과 CSS 다시 보기

목록 보기

8/8

(px, rem, em, %...)

절대적인 값
다른 요소의 값에 영향을 받지 않음
div {
	font-size: 20px;
}

상대적인 값
오직 <html> 태그의 font-size에만 영향을 받음

(2rem은 <html> 태그의 font-size의 2배 크기)

html {
	font-size: 10px;
}

div {
	font-size: 2rem;	// 10px(html) * 2 = 20px
}

rem과 마찬가지로 상대적인 값
em은 자기 자신의 font-size를 기준으로 함

(2em은 자기 자신의 font-size의 2배 크기)

html {
	font-size: 10px;
}

div {
	// html의 font-size: 10px; 상속
	font-size: 2em;	// 10px * 2 = 20px
}

자기 자신의 font-size를 따로 정해주지 않을 경우,
상위 요소에서 상속받은 값을 기준으로 함

상대적인 값
%는 어느 항목에서 쓰이냐에 따라 다른 기준이 적용됨

font-size에서 %가 쓰일 경우,
상위 요소의 font-size에 곱해주는 방식으로 계산

html {
	font-size: 100px;
}

div {
	font-size: 20%;	// 100px * 0.2 = 20px
}

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

html {
	width: 400px;
}

div {
	padding: 5%;	// 400px * 0.05 = 20px
}

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

html {
	width: 200px;
}

div {
	margin-top: 10%;	// 200px * 0.1 = 20px
}

디자인과 개발 사이의 어딘가 🌱