폰트를 px로 많이 적용하는 편인데 요것이 잘 못 되었단걸 깨달았다..!!!!
상황에 맞는 폰트단위를 사용해야 한다는 것!!!!
💁♀️이런 단위가 있어요.
- px: 절대단위. 어떤 요소에 의해서도 변하지 않음
- rem: 루트요소(html)에 상대적
- em: 부모요소에 상대적
- vw: 뷰포트너비(화면 크기)에 상대적
rem/em은 반응형 or 모바일 작업 할때 많이 사용하는 단위이다.
16px = 1em(1 * 16)
32px = 2em(2 * 16)
16px = 1em(1 * 16)
36px = 1rem(2 * 16)
🤷♂️em/rem을 사용해야 하는 이유는 뭘까요?
px는 절대적이고 em/rem은 상대적이다.
상대적이란건 비례해서 적용을 한다는 것! 유동적이란 말씀!
px로 모든 페이지를 적용해놓았다고 가정했을때 폰트사이즈 16px로 적용해놓은 것들을 14px로 바꾸기를 원할경우 상위요소뿐만 아니라 하위요소 까지 일일히 다 바꾸어 주어야한다.
보통 상위보다 하위요소들이 폰트사이즈가 작은편이니 14px로 바꾸면 폰트가 커보이거나 비슷해보일것!
하나하나 바꾼다는게 참 귀찮고 노동이죠 ~ !
rem/em을 사용했다면 알아서 유동적으로 바뀌기 때문에 노동이 줄어든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
font-size: 10px;
line-height: 1.5;
}
.box1{
font-size: 40px;
background-color: yellow;
}
.box1 p{
font-size: 30px;
}
.box2{
font-size: 4rem;
background-color: yellow;
}
.box2 p{
font-size: 2rem;
}
.box3{
font-size: 4em;
background-color: yellow;
}
.box3 p{
font-size: 2em;
}
</style>
</head>
<body>
<div class="box1">
<p>
px를 사용했어요<br>
px를 사용했어요
</p>
</div>
<div class="box2">
<p>
rem을 사용했어요<br>
rem을 사용했어요
</p>
</div>
<div class="box3">
<p>
em을 사용했어요<br>
em을 사용했어요
</p>
</div>
</body>
</html>
1. px 의 경우 절대적 이기 때문에 변화없음.
2. body,html 루트요소 폰트사이즈가 10이기 때문에 자식 p가 루트사이즈로 계산되어 적용(2rem = 10px * 2)
3.부모요소가 4em(10px * 4)이기 때문에 자식p가 부모요소에 의해 2em(4em * 2em) 으로 적용
좀 헷갈리는게..10단위로 폰트사이즈가 떨어지면 괜찮은데 18,13 요런식으로 떨어지면 계산하기 좀 복잡해짐;
그래서 rem을 사용 할 경우 root 폰트사이즈로 10으로 하는걸 추천.
18px -> 1.8rem
19px -> 1.9rem 으로 바로 적용가능 하기 때문이다
아 난 좀 복잡하게 사용 해야하는데? 어째요?
폰트 단위별로 변환해주는 사이트가 넘나 넘치기 때문에 사이트 사용 추천
😸vw도 사용할 수 있어요.
1vw = 뷰포트 너비의 1% (1920화면일 경우 19.2px = 1vw)
vw를 사용하면 화면너비의 따라 폰트사이즈가 유동적으로 바뀐다.
보통 컨텐츠 마진,패딩 줄때 사용하는 경우가 많은데 폰트사이즈에도 필요한 경우가 분명 있따 ㅎㅎ
👌언제 어느것을 사용해야 할까요?
작업을 할때 느끼지만 딱 한가지 단위를 사용하는 경우는 없었다..
모바일이나 반응형 작업을 할 경우엔 rem을 권장한다.
컨텐츠의 폰트사이즈가 고정적이여 한다 하면 px를 사용하는 거고 부모 컨텐츠에 따라 자식 컨텐츠 폰트사이즈가 유동적으로 변해야 한다 하면 em을 사용하는것!!!
중요한건 유지보수에 용이하게 알맞은 단위사용으로 유동적으로 작업을 해놔야 하는 것 아닐까 생각함다.
출처:
https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/
'css' 카테고리의 다른 글
| css transfrom translate(-50%,-50%) 사용시 이미지,텍스트 흐림 현상 (3) | 2020.09.18 |
|---|---|
| IE 에서 position fixed 떨림 현상 (0) | 2020.04.29 |
| 핫하게 떠오르는 flex 속성 공부해보자(2) (0) | 2020.03.24 |
| 핫하게 떠오르는 flex 속성 공부해보자(1) (0) | 2020.02.27 |
