반응형 웹 폰트 (em, rem)

by H_Develop 2022. 6. 26. 16:51

px 단위는 모니터의 해상도 기준이기에, 스마트 폰 등 다양한 기기를 고려하기엔 어려움.

반응형 웹에서는 px 단위 대신, em(상속 개념) / rem(상속 개념 없음)을 사용

em
- 1em = 16px
- 2em = 32px
- 0.5em = 8px

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

	.title1 {font-size : 1.25em;}
	/* 1.25em = 1em + 0.25em = 16px + 4px = 20px 
    1.25em 대신 20px로 쓰면, 모바일로 봤을 때, 글꼴이 달라질 수 있다.*/
	.title2 {font-size : 1.5em;}	/* 24px */
	.title3 {font-size : 1.75em;}	/* 28px */
    
</style>
</head>
<body>

	<h3 class="title1">안녕하세여</h3>
	<h3 class="title2">안녕하세여</h3>
	<h3 class="title3">안녕하세여</h3>

</body>
</html>

상속 em

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
	#a {font-size : 1em;}
	#a span {font-size : 2em;} /* 2em = 1em * 2em */
	#b {font-size : 2em;}
	#b span {font-size : 2em;} /* 4em = 2em * 2em */
</style>
</head>
<body>
	<div id="a">
		안녕하세요<span>반갑습니다.</span>
	</div>
	<div id="b">
		안녕하세요<span>반갑습니다.</span>
	</div>
</body>
</html>

상속 없는 rem

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
	#a {font-size : 1rem;}
	#a span {font-size : 2rem;} /* 2rem */
	#b {font-size : 2rem;}
	#b span {font-size : 2rem;} /* 2rem */
</style>
</head>
<body>
	<div id="a">
		안녕하세요<span>반갑습니다.</span>
	</div>
	<div id="b">
		안녕하세요<span>반갑습니다.</span>
	</div>
</body>
</html>

'FrontEnd > HTML 반응형 웹' 카테고리의 다른 글

media query (다른 기기에서는 다른 화면 전환) (0)	2022.06.26
12열_그리드_시스템, [class="col_"], [attribute=value] (0)	2022.06.26
그리드 뷰 (Grid View) (0)	2022.06.24
ViewPort (뷰 포트), <meta> 태그 (0)	2022.06.24
반응형 웹 (0)	2022.06.24