💅Decorate from CSS : font-size

💅CSS/⚡ver.0

💅Decorate from CSS : font-size

4:Bee 2024. 2. 13. 13:31

728x90

이번 포스팅에서는 font-size의 기본적인 단위 px과 em/rem을 알아볼 것이다. px와 em/rem은 절대적이냐 상대적이냐 로 나뉜다.

px은 화면에 표시되는 가장 작은 단위이며 상대적인 크기를 가지고 있어 웹 브라우저가 확대가 되어도 크기가 고정된다. 따라서 화면의 크기 변동에 영향을 받지 않기 위해선 px를 사용한다.
em은 부모 요소의 글꼴 크기에 따라 상대적으로 크기가 조절되는 것이다. 즉, 부모 자식관계에서 상호적이라는 것을 알 수 있다.예로 들면 부모의 요소의 글꼴 크기가 16px이고 자식 요소에 2em이 되적용이 된다면 자식 요소의 크기는 32px가되는 것이다.
rem은 글꼴 크기 기준으로 상대적인 크기를 나타낸다. em과 달리 상속된 부모에게 영향을 받지 않으며 항상 루트의 요소의 글꼴 크기를 기준으로 한다. 레이아웃을 설계할 때 일반적으로 사용되며 글꼴 크기가 일관적으로 유지되길 원할 때 유용하다.

이제 코드를 살펴보자.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#px {

font-size: 16px;

}

#em {

font-size: 2em;

}

#rem {

font-size: 1rem;

}

</style>

</head>

<body>

</div>

</body>

</html>

현재 코드를 가지고 보면 px은 웹 브라우저 크기에 변동 없이 px가 고정될 것이다. em은 부모가 16px이기 때문에 32px인 상대적인 크기를 받고 있을 것이다. rem은 웹 브라우저 크기 변동에 영향을 받으니 가변적일 것이다. 이를 웹에서 확인하는 방법은 일반적으로 단순히 확대만 하면 될 것 같지만 브라우저에서 어느정도 설정을 해줘야한다. 방법은 아래와 같다.

크롬 설저에서 글꼴을 검색하고 글꼴 크기 변경을 아주 작게로 변경하면 적용이 될 것이다. 결과는 아래와 같다

우리가 예상했던 것과 같이 설정을 변경하기 전과 같이 px을 절대적이기에 크기가 유지되며 em은 px의 두배 크기를 유지하고 있다. 반대로 rem은 상대적으로 웹 브라우저의 크그에 상대적 영향을 받아 글자 크기가 작아 졌음을 알 수 있었다.

728x90

저작자표시 (새창열림)