*사전지식
rem의 경우 최상위 .root의 font size를 상속하고, em의 경우 부모 요소의 폰트 사이즈를 상속한다.
가변폰트
반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때, 상속 문제를 해결해주는 방법을 가변 폰트라고 함.
(가변 폰트를 적용할 글자 크깃값)/(적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트 값
em
부모가 64px 이고 자식이 32px되려면 부모는 4em, 자식은 0.5em이다
왜냐면 32/64*0.2 = 0.5이기 때문이다.
혹은 자식을 50%라고 지정해줘도 괜찮다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
font-size: 100%;
}
.para {
font-size: 4em;
}
.para p {
font-size: 0.5em;
}
</style>
</head>
<body>
<div class="para">
가변 폰트1
<p>가변 폰트2</p>
</div>
</body>
</html>
매번 이 난리를 치지 않기 위해 등장한 것이 rem
rem
rem 단위는 웹 문서의 시작인 html을 기준으로 한다. 상속 문제가 발생하지 않아서 유용!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
font-size: 100%;
}
.para {
font-size: 4em;
}
.para p {
font-size: 2rem;
}
</style>
</head>
<body>
<div class="para">
가변 폰트1
<p>가변 폰트2</p>
</div>
</body>
</html>
진정한 가변폰트: vw, vh, vmin, vmax단위
가변 폰트는 em의 상속 문제를 해결할 뿐, 글자가 브라우저에 대응해서 늘어나거나하진 앟는다.
실질적인 가변폰트를 써보자
공식
(vw, vh, vmim, vmax 단위를 적용할 글자 크깃값 x 브라우저의 너빗값)/100=크깃값
vw: 브라우저의 너비 기준을 100으로 한 값.
vh: 브라우저의 높이기준을 100으로 한 값.
vmin: 브라우저의 높이와 너비 중 작은 값을 100으로 한 값.
vmax: 브라우저의 높이와 너비 중 큰 값을 100으로 한 값.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.vw {
font-size: 5vw;
}
.vh {
font-size: 5vh;
}
.vmin {
font-size: 5vmin;
}
.vmax {
font-size: 5vmax;
}
/*5(차지하고자하는 크기)*1920(브라우저 현 넓이)/100=96*/
.para {
font-size: 96px;
}
</style>
</head>
<body>
<div class="vw">단위</div>
<div class="vh">단위</div>
<div class="vmin">단위</div>
<div class="vmax">단위</div>
<div class="para">단위</div>
</body>
</html>
'Archived > 반응형' 카테고리의 다른 글
| 반응형 웹#4 px를 %로 바꾸기. (0) | 2019.11.02 |
|---|---|
| 반응형 웹 #03 px를 %로 바꾸기(1) (0) | 2019.11.02 |
| 반응형 웹 #2 기본 개념 이해(2) (0) | 2019.11.02 |
| 반응형 웹 #1 기본 개념 이해(1) (0) | 2019.11.02 |
