em
em은 현재의 font-size를 정의한다.
예를 들면 body태그에 em값을 이용해 폰트 사이즈를 지정하면
모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다.
<style>
body{
font-size: 2px;
}
div{
font-size: 2em;
}
</style>
<body>
<div class="test">test</div>
</body>위의 예제를 보면 div에 폰트 사이즈를 2em으로 지정했다.
위의 예제는 2px(body태그의 폰트 사이즈)를 기준으로 2배의 폰트 사이즈로 표현이 된다.
결과적으로 4px의 크기가 된다.
즉 em은 1em = 부모의 폰트 크기라는 계산법을 가지고 있다.
대부분의 브라우저에서 폰트 크기의 디폴트 값은 16px이기 때문에
별도로 지정하지 않는다면 1em은 16px이 된다.
rem
rem은 relative to the root element의 줄임말인데
HTML 문서에서 최상위 요소(root element)는 바로 <html> 요소를 가리킨다.
즉, 1 rem = html요소에 지정된 폰트 크기이다.
<style>
html{ font-size: 2px; }
.hit{ font-size : 4px; }
.mouse { font-size : 1rem; }
<html>
<body>
<div class = "hit">
<div class = "mouse"></div>
</div>
</body>
</html>위의 예제를 보면 mouse의 폰트 크기는 2px이 된다.
em과 rem은 "부모의 폰트 값에 영향을 받는 것"을 활용하면
다양하게 활용할 수 있다.
부모의 폰트 사이즈만 바꿔 존다면 손쉽게 반응형을 만들 수 있기 때문이다!
css는 내 눈으로 적용되는 것이 보이기 때문에
재밌고 신기한 것 같다.
토이 프로젝트를 통해서 rem단위를 쓰게 되었고 어떤 식으로 동작하는지 알고 싶어서
공부를 하였는데 정말 신기한 단위인 것 같다!
반응형으로 무언가 만들어야 할 때 활용하면 정말 좋을 것 같다!
오늘은 새로운 토이 프로젝트를 생각하고 구상하느라 정말 시간이 빨리 갔다.
토이 프로젝트를 하면 확실하게 내가 부족한 점이 무엇인지 알게 되고
나에게 공부가 많이 필요하다는 걸 느끼게 해 준다.
아직은 많이 부족하여 토이 프로젝트라고 부르기에도 민망한 수준이지만
작은 토이 프로젝트들이 나에게 큰 도움이 되는 것 같다!👍👍
더욱 분발해서 좋은 코드를 짜는 개발자가 되고 싶다☺️
'html과 css' 카테고리의 다른 글
| TIL] form (0) | 2021.05.02 |
|---|---|
| TIL] css단위 vh와 vw (0) | 2021.05.01 |
| TIL] ajax (0) | 2021.04.28 |
| TIL] ::before 과 ::after (0) | 2021.04.27 |
| TIL] outline (0) | 2021.04.26 |