CSS
오늘은 CSS에서 예전부터 확실하게 공부하지 않고 사용하지 못했던 CSS unit 7가지 단위에 대해 알아보았다.
예전부터 CSS를 공부하고 사용할적에 알아야 할 내용들도 많고, 부지런하지 못해 대충 공부하고 넘어갔던지라
이번 기회에 디테일하게 공부하여 간편하게 CSS를 사용해보고 싶어 더 알아보았다.
CSS Unit 단위
- rem(root em)
우선 em으로 예를 들어보자면, em은 현재의 font-size를 정의한다.
예시로 body 태그에 em값을 이용해 폰트 사이즈를 지정하게 되면 모든 자식 요소들은 body의 폰트 사이즈에
영향을 받는다.
- HTML
<body>
<div class="container">container</div>
</body>- CSS
body {
font-size: 14px;
}
div {
font-size: 1.2em;div에 font-size를 1.2em으로 지정했다. 이 예제에서는 body에 폰트 사이즈인 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 될 것이다. 결과적으로 16.8px의 크기가 되는 것이다.
만약 em으로 정의한 폰트 사이즈를 각각의 자식에 선언하면 어떻게 될까?
각각의 div는 각 부모의 폰트 사이즈를 상속받아 점점 커지게 된다.
- HTML
<div>
container
<div>
container
<div>
container
</div>
</div>
</div>이렇게 div 태그가 여러개가 있을 경우, 각각의 바로 위에 부모 태그에 현재 font-size에 대해 1.2em씩 추가가 되어 결과가 나오게 된다. 이때 사용할 수 있는 것이 바로 rem이다.
rem은 최상위 태그에 지정한 것을 기준으로 삼는다. 대부분의 최상위 태그는 html 태그이다.
- CSS
html {
font-size: 14px;
}
div {
font-size: 1.2rem;이렇게 rem 단위를 사용하게 되면, html 태그가 최상위 태그일 때, 모든 div 태그는 14px에 1.2배인 16.8px의 font-size 크기를 가지게 될 것이다.
do your best at any moment