📚 CSS의 크기 단위: 절대적 vs 상대적
CSS에서 크기를 지정하는 것은 Web Design의 핵심 부분이다. 여기서는 절대적 크기 단위와 상대적 크기 단위의 차이점과 사용 방법에 대해 알아보도록 하겠다.
절대적인 크기 단위
📌 픽셀 (px)
픽셀 (px): 절대적인 크기 단위이다.
화면을 구성하는 기본 단위로, 화면의 해상도에 따라 크기가 결정된다.
상대적인 크기 단위
📌 퍼센트 (%)
퍼센트 (%): 부모 태그의 크기에 상대적인 크기를 지정할 때 사용된다.
예를 들어, 부모 태그의 높이의 50%를 적용하고자 할 때 height: 50%와 같이 지정할 수 있다.
<div id="parent">
I'm 320px tall.
<div id="child">
I'm half the height of my parent!
</div>
</div>
#parent {
background-color: #A655ED;
height: 320px;
}
#child {
background-color: #6942D6;
height: 50%;
}
📌 em
em: 전통적으로 인쇄술에서 대문자 M의 크기를 나타내는 단위이다.
CSS에서는 부모 태그의 font-size에 대한 상대적인 크기를 지정한다. 예를 들어, 부모 태그의 글자 크기의 4배를 적용하고자 할 때 font-size: 4em과 같이 사용한다.
<div id="parent">
My font size is 16px.
<div id="child">
My font size is four times larger than my parent!
</div>
</div>
#parent {
font-size: 16px;
}
#child {
font-size: 4em;
}
📌 rem
rem: '루트(root) em'의 약자로, html 태그의 font-size에 대한 상대적인 크기를 나타낸다.
예를 들어, html 태그의 글자 크기의 2배를 적용하고자 할 때 font-size: 2rem과 같이 사용한다.
<html>
<body>
My font size is 18px.
<div id="other">
My font size is twice the size of the root element's font size!
</div>
</body>
</html>
html {
font-size: 16px;
}
body {
font-size: 18px;
}
#other {
font-size: 2rem;
}
Outro
CSS에서 크기 단위를 선택할 때는 그 상황에 맞는 절대적인 단위와 상대적인 단위를 적절히 혼합하여 사용하는 것이 중요하다. 특히, 상대적인 크기 단위는 Responsival한 Web Design을 구성하는데에 있어 매우매우 유용하다.
상대적 크기 단위들은 웹 페이지가 다양한 환경에서 매끄럽게 조정되도록 도와주며, 보다 접근성 높고 사용자 친화적인 환경을 제공한다. 따라서, 유연한 개발자가 되기 위해서는 이러한 단위들에 대해 완벽하게 이해하고 적절한 상황에 활용하는 것이 중요하다고 여겨진다.
오늘 학습한 크기 단위의 사용을 마스터하고 웹 프로젝트에 효과적으로 통합함으로써, 웹 페이지의 다양한 화면 크기와 장치에 맞게 유연하게 대응하며, 더 나은 사용자 경험을 제공하는 웹 페이지를 구축하는 개발자가 되어보자.
